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 tertutup
    Kondisi komentar dalam keadaan Hide/Tertutup

    Ketika tombol ditekan
    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
 

3 Responses to "Membuat Show Hide Kolom Komentar Blogspot"

  1. Kalau bisa dihide berarti bisa ngurangi waktu loading juga ya mas..
    Bisa dicoba nih

    ReplyDelete
  2. Waduh saya jadi minder, nggak pede komentar di blog para ahli, tapi kalau nggak komentar ntar dicurigai sebagai pengunjung gelap hehe
    saya sangat berterima kasih dengan ilmu baru ini, suatu saat kalau blog saya sudah ramai pengunjung mungkin saya akan gunakan trik ini
    salam

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...