Cara Membuat Show and Hide Comments dengan Onclick Event di Blogger

Pekanan.com- Cara Membuat Show and Hide Comments dengan Onclick Event di Blogger | Pada kesempatan kali ini saya akan mencoba untuk memberikan tutorial cara menyembunyikan kotak atau kolom komentar dan menampilkannya ketika diklik.

Cara ini tentu sangat efektif untuk mempercepat loading blog, karena kolom komentar tidak langsung diload bersamaan dengan halaman postingan, show and hide comment juga sangat bermanfaat untuk mempercantik tampilan sistem komentar pada sebuah blog.

lalu bagaiaman Cara Untuk Membuat Show and Hide Comments dengan Onclick Event di Blogger? ikuti langkah-langkahnya berikut ini, semoga bermanfaat.

Cara Membuat Show and Hide Comments dengan Onclick Event di Blogger

1. Pertama silahkan masuk ke blogger> Edit HTML
2. Kemudian temuan kode dibawah ini,silahkan sesuaikan dengan template masing-masing

</article>
</b:includable>
 

3. Lalu letakan kode dibawah ini diantara dua kode diatas

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

Kira-kira hasilnya seperti dibawah ini

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

Setelah itu silahkan save template sobat dan lihat hasilnya, maka sistem komentar blog sobat akan ada fitur show and hidenya, dan ini akan mempercepta loading blog sobat.


Demikinan Cara Membuat Show and Hide Comments dengan Onclick Event di Blogger semoga bermanfaat, jika masih ada yang belum jelas, silahkan tanyakan pada kolom komentar, atau bisa kirim email pada kota pesan yang sudah disediakan.

Subscribe to receive free email updates: