Dipostingan kali ini kita akan membahas seputar kolom Komentar di Blog yaitu Cara Membuat Show Hide Blogger dan Facebook Comments. Postingan ini adalah lanjutan dari pembahasan sebelumnya Cara Pasang Komentar Disqus Blogger dan Facebook di Blog yang pernah kita bahas dan ada beberapa pertanyaan yang masuk melalui contact form yang menanyakan bisa tidak kolom komentarnya show hide dan menggunakan Onclick Event, saya cukup tertarik dan menjadai perhatian saya untuk segera mendapatkan jawabannya, akhirnya setelah googling dan tanya di forum ketemu juga.
Nah dipostingan kali ini akan membahas hal tersebut membuat komentar menggunakan Onclick Event dan untuk kolom komentarnya sendiri menggunakan dua Platform yaitu Blogger dan Facebook Comment yang bisa Show Hide.
Seperti yang sudah kita ketahui bersama penggunaan Onclick Event ini sangat disarankan karena lebih ringan dan tidak menambah beban loading blog dibandingkan menggunakan Jquery, begitu pun juga dengan Facebook Comment kita akan menggunakan asynchronous di dalam kode Javascript SDK facebook tersebut jadi hasilnya nanti dapat mengurangi beban loading blog. Buat sobat yang mau mencobanya mari kita simak bersama.
Langkah Pertama
Silahkan sobat salin kode javascript SDK Facebook ini lalu letakkan dibawah kode <body>
Bagi sobat yang sudah memasang kode javascript SDK facebook berarti dapat melewati langkah ini, namun perhatikan sejenak kode SDK yang ditandai diatas js.async=true; jika belum ada silahkan tambahkan.
Langkah Ke Dua
Silahkan cari kode id Comment di kode CSS lalu tambahkan kode display:none disebelahnya, seperti penampakan kode dibawah ini.
Langkah Ke Tiga
Periksa apakah template sobat sudah menggunakan Threaded Comment Hack, jika benar silahkan sobat cari kode
Lalu di geser sedikit kebawah sampai ketemu kode penutupnya </b:includable>, setelah ketemu silahkan sobat salin kode dibawah ini lalu letakkan persis tepat diatas kode penutup yang tadi.
Itu yang menggunakan Threaded Comment Hack, lalu bagaimana jika templatenya yang menggunakan Threaded Comment Blogger, solusinya hampir sama silahkan sobat cari kode dibawah ini.
Lalu di geser sedikit kebawah sampai ketemu kode penutupnya </b:includable>, setelah ketemu silahkan sobat salin kode dibawah ini lalu letakkan persis tepat diatas kode penutup yang tadi.
Langkah Ke Empat
Silahkan Sobat cari kode seperti dibawah ini
Lalu di geser sedikit kebawah sampai ketemu kode penutupnya </b:includable>, setelah ketemu silahkan sobat salin kode dibawah ini lalu letakkan persis tepat diatas kode penutup yang tadi.
Perhatikan penerapan kodenya sesuai petunjuk dan saya sarankan untuk terlebih dahulu membackup templatednya untuk berjaga-jaga jika terjadi error, setelah selesai silahkan di SAVE dan SELESAI, selamat mencoba.
<div id='fb-root'></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>Bagi sobat yang sudah memasang kode javascript SDK facebook berarti dapat melewati langkah ini, namun perhatikan sejenak kode SDK yang ditandai diatas js.async=true; jika belum ada silahkan tambahkan.
Langkah Ke Dua
Silahkan cari kode id Comment di kode CSS lalu tambahkan kode display:none disebelahnya, seperti penampakan kode dibawah ini.
#comments{.....;display:none}Langkah Ke Tiga
Periksa apakah template sobat sudah menggunakan Threaded Comment Hack, jika benar silahkan sobat cari kode
<b:includable id='comments' var='post'>Lalu di geser sedikit kebawah sampai ketemu kode penutupnya </b:includable>, setelah ketemu silahkan sobat salin kode dibawah ini lalu letakkan persis tepat diatas kode penutup yang tadi.
<div id="fb_comments" style="height:0;">
<div class="fb-comments" expr:data-href='data:post.url' data-width="100%" data-numposts="5" data-colorscheme="light"></div>
</div>Itu yang menggunakan Threaded Comment Hack, lalu bagaimana jika templatenya yang menggunakan Threaded Comment Blogger, solusinya hampir sama silahkan sobat cari kode dibawah ini.
<b:includable id='threaded_comments' var='post'>Lalu di geser sedikit kebawah sampai ketemu kode penutupnya </b:includable>, setelah ketemu silahkan sobat salin kode dibawah ini lalu letakkan persis tepat diatas kode penutup yang tadi.
<div id="fb_comments" style="height:0;">
<div class="fb-comments" expr:data-href='data:post.url' data-width="100%" data-numposts="5" data-colorscheme="light"></div>
</div>Langkah Ke Empat
Silahkan Sobat cari kode seperti dibawah ini
<b:includable id='post' var='post'>Lalu di geser sedikit kebawah sampai ketemu kode penutupnya </b:includable>, setelah ketemu silahkan sobat salin kode dibawah ini lalu letakkan persis tepat diatas kode penutup yang tadi.
<b:if cond='data:blog.pageType == "item"'>
<div id="Button1" style="margin:70px 0 30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='block';fb_comments.style.height='0';Button1.style.display='none';Button2.style.display='block';">Blogger Comments</div>
<div id="Button2" style="display:none;margin:70px 0 30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='block';fb_comments.style.height='0';Button1.style.display='block';Button2.style.display='none';">Blogger Comments</div>
<div id="Button3" style="margin:70px 0 30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='none';fb_comments.style.height='100%';Button3.style.display='none';Button4.style.display='block';">Facebook Comments</div>
<div id="Button4" style="display:none;margin:70px 0 30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='none';fb_comments.style.height='100%';Button3.style.display='block';Button4.style.display='none';">Facebook Comments</div>
</b:if>Perhatikan penerapan kodenya sesuai petunjuk dan saya sarankan untuk terlebih dahulu membackup templatednya untuk berjaga-jaga jika terjadi error, setelah selesai silahkan di SAVE dan SELESAI, selamat mencoba.
EmoticonEmoticon