Cara Membuat Tombol Komentar Menjadi Show Hide Comment di Viomagz

Cara Membuat Tombol Komentar Menjadi Show hide Comment di Viomagz - Banyak banget yang request ke saya tolong buatkan tombol show hide komentar di Template Viomagz. Kali ini saya buatkan tutorialnya dan mudah-mudahan kalian paham dengan tutorial saya. Kata orang lain yang menggunakan tombol show hide ini katanya bisa mempercepat loading blog?, bisa jadi karena semua komentar yang bertumpuk di postingan artikel bisa disembunyikan. Langsung saja ke tutorialnya.

Cara Membuat Tombol Komentar Menjadi Show Hide Comment di Viomagz

1. Pertama Buka Tema dan Edit HTML.

2. Tekan Ctrl + F lalu cari kode <div class='comments' id='comments'>.

Biasanya ada dua dan ganti kode tersebut dengan kode dibawah ini.

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

3. Tambahkan kode CSS dibawah ini diatas ]]></b:skin>.

/* Show and Hide Comments */
.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:teal;
  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:teal;
  }
#comments a.hiddencontent:hover{
  background:#008080;
  color:#fff;
  }

Jika Anda ingin merubah warna nya bisa ganti kode HEX #008080 dengan warna kesukaan Anda.

4. Terakhir copy kode dibawah ini diatas </body>.

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

5. Tekan Save setelah itu lihat hasilnya.