Cara Mudah Membuat Tombol Komentar Show Hide di Blog

Cara Mudah Membuat Tombol Komentar Show Hide di Blog - Mungkin kalian pernah lihat di blog ini ataupun blog lain, dimana pada kolom komentar terdapat tombol show dan hide komentar, dan kalian ingin mengaplikasikannya di blog sobat sendiri. Nah, mungkin kalian tidak mengetahui bagaimana memasangnya di blog, kalian beruntung karena mengunjungi blog ini.

Kenapa kalian beruntung? karena pada kesempatan kalia ini saya akan memposting tutorial tersebut. Penasaran dengan tutorialnya? sebaiknya kalian simak berikut ini.

Cara Memasang Tombol Komentar Show/Hide di Blogger :

1. Pastikan sobat telah login ke dasboard blogger kalian masing-masing.

2. Pada dasboard, pilih Tema/Theme.

3. Lalu klik Edit HTML.

4. Setelah itu tekan CTRL+F pada keyboard.

5. Kemudian cari kode berikut

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

Biasanya terdapat dua kode yang sama sepeti diatas.

6. Kemudian ganti kedua kode tersebut 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'/> 

7. Selanjutnya letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>

 /* 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;} 

8. Kemudian tambahkan juga kode dibawah ini tepat diatas kode </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> 

9. Setelah step diatas dilakukan, langkah terakhir kalian tinggal save template.

Nah, demikian tutorial bagaimana Memasang Tombol Komentar Show/Hide di Blogger. Selain memperindah tampilan blog kalian, juga bisa sedikit mempercepat loading blog kalian. Mungkin cukup sampai disini untuk artikel pada hari ini, Terima kasih buat yang sudah berkunjung

Share this post