Cara Membuat Show and Hide Comments Facebook dan Blogger

Cara Membuat Show and Hide Comments Facebook dan Blogger - Kembali lagi saya akan berbagi tips blogger setelah dua hari tidak posting, kali ini saya akan berbagi tentang fungsi show dan hide komentar sehingga pengunjung dapat memilih dengan mudah untuk berkomentar. Tutorial kali ini saya akan menerapkan komentar facebook dan blogger secara berdampingan seperti gambar di atas.

Manfaat dari show dan hide komentar ini yaitu memudahkan pengunjung untuk berkomentar dan agar lebih banyak mendapatkan respon dari pengunjung, seperti yang kita ketahui kebanyakan pengunjung pasti sudah login otomatis pada akun google dan akun facebook di desktop maupun smartphone. Dengan adanya show dan hide komentar ini pengunjung terserah memilih berkomentar menggunakan akun tersebut.

Kekurangan kemungkinan kekurangan dari penggunaan cara ini adalah tidak ada icon fontawesome yang seperti logo blogger, saya berharap akan ada uptade icon seperti blogger, maka penggunaannya akan lebih keren saya pikir. Kalau menurut anda bagaimana?

Baiklah saya tidak ingin berbelit-belit menjelaskan karena saya yakin anda juga pasti sudah mengerti apa yang saya maksud sehingga anda berada disini. Kita langsung saja menjelaskan caranya.

Show and Hide Comments Facebook and Blogger:

• Buka Blogger > Template Editor > Cari kode seperti ini  </head> :

• Lalu masukkan Javascript di bawah ini di atas kode </head>:

<script type='text/javascript'>
    //<![CDATA[
    $(window).bind("load resize", function(){
      var url = location.protocol+'//'+location.host+location.pathname;
      var containercm_width = $('#container-commentfb').width();  
        $('#container-commentfb').html('<div class="fb-comments" ' +
        'data-href="'+url+'"' +
        ' width="' + containercm_width + '" data-num-posts="10"></div>');
        FB.XFBML.parse();
    });
    //]]>
    </script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

• Setelah itu anda cari kode html <b:include data='post' name='post'/> lalu anda tambahkan kode di bawahnya dengan kode seperti ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#comments, #container-commentfb {display:none;} .comments-icons {no-repeat; font-size: 20px; font-family: &quot;Arial Narrow&quot;,Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align:text-bottom;}</style>
<div class='comments-icons'>
Silahkan pilih Comment melalui: <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#container-commentfb&quot;).slideToggle();$(&quot;#comments&quot;).hide();'><img class='blogger-icon' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBGDu5nP16qCFKz59DHoL0gtiaN-i7vwDhSG1cebPI9AmsPXJdcRn1ooB7Zoy452mvyx8xXheMfWdQkmNhe_HsN69qD8zJq7CG4LkbK-ZH5F5yJwKDpYPIss6YerpZZlVJAcy-vfwaZ_U/h120/facebook+icon.PNG' width='35'/></a> atau <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#comments&quot;).slideToggle();$(&quot;#container-commentfb&quot;).hide();'><img class='blogger-icon' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRnRlEQ3LQp62lHN7HNFk_vkuwz6vQZ0oAfN6BnCKGq_3jQEocZs-r2joAGqdmUjT5RkOesFFcRJcbMPBNtdQD8IcQcL8FjzIHbl9ahx0MpUdR8iexsk1yILcabfRNO8qB8NdHvdQYWyb7/h120/blogger+%25281%2529.png' width='35'/></a>
</div>
<div id='fb-root'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div data-width='100%' id='container-commentfb' style='padding: 10px;padding-right: 10px;padding-left: 10px;'>
<div class='fb-comments' data-href='http://memberi-cara.blogspot.com/'>
<fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
  </div></div></b:if>

• Jangan lupa ganti alamat yang saya tandai di atas dengan alamat blog anda.

• Selanjutnya kamu save template dan lihat hasilnya.

Mungkin hanya itu saja yang dapat saya sampaikan jika ada kesalahan saya berharap ada yang berkomentar demi kemajuan bersama.Demikian tutorial tentang Cara Membuat Show and Hide Comments Facebook dan Blogger jika ada kesulitan jangan malu bertanya lewat komentar.