Cara Menyembunyikan Kolom Komentar Blogger - Show & Hide Comments Box - Blogger Bandung

Cara Menyembunyikan Kolom Komentar Blogger - Show & Hide Comments Box.

Berikut ini cara menyembunyikan kotak komentar blog dengan menambahkan fungsi show and hide (tunjukkan dan sembunyikan). Penampilannya seperti gambar di bawah ini yang akan muncul di bagian paling bawah postingan blog.

Fungsi menyembunyikan kolom komentar blogger Anda agar loading blog menjadi lebih cepat bin ringan.

Cara kerja dari kode ini kotak atau kolom komentar akan tertutup saat halaman artikel dibuka dan dengan menekan (klik) tombol show kolom komentar akan terbuka.

Cara Menyembunyikan Kolom Komentar Blogger

1. Klik Template / Tema > Edit HTML.

2. Cari kode berikut ini:

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

3. Akan ada dua kode. Hapus dan Ganti kedua kode tersebut dengan kode berikut 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'/>

4. Simpan kode CSS berikut ini di atas kode ]]></b:skin>

.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. Pasang kode Javascript di bawah ini sebelum kode </body> yang ada di bagian bawah kode template Anda.

<script type='text/javascript'>
//<![CDATA[
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. Pastikan ada link ke kode jQuery di template Anda. 

7. Save! Simpan template Anda. 

Beres.

Itu dia Cara Menyembunyikan Kolom Komentar Blogger - Show & Hide Comments Box. (bloggerbandung.info).*

Sumber: Helplogger