Cara Menciptakan Show & Hidden Komentar Blogger Dan Disqus

Cara Pasang Show & Hidden Komentar Blogger dan Disqus

Dikenal dengan istilah Onclick Event, yakni sebuah atribut yang bertugas menampilkan (show) dan menutup (hidden) widget komentar blog.

Bisa disqus, maupun komentar blogger blogspot. Kalau untuk komentar Facebook, aku belum tahu, belum mencoba.

Selain itu, tujuan pemasangan atribut Onclick Event ini yaitu mempercepat loading blog. Apalagi widget komentar Disqus, tentu sangat berat.

Belum lagi jikalau di salah satu postingan blog ada banyak komentar sampai puluhan, apalagi ratusan, tentunya menambah beban Loading blog di kala itu.

Cara Membuat Show & Hidden Komentar Blogger dan Disqus

Cari instruksi ini:

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

Ganti instruksi di atas dengan instruksi di bawah ini:

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>
<div class='clear'/>
<div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
<div class='clear'/>

Tambahkan instruksi di bawah ini, sempurna di atas </style> atau ]]></b:skin> :

.hide-content{display:none;margin:0;padding:0;}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}
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}

Copy instruksi di bawah ini, Paste di atas </body> :

<script type='text/javascript'>
//<![CDATA[
// Hide and Show 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>

Selanjutnya silahkan simpan perubahan template blogger. Fix! Selesai.

Note: Apabila Anda menemukan 2 buah kode <div class='comments' id='comments'> ini di dalam template, maka kedua-duanya harus di eksekusi.

Itulah cara menciptakan dan memasang Onclick Event komentar Blogger dan Disqus, sekaligus dokumentasi untuk kepentingan pribadi.

Source:

https://www.w3schools.com/jsref/event_onclick.asp
https://www.w3schools.com/tags/ev_onclick.asp
https://super-sip.blogspot.com//search?q=show.and.hide.comments.blogger.dengan.onclick.event