Cara Menciptakan Show And Hide Comments Dengan Onclick Event Di Blogger

Tuesday, February 17, 2015

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

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

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

Cara Membuat Show and Hide Comments dengan Onclick Event di Blogger


1. Pertama silahkan masuk ke blogger> Edit HTML
2. Kemudian temuan aba-aba dibawah ini,silahkan sesuaikan dengan template masing-masing
 </article> </b:includable>  

3. Lalu letakan aba-aba dibawah ini diantara dua aba-aba 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 jadinya menyerupai 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 sahabat dan lihat hasilnya, maka sistem komentar blog sahabat 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 agar bermanfaat, jikalau masih ada yang belum jelas, silahkan tanyakan pada kolom komentar, atau dapat kirim email pada kota pesan yang sudah disediakan.
Sumber https://www.pekanan.com/