Menambahkan Show and Hide Comment pada Blogger

KeyzeX – Menambahkan Show and Hide Comment sangatlah mudah dan dapat mudah juga untuk dipahami serta di praktekan, fungsi dan tujuan menambahkan Show and Hide Comment ini adalah untuk mempercepat ataupun meringankan loading blog di halaman artikel, karena jika pada halaman postingan agan sudah terdapat banyak sekali komentar maka akan memperberat juga loading blog, walau tidak terlalu kena efeknya.

Menambahkan Show and Hide Comment

1. 1. Pastikan login terlebih dahulu pada www.blogger.com
   2. Pada bagian Dashboard pilih Template > Edit Template
   3. Lalu cari kode dibawah ini

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

1. 1. Lalu ganti code di atas dengan code di bawah ini, jika lebih dari 2 maka ganti 2-2nya.

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

1. 1. Lalu tambahkan kode di bawah ini 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;} 

1. 1. Tambahkan juga kode Javascript di bawah ini sebelum 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>

1. Terakhir simpan Template lalu lihat hasilnya.