Cara Membuat 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, saya belum tahu, belum mencoba.

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

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

Cara Membuat Show & Hidden Komentar Blogger dan Disqus

Cari kode ini:

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

Ganti kode di atas dengan kode 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 kode di bawah ini, tepat 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 kode 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 membuat 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://www.arlinadzgn.com/2015/10/show.and.hide.comments.blogger.dengan.onclick.event.html