Membuat Komentar Show Hide Pada Blogger

Kali ini saya akan membahas tentang cara pembuatan Komentar Blogger Menjadi Show Hide. Dalam postingan / artikel pada blog / website pastinya paling bawah ada kolom komentar bila banyak komentar artinya akan membuat postingan artikel kita panjang ke bawah.

Penjelasan dari Komentar Blogger Show Hide adalah bila komnetar di klik maka kolom komentar akan muncul dan kalian bisa menulis komnetar.


Komentar Blogger Show Hide sudah responsive tapilan enak dipandang dan nyaman sudah suport dengan SEO jadi tidak membebani blog / website. Dalam pemasangan Komentar Blogger Show Hide kita membutuhkan 2 kode sebagi berikut :
  • Memasang kode CSS (style).
  • Memasang kode HTML / Javas Script.

Dengan adanya dua poin itu maka tampilan komentar akan mejadi responsive yang di sukai oleh pihal google, Oky langsung saja kepanduanya.

Langkah - langkah Komentar Blogger Menjadi Show Hide :
  • Masuk blogger => Dasbor =>Tema =>Edit.
  • Cari kode <div class='comments' id='comments'> dan ganti dengan kode dibawah ini. Biasanya ada dua kode ganti semua.
<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'/>

  • Cari kode ]]></b:skin> lalau letakan kode dibawah ini di atasnya.
/* Show and Hide Comments */
.hide-content{ font-family: Poppins,sans-serif ;font-weight:500;display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{font-family: Poppins,sans-serif ;display:block;text-decoration:none;position:relative;color:#fff;font-weight:500;font-size:15px;padding:12.5px 0;background:#f24a4a;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#f24a4a;color:#fff;transition:all .3s}
a.showcontent:hover{background:#fb5656;color:#fff;}
#comments a.hiddencontent:hover{background:#f24a4a;color:#fff;}

  • Cari kode </body> lalau letakan kode dibawah 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>

Nah sekarang kalian sudah bisa membuat Komentar Blogger Menjadi Show Hide di blogger. Semoga panduan yang saya bagikan ini bisa bermanfaat dan bisa menjadi refrensi sebelum mebuatnya. Jangan lupa bagikan ilmu ini agar bisa bermanfaat buat yang lain.
Posting Komentar (0)
Lebih baru Lebih lama