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.

Masuk ke Edit HTML template blosgpot masing – masing

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;}

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>

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'/>

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

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

4 Responses to "Membuat Show Hide Kolom Komentar Blogspot"

PutraApril 19, 2017 at 6:05 PM

Kalau bisa dihide berarti bisa ngurangi waktu loading juga ya mas..
Bisa dicoba nih
wongcrewchildApril 19, 2017 at 8:19 PM

cocok neh buat blog saya :)
MayaApril 20, 2017 at 6:40 AM

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
OpiJuly 18, 2018 at 8:04 AM

makasih infonya gan

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin