Cara Membuat Komentar Jadi Show/Hide Template Viomagz

Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Tombol Show / Hide Komentar di Blogger yaitu sebuah tombol yang dapat membuka dan menutup kolom komentar pada Blogger. Tombol buka tutup komentar ini memiliki banyak fungsinya, diantaranya adalah memperindah tampilan blog kamu, membuat blog kamu menjadi lebih profesional, meringakan loading blog, dan Juga keliatan rapi tidak berantakan.
Langsung saja ke tutorialnya

Cara membuat tombol komentar menjadi show hide :

1. Pertama Buka Tema dan Edit HTML.
2. Tekan Ctrl + F lalu cari kode <div class='comments' id='comments'>.

Biasanya ada 2 kode tersebut ,ganti dengan kode di bawah 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:#1abc9c;

  color:#fff;

  }

Jika ingin merubah warna ,ganti #1abc9c dengan warna kesukaan kalian

 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. Save dan lihat hasilnya.