Cara Menciptakan Show Comment Dengan Onclick Event Di Blogger/Blogspot

Menyembunyikan tampilan komentar ialah salah satu cara mempersempit tinggi halaman postingan (post page) sehingga halaman tersebut akan lebih cepat dimuat. Cara menciptakan perintah “show comment” ini sanggup dilakukan dengan banyak sekali cara. Salah satunya dengan onclick event.

Pada tutorial blog kali ini, saya akan coba membahas perihal cara menciptakan show comment (tampilkan komentar) dengan trik oncilick event. Cara ini bersama-sama sanggup diterapkan pada komentar apa saja. Baik itu komentar bawaan Blogger, komentar Disqus dan Facebook.

Untuk demo, silahkan lihat melalui tombol berikut ini.

Demo

Tutorial lainnya: Modifikasi Related Post (DTE) Seperti Infoterlengkap.com

Berikut caranya.

Silahkan masuk ke dasbor Blogger, klik Tema > Edit HTML

Temukan  kode berikut ini (bagi pengguna template/tema dari Themeindie.com, untuk template lain silahkan menyesuaikan).

</article>
</b:includable>

Letakkan isyarat berikut ini diantara dua baris isyarat di atas.

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

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

Simpan Tema, dan lihat jadinya dengan membuka salah satu artikel di blog Anda.

Demikian tips perihal cara menciptakan show comment dengan Onclick Event di Blogspot. Semoga membantu dan terima kasih.

Source: https://www.infoterlengkap.com//search?q=noname-premium-blogger-template

Advertisement