Dipostingan kali ini kita akan membahas seputar kolom Komentar di Blog yaitu Cara Membuat Show Hide Blogger dan Facebook Comments. Postingan ini ialah 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 mampu tidak kolom komentarnya show hide dan menggunakan Onclick Event, aku cukup tertarik dan menjadai perhatian aku untuk segera menerima jawabannya, balasannya 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 mampu Show Hide.
Seperti yang sudah kita ketahui bersama penggunaan Onclick Event ini sangat disarankan alasannya ialah lebih ringan dan tidak menambah beban loading blog dibandingkan menggunakan Jquery, begitu pun juga dengan Facebook Comment kita akan menggunakan asynchronous di dalam instruksi Javascript SDK facebook tersebut jadi hasilnya nanti dapat mengurangi beban loading blog. Buat sahabat yang mau mencobanya mari kita simak bersama.
Langkah Pertama
Silahkan sahabat salin instruksi javascript SDK Facebook ini lalu letakkan dibawah instruksi <body>
Bagi sahabat yang sudah memasang instruksi javascript SDK facebook berarti dapat melewati langkah ini, namun perhatikan sejenak instruksi SDK yang ditandai diatas js.async=true; jikalau belum ada silahkan tambahkan.
Langkah Ke Dua
Silahkan cari instruksi id Comment di instruksi CSS lalu tambahkan instruksi display:none disebelahnya, menyerupai penampakan instruksi dibawah ini.
Langkah Ke Tiga
Periksa apakah template sahabat sudah menggunakan Threaded Comment Hack, jikalau benar silahkan sahabat cari kode
Lalu di geser sedikit kebawah hingga ketemu instruksi penutupnya </b:includable>, setelah ketemu silahkan sahabat salin instruksi dibawah ini lalu letakkan persis sempurna diatas instruksi penutup yang tadi.
Itu yang menggunakan Threaded Comment Hack, lalu bagaimana jikalau templatenya yang menggunakan Threaded Comment Blogger, solusinya hampir sama silahkan sahabat cari instruksi dibawah ini.
Lalu di geser sedikit kebawah hingga ketemu instruksi penutupnya </b:includable>, setelah ketemu silahkan sahabat salin instruksi dibawah ini lalu letakkan persis sempurna diatas instruksi penutup yang tadi.
Langkah Ke Empat
Silahkan Sobat cari instruksi menyerupai dibawah ini
Lalu di geser sedikit kebawah hingga ketemu instruksi penutupnya </b:includable>, setelah ketemu silahkan sahabat salin instruksi dibawah ini lalu letakkan persis sempurna diatas instruksi penutup yang tadi.
Perhatikan penerapan kodenya sesuai petunjuk dan aku sarankan untuk terlebih dahulu membackup templatednya untuk berjaga-jaga jikalau 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 sahabat yang sudah memasang instruksi javascript SDK facebook berarti dapat melewati langkah ini, namun perhatikan sejenak instruksi SDK yang ditandai diatas js.async=true; jikalau belum ada silahkan tambahkan.
Langkah Ke Dua
Silahkan cari instruksi id Comment di instruksi CSS lalu tambahkan instruksi display:none disebelahnya, menyerupai penampakan instruksi dibawah ini.
#comments{.....;display:none}Langkah Ke Tiga
Periksa apakah template sahabat sudah menggunakan Threaded Comment Hack, jikalau benar silahkan sahabat cari kode
<b:includable id='comments' var='post'>Lalu di geser sedikit kebawah hingga ketemu instruksi penutupnya </b:includable>, setelah ketemu silahkan sahabat salin instruksi dibawah ini lalu letakkan persis sempurna diatas instruksi 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 jikalau templatenya yang menggunakan Threaded Comment Blogger, solusinya hampir sama silahkan sahabat cari instruksi dibawah ini.
<b:includable id='threaded_comments' var='post'>Lalu di geser sedikit kebawah hingga ketemu instruksi penutupnya </b:includable>, setelah ketemu silahkan sahabat salin instruksi dibawah ini lalu letakkan persis sempurna diatas instruksi 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 instruksi menyerupai dibawah ini
<b:includable id='post' var='post'>Lalu di geser sedikit kebawah hingga ketemu instruksi penutupnya </b:includable>, setelah ketemu silahkan sahabat salin instruksi dibawah ini lalu letakkan persis sempurna diatas instruksi 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 aku sarankan untuk terlebih dahulu membackup templatednya untuk berjaga-jaga jikalau terjadi error, setelah selesai silahkan di SAVE dan SELESAI, selamat mencoba.
Comments