Cara Mudah Membuat Tombol Buka Tutup Komentar dengan Mudah

Assalamu’alaikum Warahmatullahi Wabarakaatuh.

mastagul.com - 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.

mastagul.com

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 mastagul.com ini. 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 mastagul.com menggunakan template viomagz buatan dari mas sugeng. berikut langkah-langkah pembuatanya:

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

Langkah 2: 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.


Langkah 3: Masukan kode dibawah kedalam kotak pencarian ( didalam kotak merah pada gambar di atas) kemudian Enter.
<div class='comments' id='comments'>

Langkah 4: 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.
Langkah 5:  Masukan kode dibawah pada kotak pencarian ( langkahnya sama seperti langkah 3, akan tetapi kodenya yang berbeda).
   ]]></b:skin> 

Langkah 6: 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.
Langkah 7: Masih seperti langkah 3, masukan kode di bawah kekotak pencarian kemudaian 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.

Assalamu’alaikum Warahmatullahi Wabarakaatuh.




Tutorial Blog


Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Cara Mudah Membuat Tombol Buka Tutup Komentar dengan Mudah"

Posting Komentar

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar bersifat iklan, spam, titip link Semua akan dihapus oleh admin

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel