Cara Membuat Show-Hide Kotak Komentar Blogger

Cara membuat show-hide kotak komentar blog di Blogger maksudnya menyembunyikan kolom komentar blog di bawah postinga. Kolok komen ini digantikan dengan tombol Show Hide, sehingga ini membantu kecepatan loading blog.

Ini penampakannya:

Desain Show-Hide Kotak Komentar Blogger ini juga membuat halaman blog lebih bersih dan rapi. Demonya bisa dilihat di bagian bawah postingan ini, setelah Related Post.

Cara Membuat Show-Hide Kotak Komentar Blogger

1. Tema > klik Edit HTML di Customize
2. Cari dan ganti kode berikut ini (ada dua, ganti dua-duanya):

<div class='comments' id='comments'>

dengan kode:

Baca Juga

• Cara Membuat Table of Contents (ToC) Otomatis di Blogger
• Konten Evergreen Bikin Blog Tetap Banyak Pengunjung Meski Jarang Update
• Tips Blogging: Pengertian Niche Blog dan Cara Memilihnya

<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'/>

3. Copas kode CSS Show-Hide Kotak Komentar Blogger berikut ini di atas kode ]]></b:skin>

.hide-content{display:none;margin:0;padding:0;} 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} a.showcontent:hover{background:#fff;color:#5593f0;} #comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

4. Copas kode Javascript Show-Hide Kotak Komentar Blogger di atas kode </body>

<script type='text/javascript'> //<![CDATA[
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>

Demikian Cara Membuat Show-Hide Kotak Komentar Blogger. (Sumber)