Cara Mudah Membuat Komentar Blogger Menjadi Show Hide

Cara Membuat Komentar Blogger Menjadi Show Hide - malas ngeblog kali ini akan sedikit membahas tentang widget yang sudah tidak asing lagi yaitu komentar..

Agar komentar blogger bisa di hidden dan di munculkan kembali dengan onclick ( satu klik), tujua 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 ..

Di bawah ini tutorial penerapannya.. simak sampai selesai untuk hasil yang maksimal

Membuat Show Hide Komentar Blogger

1. Silahkan masuk ke Dasbord Blogger

2. Pilih menu Template Edit Template

3. Selanjutnya cari kode berikut ini <div class='comments' id='comments'> jika ketemu hapus ( biasanya terdapat 2 kode seperti itu ) 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. Lalu tambahkan kode di bawah ini tepat di atas kode ini ]]></b:skin>

/* Show and Hide Comments */
.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. Jangan Lupa Simpan Template.

Mudah bukan buatnya , sekarang komentar blog kamu tidak akan muncul bila tidak di klik dan akan hilang ( hide) jika di klik 2 kali..

Demo

Demikian untuk Cara Mudah Membuat Komentar Blogger Menjadi Show Hide semoga bermanfaat Jika ada yang ingin di tanyakan silahkan sampaikan di kolom komentar terimakasih.