Pada kesempatan kali ini akan membahas bagaimana cara untuk membuat Show and Hide Comment Blogger dengan Onlcik Event. Dengan menggunakan atribut onclick event dapat membuat blog sobat menjadi lebih cepat karena blog akan meload bagian komentar saat sudah diklik show and hide jika belum diklik maka tidak akan terload dengan begitu blog akan semakin cepat.

Cara kerja dari script ini cukup sederhana yaitu konten komentar akan tetap tertutup sebelum sobat membuka area komentar dengan menekan tombol show and hide.

Show and Hide Comments Blogger dengan Onclick Event

1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > kemudian cari kode dibawah ini

Biasanya terdapat dua kode seperti diatas

Ganti (kedua) kode diatas dengan kode dibawah ini

HTML
<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'/>

2. Tambahkan kode dibawah ini sebelum ]]></b:skin> atau </style>

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

3. Tambahkan kode dibawah ini sebelum </body>

jQuery
<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>

4. Simpan Tema dan lihat hasilnya

Nah semoga artikel ini dapat bermanfaat untuk sobat semua dan sekian tutorial tentang cara Menambahkan Show and Hide Comments Blogger dengan Onclick Event.