2 Cara Memasang Show/Hide Komentar Blogger - Onclick Event

Tutorial: Tips & Trik Cara Membuat, Menampilkan dan Memasang Show/Hide di Komentar Blogger

Yang dimaksud "Show/Hide Komentar Blogger" adalah sebuah fitur yang berfungsi membuka atau menyembunyikan (menutup) widget komentar yang ada di situs web kamu.

Tutorial ini menggunakan Onclick Event, artinya ada penambahan JavaScript (Js) khusus agar fitur ini bekerja dengan baik.

Pic: EXEIdeas

Oh iya, tujuan pemasangan Show/Hide di komentar blogger ini untuk mempercepat loading blog; sayangnya... ada penambahan kode JavaScript (Js) khusus yang bertugas mengaktifkan fitur ini -- yang mana penambahan kode JS ini memperberat kecepatan loading blog.

Untungnya, JavaScript (Js) ini tidak terlalu berat, bahkan terkesan sangat ringan; apabila dibandingkan dengan widget komentar default blogger yang lama termuat (loading).

2 Cara Membuat & Memasang Show/Hide Komentar Blogger - Onclick Event

Sampai ini saat ini, setidaknya ada 2 cara yang bisa kamu implementasikan sebagaimana kondisi template blogger yang kamu gunakan.

Cari kode ini:

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

Ada 3 atau lebih kode yang sama (diatas), yang perlu kamu ubah (ganti) adalah kode yang KEDUA dengan kode 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'/>

Simpan kode CSS di bawah ini, tepat di atas kode ]]></b:skin> atau </style>

/* Show and Hide Comments Blogger */
.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:#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}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

Untuk JavaScript (Js) nya sendiri, silakan Salin (Copy) kode JS di bawah ini, Paste (Tempel) di atas kode </body>

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

Apabila tidak berfungsi, coba simpan JavaScript (Js) di atas, tepat di atas kode </head> kemudian ketuk tombol Save Template.

Jika ternyata tutorial No. 1 di atas gagal diterapkan di template blogger yang kamu gunakan, coba ikuti tutorial No. 2 di bawah ini.

Cari kode di bawah ini:

</article>
</b:includable>

Copy (salin) kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Click to comment */
#hide{display:none}
#buka-komentar,.buka-komentar{margin:25px auto 0;display:block;overflow:hidden;padding:0;position:relative;text-align:center}
#show{margin:0 auto;width:320px;text-align:center;position:relative}
.buka_disqus{display:block;max-width:320px;color:#0b84d8;border-radius:5px;margin:0 auto;cursor:pointer;font-weight:700;text-transform:uppercase;font-size:15px;text-align:center;height:45px;line-height:45px;border:1px solid #0b84d8}
.buka_disqus:hover{background:#0b84d8;color:#fff;}
</style>
<div class='buka-komentar' id='buka-komentar'>
<div id='show'><span class='buka_disqus' href='javascript:void(0)' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;none&apos;'>click to comment</span></div><div id='hide'><span class='tutup_disqus' href='javascript:void(0)' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;block&apos;'/>
  <b:include data='post' name='comments'/>
</div>
</div>
</b:if>

Pasang di antara kedua kode yang kamu temukan tadi, dengan hasil sebagai berikut:

</article>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Click to comment */
#hide{display:none}
#buka-komentar,.buka-komentar{margin:25px auto 0;display:block;overflow:hidden;padding:0;position:relative;text-align:center}
#show{margin:0 auto;width:320px;text-align:center;position:relative}
.buka_disqus{display:block;max-width:320px;color:#0b84d8;border-radius:5px;margin:0 auto;cursor:pointer;font-weight:700;text-transform:uppercase;font-size:15px;text-align:center;height:45px;line-height:45px;border:1px solid #0b84d8}
.buka_disqus:hover{background:#0b84d8;color:#fff;}
</style>
<div class='buka-komentar' id='buka-komentar'>
<div id='show'><span class='buka_disqus' href='javascript:void(0)' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;none&apos;'>click to comment</span></div><div id='hide'><span class='tutup_disqus' href='javascript:void(0)' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;block&apos;'/>
  <b:include data='post' name='comments'/>
</div>
</div>
</b:if>
</b:includable>

Ketuk tombol Simpan Template, dan lihat hasilnya.

Nah itu dia tutorial cara membuat dan memasang fitur Show/Hide di widget kolom komentar blogger/blogspot.

Source:
http://www.contohblog.com/2018/05/cara-menyembunyikan-kotak-komentar.html / https://www.arlinadzgn.com/2015/10/show.and.hide.comments.blogger.dengan.onclick.event.html / https://introducing-broker.blogspot.com/2015/10/blogger-comments-show-hide-with-onclick.html / https://www.bungfrangki.com/2017/03/membuat-show-comment-dengan-onclick-event.html

Labels: Tutorial Blogger

Thanks for reading 2 Cara Memasang Show/Hide Komentar Blogger - Onclick Event. Please share this article.

Share this post