Skip to main content

Cara Pasang Buka Tutup Komentar di VioMagz

Cara Pasang Tombol Buka Tutup Komentar di Template VioMagz

Kali ini saya akan membagikan tutorial dan panduan step by step tentang cara memasang tombol buka dan tutup komentar pada template VioMagz. Tombol ini sebenarnya memiliki fungsi untuk menyembunyikan kolom komentar agar tampak rapi.

Sebagai seorang blogger, tentu kita akan banyak mendapatkan komentar dari para pengunjung dan pembaca blog kita. Jika yang komen hanya sedikit tentu tidak masalah. Tapi bagaimana jika tulisan kamu dikomen ratusan bahkan ribuan orang? Tentu halaman blog akan menjadi sangat panjang dan tidak enak dilihat.

Cara Merapikan Komentar di Blog

Solusinya sebenarnya cukup mudah yakni kamu cukup mengatur tinggi maksimal (maximal height) dari kolom komentar. Jadi komentar yang jumlahnya banyak bisa di-scroll seperti iframe.

Solusi lainnya adalah dengan memasang tombol buka dan tutup komentar yang kini sedang ngetren. Jika tombol ini diklik maka akan menampilkan seluruh komentar. Begitu juga sebaliknya, jika tombol tutup diklik maka komentar akan disembunyikan secara otomatis.

Sebagai salah satu pengguna template VioMagz, saya sudah berkali-kali mencoba memasang tombol buka tutup komentar atau tombol show-hide comments ini. Hampir semua tutorial di internet saya coba tapi semuanya gagal. Maklum, karena struktur kode setiap template itu tidak sama.

Hampir putus asa, saya berhasil menemukan sebuah blog yang membahas tentang cara menyembunyikan kolom komentar di Blogger, yakni dari situs BloggerBandung.info. Begitu saya coba, ternyata sukses! Contoh demonya bisa dilihat langsung pada blog ini.

Tampilan dari tombol buka dan tutup komentar alias show and hide comment box ini juga responsif. Terbukti dari tampilannya yang bisa mengikuti beragam ukuran layar mulai dari layar HP, tablet, dan desktop.

Cara Pasang Show and Hide Comments Box

Langsung saja kita coba terapkan pemasangan tombol buka tutup komentar di template VioMagz yang sudah terpasang.

Bukalah dashboard Blogger kamu lalu masuk ke menu Theme - Edit HTML.

Carilah kode <div class='comments' id='comments'>

Kamu akan menemukan 2 buah kode yang sama dalam template VioMagz. Ganti kedua kode di atas dengan script di bawah ini :

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Tampilkan Komentar</a>
<div class='clear'/>
<div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Sembunyikan Komentar</a>
<div class='clear'/>


Kamu bisa mengganti teks atau tulisan pada tombol nantinya dengan mengubah bagian yang saya tandai.

Kemudian carilah kode ]]></b:skin> dan tambahkan script di bawah ini tepat di atasnya :

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


Kamu juga bisa mengubah warna tulisan maupun warna tombol pada script di atas. Silahkan modifikasi sesuai keinginan.

Terakhir, tambahkan Javascript berikut ini sebelum </body> :

<script type='text/javascript'>
//<![CDATA[
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>


Kemudian klik tombol Simpan dan lihat hasilnya.

Silahkan tulis pesan sesuai topik artikel. Dilarang pasang komentar SPAM dan SARA!
Buka Komentar
Tutup Komentar