Cara Membuat Tombol Show Hide Komentar Blogger - Mediaachmad

Mediaachmad.com - Cara membuat Tombol Show Hide Komentar Blogger. Pada kesempatan kali ini mediaachmad akan memberikan tutorial Cara membuat Tombol Show Hide Komentar Blogger. Manfaat yang dapat kalian dapatkan dari memasang fungsi Tombol Show Hide Komentar ini, yaitu dapat meringkas halaman website sobat, terutama untuk tingginya.

Jika ada postingan sobat yang mendapat komentar dengan jumlah 100 an maka akan membuat halaman blog semakin Panjang kebawah, scroll akan semakin mengecil. Namun jika sobat memasang fungsi ini, tampilan blog sobat akan lebih ringkas walaupun terdapat ratusan komentar.

Oke langsung saja silakan simak tutorial dibawah ini.

Cara membuat Tombol Show Hide Komentar Blogger

1. Pertama, silakan sobat login ke Blogger – masuk ke TEMA – lalu klik EDIT HTML. Lalu silakan cari kode dibawah ini.

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

Biasanya kode diatas terdapat 2 buah, silakan ganti yang 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. Kedua, tambahkan kode CSS dibawah ini di ATAS 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;}

3. Ketiga, tambahkan kode JS dibawah di ATAS </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. Terakhir, klik Simpan Tema dan sekarang lihat hasilnya.

Mungkin itu tutorial yang dapat mediaachmad sampaikan tentang Cara membuat Tombol Show Hide Komentar Blogger, Semoga dapat bermanfaat sekaian dan terima kasih.