Buat Buka Tutup Komentar di Template Viomagz

Pada hari ini saya akan membuat sebuah tutorial cara pasang buka tutup komentar, buka tutup komentar ini sangat berguna jika blog kita banyak komentar karena akan terlihat lebih rapi tidak berantakan dengan komentar.

Tuorial ini saya sarankan untuk template berjenis viomagz atau viomagz redesing, untuk template lain saya tidak pernah mencobanya. Jika kalian menggunakan template lain tidak ada salahnya mencoba tutorial ini dan siapa tau berhasil.

Cara Pasang Buka Tutup Kometar

Buat kalian yang sudah tidak sabar langsung saja simak artikel ini sampai habis. Jika kalian menggunakan template berjenis viomagz langsung saja masuk ke Blogger kemudian pergi ke Edit HTML dan cari kode ini.

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

Kalian akan menemukan dua buah kode tersebut, kemudian ganti kedua kode tersebut dengan kode 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'/>

Yang bertandakan biru kalian bisa ganti dengan kata kata sendiri
Selanjutnya cari kode ]]></b:skin> dan pastekan kode berikut 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;}

Kalian juga bisa mengganti warna button buka tutup komentar code agar sesuai dengan blog kalian.
Yang terakhir cari kode </body> dan tambahkan Javascript dibawah ini tepat diatas kode </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 Simpan Tema dan lihat hasilnya.
Untuk demonya kalian bisa melihat buka tutup komentar punya saya di bawah ini, untuk hal yang belum jelas silahkan bertanya dengan senang hati saya membantu.

Bagikan Artikel ini