Cara Membuat Show and Hide Kotak Komentar Blogger Dengan Onclick Event

Cara Membuat Show and Hide Kotak Komentar Blogger Dengan Onclick Event - Lagi lagi hari ini kita akan bahas mengenai tutorial blogging. Jika kemarin kita sudah bahas mengenai Cara Merubah Blog Nofollow Menjadi Dofollow, Kali ini kita akan bahas mengenai Cara Membuat Show and Hide Kotak Komentar Blogger Dengan Onclick Event.

Tujuan menggunakan fungsi ini adalah untuk meringankan loading blog kita. Cara kerja script ini cukup sederhana, yaitu konten komentar akan tertutup sampai kalian menekan tombol show comments. Langsung aja simak dibawah ini mengenai Cara Membuat Show and Hide Kotak Komentar Blogger Dengan Onclick Event :

1.) Buka Blogger > Template > Edit HTML > Cari Markup Komentar Seperti ini :

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

2.) Ganti Semua Markup Diatas 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'/>

3.) Tambahkan Kode berikut Tepat Sebelum ]]></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:#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.) Tambahkan 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>

5.) Simpan Template 

Silahkan Lihat Tampilannya Sekarang. Butuh Demo ? Lihat Gambar Ini

Nah Itulah Cara Membuat Show and Hide Kotak Komentar Blogger Dengan Onclick Event. Jika ada Kesulitan Sekali lagi saya tegaskan untuk bertanya di FansPage Facebook saja. Karena Komentar Blogger tidak dapat memuat gambar.