Cara Mudah Membuat Tombol Buka Tutup Komentar dengan Mudah

Cara Mudah Membuat Tombol Buka Tutup Komentar

Cara Mudah Membuat Tombol Buka Tutup Komentar dengan Mudah. Ternyata sebuah widget komentar memiliki pengaruh yang besar pada sebuah blog.

Selain memiliki fungsi sebagai komunikasi, dengan adanya widget komentar juga bisa meningkatkan performa pada sebuah blog.

Blog yang memiliki Widget komentar secara tidak langsung mempersilahkan pengunjung untuk berkomunikasi dengan sang pemilik blog untuk membahas atau berdiskusi seputar artikel yang mereka baca. semakin ramai pengunjung blog yang berkomentar itu bisa membawa artikel menuju ke page one search google.

Komentar yang membeludak itu juga bisa menjadi masalah baru bagi sang pemilik blog, karena akan memiliki tampilan yang kurang enak di pandang mata.

Mungkin jika komentarnya masih sedikit tampilanya masih enak di pandang, akan tetapi jika komentarnya sudah ratusah itu membuat halaman blog sobat akan menjadi sangat panjang dan kurang sedap untuk di lihat.

Terus bagaimana solusinya,,,,?

Cara Merapikan Komentar yang Over Load

Sebenarnya solusinya sangat sederhana, sobat bisa memasang tombol buka tutup komentar yang lebih populer biasanya orang menyebutnya dengan show and hide comment box.

Cara kerjanya sederhana ketika buka komentar, maka secara otomatis akan menampilkan seluruh komentar yang ada. Ketika tutup komentar maka semua komentar yang ada akan di sembunyikan.

Sobat bisa melihat demonya langsung di blog mastagulini. Jika di scrol kebawah sobat akan melihat tombol biru yang bertuliskan "Tampilkan Komentar".

Cara memasang dan menampilkan tombol buka tutup komentar

Untuk langkah-langkahnya sebenarnya sangat sederhana, utnuk saat ini blog mastagulmenggunakan template viomagz buatan dari mas sugeng. berikut langkah-langkah pembuatanya:

1. Buka Tema Blog

Sobat masuk ke Dashboard kemudian Klik pada Tema setelah itu Klik dibagian Edit HTML.

2. Seart HTML

Setelah masuk ke tampilan Edite HTML, sobat klik sembarang dibagian coding kemudian tekan tombol Ctrl + F pada keyboard. Nanti akan muncul kotak pencarian seprti pada gambar dibawah.

Cara Mudah Membuat Tombol Buka Tutup Komentar

3. Cari HTMLcomments

Masukan kode dibawah kedalam kotak pencarian ( didalam kotak merah pada gambar di atas) kemudian Enter.

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

4. Ganti Kode HTML

Jika sobat mengunakan template viomagz, sobat akan menemukan 2 kode yang sama. Ganti kedua kode diatas dengan menggunakan kode dibawah 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'/>

Note:

Ganti teks "Tamilkan Komentar" dan "Sembunyikan Komentar" sesuai dengan keinginan sobat.

5. Cari Kode]]></b:skin>

Masukan kode dibawah pada kotak pencarian ( langkahnya sama seperti langkah 3, akan tetapi kodenya yang berbeda).

   ]]></b:skin>

6.Masukan Kode Script

Setelah kode di langkah 5 ditemukan, silahkan tambahkan kode script di bawah ini tepat diatasnya.

 
.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;}

Note:

#5593f0 merupakan kode warna yang digunakan pada tampilan Buka Komentar.

#acb3b8 merupakan kode warna yang digunakan pada tampilan Tutup Komentar.

7. Cari Kode </body>

Masih seperti langkah 3, masukan kode di bawah ke kotak pencarian kemudian Enter

 </body>

Setelah kode diatas ditemukan, tambahkan kode script dibawah ini tepat berada diatasnya.

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

Proses penambahan kode script sudah selesai, kemudian Klik Simpan. kemudian lihat hasilnya.

Itulah langkah-langkah untuk membuat widget buka tutup komentar. Semoga artikel ini bisa membantu sobat.

Cek Berita dan Artikel yang lain di Google News.