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.
Cara Membuat Show Comment dengan Onclick Event di Blogger/Blogspot
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.


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 == &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 seperti 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 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
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Komentar telah ditutup dan disembunyikan. Jika ada yang perlu disampaikan silahkan kirim pesan lewat laman kontak.