Cara Pasang Show & Hidden Komentar Blogger dan Disqus - Seperti yang kita ketahui istilah Onclick Event, yaitu sebuah atribut yang bertugas untuk menampilkan (show) dan menutup (hidden) widget komentar pada blog, seperti disqus, maupun komentar blogger blogspot. Sementara untuk komentar Facebook, kami belum mencoba.
Selain itu, tujuan untuk pemasangan atribut Onclick Event ini adalah untuk mempercepat loading blog. Apalagi widget komentar Disqus, yang begitu sangat berat, belum lagi kalau di salah satu postingan terdapat banyak komentar hingga puluhan, apalagi ratusan, tentu akan menambah beban Loading blog.
2. Cari dan temukan kode berikut ini <div class='comments' id='comments'>. Jika anda mengalami masalah dalam menemukan kode, cukup gunakan Ctrl F dan masukan tag <div class='comments' id='comments'> kemudian tekan enter.
3. Ganti kode berikut <div class='comments' id='comments'> dengan kode yang kami sediakan di bawah ini.
4. Tambahkan kode di bawah ini, tepat di atas </style> atau ]]></b:skin>.
5. Salin juga kode di bawah ini, lalu letakkan kode di atas </body>.
6. Jika sudah, maka klik Simpan dan lihat hasilnya.
Demikian Cara Membuat Show & Hidden Komentar Blogger Dan Disqus, semoga bisa menjadi referensi dan bermanfaat untuk semua. Selamat mencoba!
Selain itu, tujuan untuk pemasangan atribut Onclick Event ini adalah untuk mempercepat loading blog. Apalagi widget komentar Disqus, yang begitu sangat berat, belum lagi kalau di salah satu postingan terdapat banyak komentar hingga puluhan, apalagi ratusan, tentu akan menambah beban Loading blog.
Cara Membuat Show & Hidden Komentar Blogger dan Disqus
1. Langkah pertama silahkan anda masuk ke Dashboard Blogger ->> Klik menu Tema ->> Klik Edit HTML.2. Cari dan temukan kode berikut ini <div class='comments' id='comments'>. Jika anda mengalami masalah dalam menemukan kode, cukup gunakan Ctrl F dan masukan tag <div class='comments' id='comments'> kemudian tekan enter.
3. Ganti kode berikut <div class='comments' id='comments'> dengan kode yang kami sediakan di bawah ini.
<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>
<div class='clear'/>
<div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
<div class='clear'/>4. Tambahkan kode di bawah ini, tepat di atas </style> atau ]]></b:skin>.
.hide-content{display:none;margin:0;padding:0;}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}5. Salin juga kode di bawah ini, lalu letakkan kode di atas </body>.
<script type='text/javascript'>
//<![CDATA[
// Hide and Show Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>6. Jika sudah, maka klik Simpan dan lihat hasilnya.
Terkadang pada template memiliki beberapa kode <div class='comments' id='comments'>, silahkan anda ganti seperti yang sudah kami sampaikan.
Demikian Cara Membuat Show & Hidden Komentar Blogger Dan Disqus, semoga bisa menjadi referensi dan bermanfaat untuk semua. Selamat mencoba!
إرسال تعليق