Cara Membuat Show Hide Komentar di Blogger

Tujuan menambahkan fungsi Show Hide Comment ini yaitu untuk meringankan loading blog di halaman posting jika di postingan blog sobat sudah terdapat banyak komentar didalamnya. Cara kerja dari script ini cukup sederhana yaitu konten komentar akan tetap tertutup sebelum sobat membuka area komentar dengan menekan tombol show and hide yang akan saya bagikan ini.

1. Klik Template - Edit HTML
2. Gunakan CTRL + F untuk mencari kode
3. Masukkan kode dibawah ini tepat dibawah kode </script> jika anda sudah memilikinya hiraukan saja kode dibawah ini walaupun berbeda dengan jQuery anda.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

4. Masukkan kode di bawah ini tepat diatas kode ]]></b:skin> atau </style>

.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;}

5. Letakkan kode di bawah ini tepat di atas kode </head> atau </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. Cari kode <div class='comments' id='comments'> ganti dengan kode dibawah ini. Jika terdapat lebih dari satu kode, usahakan ganti kode mulai dari yang teratas. Coba mana yang bisa !!

<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. Save Template dan lihat hasilnya...