Membuat Show Hide Kolom Komentar Blogspot

Show Hide kolom komentar blog ialah sebuah cara untuk menampilkan dan menyembunyikan kolom komentar pada blogspot. Sehingga saat tombol show hide tidak diklik, maka kolom komentar blog tidak akan ditampilkan, dan tentunya berdasarkan Saya cara ini sangat baik bila diterapkan pada blog yang selalu mendapat banyak komentar.

Jika seandainya blog Anda mendapat 100 komentar dalam seharinya, tentu konten dalam komentar akan membuat scroll pada blog nantinya jadi terlalu panjang dan itu akan ditampilkan saat halaman/artikel tertentu dalam blog di akses, tidak sama bila Anda menerapkan metode show hide kolom komentar, konten yang terdapat pada area komentar tidak ditampilkan kecuali jikalau pengunjung blog melaksanakan klik tombol untuk menampilkan kolom komentar.

Umumnya diblog terdapat 2 markup atau instruksi yang dipakai dalam membungkus element komentar yaitu <div class="comments" id="comments">. Kode pertama ialah kondisi dimana kolom komentar belum terisi oleh konten / komentar pengunjung. Kode kedua ialah kondisi dimana sudah terdapat komentar pengunjung pada artikel.Keduanya masing menggunakan  <div class="comments" id="comments">

Kita sanggup saja mengatur kondisi untuk menampilkan show hide spesialuntuk saat terdapat konten/komentar pada kolom komentar blog, atau tetap menampilkan show hide meskipun belum ada komentar, dan disini Saya memakai keduanya, show hide akan ditampilkan meskipun sudah atau belum terisi komentar.

1. Masuk ke Edit HTML template blosgpot masing – masing 
2. Cari/CTRL+F masukan instruksi <b:skin><![CDATA[/* pada kolom pencarian (enter) dan menambahkan instruksi CSS diberikut ini dibawahnya 
   

   /* Show Hide Kolom Komentar Blogspot */ .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:#ee4b3d;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s} #comments a.hiddencontent {background:#ee4b3d;color:#acb3b8;transition:all .3s} a.showcontent:hover{background:#b0e18e;color:#333132;} #comments a.hiddencontent:hover{background:#b0e18e;color:#333132;} 

3. Cari/CTRL+F masukan instruksi </head> pada kolom pencarian(enter) kemudian menambahkan instruksi JavaScript diberikut diatasnya
   

   <script type='text/javascript'> //<![CDATA[ // Show Hide Kolom Komentar Blogspot 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. Selanjutnya cari instruksi <div class="comments" id="comments">. Umumnya terdapat 2 kode, hapus/replace keduanya menggunakan instruksi diberikut
   

   <a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Add 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'/>

5. Bila berhasil tombol show hide kolom komentar blog akan terlihat menyerupai pada gambar dibawah ini

   

   Kondisi komentar dalam keadaan Hide/Tertutup

   
   

   

   Ketika ditekan maka kolom komentar akan ditekan

   
   

Ketika tombol show comment di klik maka kolom komentar blog akan ditampilkan, dan apabila tombol Hide Comment di tekan, maka kolom komentar akan ditutup.

Bila Anda menginginkan kondisi kolom komentar tetap terbuka atau tombol show hide spesialuntuk ditampilkan ketik sudah terdapat komentar dalam area komentar blog. Anda tidak usah mereplace / mengganti kode pertama <div class="comments" id="comments"> dalam template Anda, sehingga nanti tombol show hide ini spesialuntuk akan tampil saat sudah ada pengunjung yang berkomentar, berdasarkan saya cara kedua cocok untuk blog yang melaksanakan moderasi komentar
 

Share :