Membuat Show Hide Kolom Komentar Blogspot

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

Jika seandainya blog Anda mendapatkan 100 komentar dalam seharinya, tentu konten dalam komentar akan membuat scroll pada blog nantinya jadi terlalu panjang dan itu akan ditampilkan ketika halaman/artikel tertentu dalam blog di akses, berbeda bila Anda menerapkan teknik show hide kolom komentar, konten yang terdapat pada area komentar tidak ditampilkan kecuali jika pengunjung blog melakukan klik tombol untuk menampilkan kolom komentar.

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

Kita bisa saja mengatur kondisi untuk menampilkan show hide hanya ketika terdapat konten/komentar pada kolom komentar blog, atau tetap menampilkan show hide meskipun belum ada komentar, dan disini Saya menggunakan 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 kode <b:skin><![CDATA[/* pada kolom pencarian (enter) dan tambahkan kode CSS berikut 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 kode </head> pada kolom pencarian(enter) lalu tambahkan kode JavaScript berikut 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 kode <div class="comments" id="comments">. Umumnya terdapat 2 kode, hapus/replace keduanya menggunakan kode berikut
   

   <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 seperti 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 hanya 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 hanya akan tampil ketika sudah ada pengunjung yang berkomentar, menurut saya cara kedua cocok untuk blog yang melakukan moderasi komentar
 

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple