Cara Membuat Kotak Komentar Blog Menjadi Show Hide

Baca Juga

Berikut ini Cara Membuat Kotak Komentar Blog Menjadi Show Hide agar blog lebih SEO dan fast loading. Demonya bisa di lihat di bagian terbawah halaman ini.

Cara ini agar kolom komentar blog di bagian bawah postingan bisa di-hidden dan dimunculkan kembali, dengan onclick (satu klik).

Tujuan utamanya adalah membuat loading blog semakin ringan , namun tidak mengurangi nilai responsive blog tersebut..

Cara kerja fitur ini adalah komentar blog tidak terbuka otomatis melainkan harus menekan tombol show and hide dulu.

Membuat Show Hide Komentar Blogger

1. Silahkan masuk ke Dasbord Blogger

2. Pilih menu Tema > panah > Edit HTML

3. Cari kode berikut ini: 

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

Biasanya ada dua kode. Hapus keduanya dan ganti dengan kode 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. Simpan kode di bawah ini tepat di atas kode ini ]]></b:skin>

/* Show and Hide Comments by CB Blogger */ .hide-content{ font-family: Poppins,sans-serif ;font-weight:500;display:none;margin:0;padding:0;} a.showcontent,#comments a.hiddencontent{font-family: Poppins,sans-serif ;display:block;text-decoration:none;position:relative;color:#fff;font-weight:500;font-size:15px;padding:12.5px 0;background:#f24a4a;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s} #comments a.hiddencontent {background:#f24a4a;color:#fff;transition:all .3s} a.showcontent:hover{background:#fb5656;color:#fff;} #comments a.hiddencontent:hover{background:#f24a4a;color:#fff;}

5. Tambahkan lagi kode di bawah ini sebelum </body>

<script type='text/javascript'> //<![CDATA[ // Show and Hide 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. Save! Simpan Template.

Demikian untuk Cara Mudah Membuat Komentar Blogger Menjadi Show Hide.*