Sebenarnya tutorial ini dapat digunakan untuk segala jenis template tapi tentu saja kalian harus menyesuaikan posisi dan letak koding yang telah ada sebelumnya lalu mengganti atau menambahkan koding yang saya berikan.
Sebagai seorang pemilik situs blog yang memiliki jumlah pengunjung yang cukup banyak, tentu kita akan banyak mendapatkan komentar dari para pengunjung dan pembaca blog kita. Jika yang komen hanya sedikit tentu bukan suatu masalah.
Tapi bagaimana jika postingan artikel kamu dikomen ratusan bahkan ribuan orang? Tentu postingan halaman blog akan menjadi sangat panjang dan tidak nyaman untuk dilihat.
Buka tutup komentar atau show and hide comments box pada blogger yaitu berbentuk suatu tombol atau buton yang sebenarnya memiliki dua fungsi yaitu untuk menyembunyikan dan menampilkan kolom komentar pada blog, agar suatu postingan tampak rapih dan elegan dan tidak terlalu jauh saat kita scroll kebawah.
Jadi Jika tombol ini diklik maka akan menampilkan seluruh komentar. Begitu juga sebaliknya, jika tombol tutup diklik maka komentar akan disembunyikan secara otomatis.
Tampilan dari tombol buka tutup komentar atau show and hide comments box pada blogger ini juga responsif. Terbukti dari tampilannya yang bisa mengikuti beragam ukuran layar mulai dari layar HP, tablet, dan desktop.
Cara Mudah Membuat Buka Dan Tutup Komentar Pada Template Blogger Viomagz
1. Bukalah Dashboard Blogger kamu lalu masuk ke menu Theme - Edit HTML.
2. Klik tombol CTRL + F pada keyboardmu agar mempermudah mencari kode berikut;
3. Kamu akan menemukan 2 buah kode yang sama dalam template VioMagz. Ganti kedua kode di atas dengan script di bawah ini :
HTML CODE
4. Kamu bisa mengganti teks atau tulisan pada tombol nantinya dengan mengubah bagian yang saya tandai. yakni Tampilkan Komentar dan Sembunyikan Komentar
5. 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
6. Kamu juga bisa mengubah warna tulisan maupun warna tombol pada script di atas. Silahkan modifikasi sesuai keinginan dan selera kamu masing-masing. ini kode warna saat buka komentar #5593f0 dan ini kode warna saat tutup komentar #acb3b8
7. 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
8. Kemudian klik tombol Simpan dan lihat hasilnya.
<div class='comments' id='comments'>3. 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'/>
4. Kamu bisa mengganti teks atau tulisan pada tombol nantinya dengan mengubah bagian yang saya tandai. yakni Tampilkan Komentar dan Sembunyikan Komentar
5. 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;}
6. Kamu juga bisa mengubah warna tulisan maupun warna tombol pada script di atas. Silahkan modifikasi sesuai keinginan dan selera kamu masing-masing. ini kode warna saat buka komentar #5593f0 dan ini kode warna saat tutup komentar #acb3b8
7. 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>
8. Kemudian klik tombol Simpan dan lihat hasilnya.
Saya juga sudah menerapkan tombol buka tutup komentar atau show and hide comments box pada blog saya. Sehingga kolom komentar pada postingan blog tampak lebih rapih dan elegan dan tidak terlalu jauh saat kita scroll kebawah.
Oke mungkin sekian dulu artikel tentang Cara Mudah Membuat Buka Dan Tutup Komentar atau Show And Hide Comments Box Pada Template Blogger Viomagz. Semoga informasinya bermanfaat dan sampai jumpa pada tutorial selanjutnya.