Cara Menambahkan Show/Hide di Komentar Blog

Cara Menambahkan Show/Hide di Komentar Blog - Show/Hide komentar bertujuan untuk meringankan loading sebuah blog, karena biasanya terdapat banyak sekali komentar di suatu artikel dan semakin banyak komentar semakin berat juga loading sebuah halaman, cara kerja dari script kali ini cukup simple, jika kalian ingin membuka komentar yang ingin di load kalian bisa klik " Show comments " dan sebaliknya.

Jika kalian tertarik untuk memasang Show/Hide komentar di Blog kalian, ikuti langkap-langkah simple dibawah ini.

1. Buka Dashboard Blogger kalian.

2. Ke Menu Template/Tema => Edit HTML

3. Cari Kode dibawah ini :

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

Biasanya terdapat 2 kode diatas didalam template kalian.

Ganti kedua Kode 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'/>

2. Tambahkan kode dibawah ini di atas 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:#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 di atas 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>

4. Klik Simpan Template.

Demikian Artikel Cara Menambahkan Show/Hide di Komentar Blog, jika ada yang ingin ditanyakan silakan komen di kolom komentar dibawah.

Bagikan Artikel ini