Cara Membuat Tombol Komentar Show Hide di Blogger

Mintailmu.com – Cara Membuat Komentar Menjadi Show Hide di Blogger – Pada kesempatan kali ini saya akan berbagi Tutorial Bagaimana Cara Membuat Tombol Komentar Show Hide di Blogger atau bisa dibilang membuat tombol tutup dan buka pada kolam komentar agar loading blogger kita menjadi cepat.

Sebenarnya untuk Membuat Tombol Komentar Show Hide di Blogger sangat banyak manfaatnya mulai dari membuat loading blog menjadi cepat karena image pada komentar bisa membuat memeperlambat loading blog, ke dua tampilan blog lebih bagus, ke tiga kalau komentar terlalu bnyak akan mudah dan lebih efisien.

Cara membuat komentar blog menjadi show hide (buka tutup) hanya bisa dilakukan pada blogger biasa saja yang bukan bukan menggunakan template AMP dan menggunakan sistem komentar Disqus, Facebook dan juga bawaan blogger.

Okey sekarang saya akan membagi tutorial Cara Membuat Tombol Komentar Show Hide di Blogger kepada mu.

Cara Membuat Tombol Komentar Show Hide di Blogger

Cara Pertama :
1. Buka Blogger – Login
2. Masuk ke dashboard – Pilih Tema
3. Klik Edit HTML

Cara Kedua :
1. Edit HTML
2. Tekan Ctrl+F
3. Cari kode <div class='comments' id='comments'>

Info : biasanya terdapat dua kode seperti diatas ini
kalian ganti kedua kode tersebut dengan kode dibawah 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 dibawah ini sebelum ]]></b:skin> atau </style> lebih tepatnya taruh kode diatasnya

 /* Show and Hide Comments */
.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:#43ce8e;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:#43ce8e;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}  

5. Lalu tambahkan kode dibawah ini pass di atas </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. Langkah Terakhir, simpan template atau save template

Bagaimana mudah tidak Cara Membuat Tombol Komentar Show Hide di Blogger ini? kalau mudah saya sangat senang karena itu kalian menyimak dengan baik tutorial saya berikan ini kepada anda.