Cara Membuat Show Dan Hide Kotak Komentar di Blog

Cara Membuat Show dan Hide Kotak Komentar di Blog – Ada pertanyaan menarik, bagaimana cara menampilkan dan menyembunyikan kotak komentar di blog?. Tentu saja ada caranya, dengan cara menyembunyikan kotak komentar, pengunjung yang berkunjung ke web/blog tidak akan melihat banyaknya komentar. Seperti kita ketahui, fungsi kotak komentar sangat penting bagi sebuah web/blog, akan tetapi jika jumlah komentar sudah sangat banyak, maka web/blog akan terlihat tidak menarik. Ditambah lagi jika pengunjung membukanya melalui mobile, akan sangat menggangu.

Solusinya dengan menambahkan fungsi show dan hide kotak komentar. Tujuan menambahkan fungsi ini yaitu untuk mempercantik dan meringankan loading (onload) blog di halaman posting, apabila pada postingan blog Anda sudah banyak komentar dari pengunjung. Salah satu cara untuk menambahkan tombol show dan hide pada kotak komentar adalah dengan menambahkan javascript ke dalam template blog. 

Cara kerja script ini sangat sederhana, yaitu kotak komentar di blog akan tetap tertutup sebelum Anda membuka kotak komentar dengan cara menekan tombol show dan hide. Berikut ini beberapa langkah cara membuat show dan hide kotak komentar di blog.

Membuat Show dan Hide Kotak Komentar di Blog

1. Login ke akun blogger Anda > pilih Theme > klik Edit Theme > Cari kode berikut ini:            <div class='comments' id='comments'>
 Note: Kode tersebut biasasanya ada dua pada template blog.

2. Silakan ganti kedua kode tadi 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'/>

3. Tambahkan kode dibawah ini diletakan 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;}

4. Selanjutnya, tambahkan kode di bawah ini sebelum </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>

5. Terakhir, save template dan lihat hasil perubahannya.

Demikian cara membuat show dan hide kotak komentar di blog, semoga berguna dan bermanfaat. Apabila ada masalah atau kesulitan jangan ragu untuk berkomentar.

Happy enjoy,,,Guys!