Kali ini saya ingin membagikan cara membuat dan memasang tombol toggle show/hide untuk komentar di blogger. Toggle ini sendiri berfungsi untuk menyembunyikan komentar di blogger, dan hanya akan muncul ketika toggle ditekan.
Mungkin jarang ada yang memakai toggle komentar ini, tetapi menurut saya toggle ini lumayan penting, terutama untuk masalah kenyamanan pengunjung blog anda yang mengakses melalui handphone.
Mengapa penting?
Misal begini, anda mempunyai post yang berada di Page One dan banyak visitor organik datang dari post itu. Tentu post tersebut memiliki banyak komentar, bahkan sampai 50+. Ketika pengunjung ingin berkomentar, maka ia harus banyak menscroll, dikarenakan banyaknya komentar yang muncul sebelum sampai ke kotak untuk berkomentar.
Nah, tujuan dari toggle ini untuk mempersingkat waktu bagi pengunjung agar bisa berkomentar di blog tanpa harus jauh-jauh scroll kebawah. Bila ia ngin melihat komentar-komentar yang ada, maka hanya perlu menekan tombol.
Hal ini juga pernah saya rasakan ketika ingin berkomentar di Blog Mas Sugeng. Disana terdapat 200 lebih komentar, sehingga saya harus menscroll sebanyak banyaknya kebawah sampai ke footer.
Oh iya, toggle ini pure CSS, artinya anda tidak memerlukan jQuery atau semacamnya agar toggle dapat bekerja, dan karena Pure CSS, toggle ini sangatlah ringan dan tidak memberikan dampak apapun terhadap speed blog anda.
Langsung saja, berikut cara membuatnya.
Toggle Show/Hide untuk Komentar Blogger
Seperti biasa, pertama silakan anda buka blogger.com, Tema, Edit HTML
Sekarang, silakan masukkan kode ini.
<span class='toggle-comment-jarwo'>
<span id='show-comment'>
<a href='javascript:void(0)' onclick='document.getElementById('comment_block').style.display='inline-block';document.getElementById('hide-comment').style.display='inline-block';document.getElementById('show-comment').style.display='none'' title='Show Comments'>Perlihatkan Semua Komentar</a>
</span>
<span id='hide-comment'>
<a href='javascript:void(0)' onclick='document.getElementById('comment_block').style.display='none';document.getElementById('hide-comment').style.display='none';document.getElementById('show-comment').style.display='inline-block'' title='Hide Comments'>Tutup Semua Komentar</a>
</span>
</span>
<style>
#hide-comment,#comment_block{display:none;}#comment_block{width:100%}
</style>
Ganti tulisan yang saya mark kuning dengan kata-kata yang anda inginkan.
Simpan dimanapun yang anda inginkan, entah dibawah post atau diatas kolom komentar.
Untuk yang ingin memasangnya dibawah post/artikel, silakan tempatkan dibawah kode:
<data:post.body/>
Atau bila ingin memasangnya diatas kolom komentar, silakan tempatkan kode diatas:
<div id='comment_block'
Atau yang mirip.
Bila anda ingin menstylenya mirip seperti yang saya pakai, silakan masukkan kode berikut tepat dibawah kode <body
<style>
.toggle-comment-jarwo a {
display: inline-block;
background: #CF9271;
padding: 15px;
margin: 10px;
}
</style>
Sekarang simpan template anda dan lihat hasilnya. Bila kode diatas tidak work, itu berarti kode ID blok komentar milik anda berbeda dengan saya. Untuk melihatnya anda bisa menginspect, atau tanyakan ke saya melalui kolom komentar dibawah ini beserta link blognya.