Cara Membuat Buka Tutup Komentar Pada Template Viomagz

Tombol ini sebenarnya memiliki fungsi untuk menyembunyikan kolom komentar agar tampak rapi dan elegan dan tidak terlalu jauh kita scroll kebawah.

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 banyak dibahas dan lumayan banyak yang mencari cara melakukannya. 

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  mencoba memasang tombol buka tutup komentar atau tombol show-hide comments ini. 

ternyata memang benar lebih enak saja dilihat dan kita tidak perlu menyembunyikan komentar agar tidak bisa dikomentar karena takut terlalu panjang.

Namun dengan adanya cara lain atau cara khusus yakni Buka Tutup Komentar di Blogger, yakni dari 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.

Klik tombol CTRL + F pada keyboardmu agar mempermudah mencari kode berikut;
 <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 :

HTML CODE

<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. yakni

Tampilkan Komentar
Sembunyikan Komentar

Kemudian carilah kode ]]></b:skin>  sama dengan cara saya berikan diatas yakni menggunakan CRTL + F dan tambahkan script di bawah ini tepat di atasnya ]]></b:skin>

CSS CODE

.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 dan selera kamu masing-masing.

Sedikit informasi
ini kode warna saat mau buka komentar #5593f0
ini kode warna saat mau tutup komentar #acb3b8

Terakhir, masih dalam Edit HTML carilah tag </body> cara mencarinya biasanya tag </body> ini terdapat paling bawah script lebih tepatnya di atas </html>. setelah ketemu tag yang dicari tadi kemudan tambahkan kode dibawah ini tepat diatas </body>

JavaScript CODE

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

"Selamat Mencoba"

Oke mungkin sekian dulu artikel tentang   Cara Membuat Buka Tutup Komentar Pada Template Viomagz, semoga bermanfaat buat teman-teman, terima kasih sudah berkunjung.

See You Again...