Cara Membuat Tombol Buka Tutup Komentar di Viomagz

Saat pengunjung mencari informasi dalam blog kita, maka pengunjung tersebut akan mencari artikel yang dia butuhkan. Oleh karena itu kita wajib membuat artikel yang berkualitas agar disukai oleh pengunjung.

Namun dalam kenyataannya meski kita sudah membuat artikel sejelas mungkin, tetap saja ada potensi dimana pembaca kurang merasa puas dan ingin meminta panduan. Oleh karena itu dalam sebuah blog kolom komentar sangat penting agar komunikasi antara penulis dan pembaca menjadi lebih mudah.

Dalam artikel kali ini, saya akan berbagi tutorial cara membuat tombol buka tutup komentar responsif di template viomagz.

Cara Membuat Tombol Buka Tutup Komentar di Viomagz

Ada beberapa langkah yang harus anda lakukan untuk bisa membuat tombol buka tutup di template viomagz.

Buka dashboard blogger.
Pilih tema.
Pilih Edit HTML.

Cari dan letakan kode CSS dibawah ini sebelum kode ]]></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;
  }

Cari kode </body>, lalu simpan kode dibawah ini diatasnya.

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

Cari kode <div class='comments' id='comments'>, dalam template viomagz kode ini terdapat dua. 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'/>
Klik simpan tema dan lihat hasilnya.

Kelebihan Tombol Buka Tutup Komentar di Viomagz
Membungkus semua komentar agar tidak tampil sebelum di klik.
Membuat tampilan menjadi lebih cantik.
Membuat loading blog menjadi lebih cepat.
Sudah otomatis singkron dengan menu dark mode.
Blog menjadi lebih SEO friendly.

Itulah cara membuat tombol buka tutup komentar di template viomagz. 
Semoga bermanfaat.

Max Ikhsan

Hai, Saya adalah pemilik blog ini. Mau Kerja Sama? Hubungi maxikhsan.cs@gmail.com

Cara Membuat Tombol Buka Tutup Komentar di Viomagz

Posting Komentar