Cara Membuat Tombol Show/ Hide Pada Komentar Blog

Santos el Salam

31 Oktober 2020

Blog yang memiliki banyak komentar (tentu yang baik/ bukan spam) merupakan salah satu indikator bahwa blog tersebut disukai oleh pembacanya karena mungkin sering memberikan info-info penting dan bermanfaat. Selain itu, adanya komentar juga bisa menjadi pemberi solusi bagi pengunjung, karena tidak jarang dari percakapan isi komentar, mereka mendapat jawaban penting terkait isi postingan yang kadang masih butuh penjelasan. 

Namun jika komentar sudah terlalu banyak, ada baiknya kolom komentar dibuat menjadi bisa membuka dan menutup agar tampilan blog tetap rapi dan sedap dipandang. Mungkin anda pernah menjumpai fitur seperti ini di beberapa blog, dimana awalnya tampilan komentar tidak muncul karena disembunyikan. Namun begitu tombol buka komentar diklik, maka tampilan komentar baru akan muncul.

Fungsi seperti ini sebetulnya memiliki nilai positif bagi sebuah blog. Selain untuk menghemat ruang sehingga tampilan blog menjadi rapi, loading blog juga akan menjadi lebih ringan ketika komentar disembunyikan terlebih dulu. Terserah pengunjung mau membaca komentar atau tidak. Jika tertarik membacanya maka ia tinggal membukanya, tapi jika tidak tertarik maka ia juga bisa mengabaikannya.

Berkenaan dengan itu, pada kesempatan kali ini saya hendak berbagi tutorial kepada anda sekalian tentang cara membuat tombol show/ hide pada komentar Blog. Bagaimana caranya?. Simak langkah-langkah di bawah ini. 

Cara Membuat Tombol Buka/ Sembunyikan Pada Komentar Blogger

1. Buka akun blogger anda.

2. Pilih menu thema dan klik edit html.

3. Cari kode ]]></b:skin> atau </style>, kemudian letakkan kode berikut ini di atasnya.

.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:#48d;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:#48d;} #comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

4. Selanjutnya cari kode berikut ini:

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

Kalau sudah ketemu, ganti kode tersebut 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'/>

5. Terakhir cari kode </body> dan letakkan kode berikut ini di atasnya.

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

6. Simpan kembali template anda dan lihat hasilnya.

Demikianlah Tutorial tentang Cara Membuat Kotak Komentar Blogger menjadi Show/ Hide. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Membuat Tombol Show/ Hide Pada Komentar Blog. Please share...!

Facebook

Twitter