Cara Membuat Show Comment dengan Onclick Event di Blogger/Blogspot

bungfrangki Tutorial Blog Cara Membuat Show Comment dengan Onclick Event di Blogger/Blogspot

Menyembunyikan tampilan komentar adalah salah satu cara mempersempit tinggi halaman postingan (post page) sehingga halaman tersebut akan lebih cepat dimuat. Cara membuat perintah “show comment” ini dapat dilakukan dengan berbagai cara. Salah satunya dengan onclick event.

Pada tutorial blog kali ini, saya akan coba membahas tentang cara membuat show comment (tampilkan komentar) dengan trik oncilick event. Cara ini sebetulnya dapat 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 Bung Frangki

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 kode berikut ini diantara dua baris kode di atas.

<b:if cond='data:blog.pageType == "item"'>
<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('comments').style.display='block';document.getElementById('hide').style.display='block';document.getElementById('show').style.display='none''>click to comment</span></div><div id='hide'><span class='tutup_disqus' href='javascript:void(0)' onclick='document.getElementById('comments').style.display='none';document.getElementById('show').style.display='block''/>
<b:include data='post' name='comments'/>
</div>
</div>
</b:if>

Menjadi seperti ini.

</article>
<b:if cond='data:blog.pageType == "item"'>
<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('comments').style.display='block';document.getElementById('hide').style.display='block';document.getElementById('show').style.display='none''>click to comment</span></div><div id='hide'><span class='tutup_disqus' href='javascript:void(0)' onclick='document.getElementById('comments').style.display='none';document.getElementById('show').style.display='block''/>
<b:include data='post' name='comments'/>
</div>
</div>
</b:if>
</b:includable>

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

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

Source: http://blog.kangismet.net/2013/09/menampilkan-dan-menyembunyikan-objek-dengan-onclick-event.html