Cara Memasang Show And Hide Komentar Blogger dengan Onclick Event
Updated:Daftar Isi [Tampilkan]
Serieswans.com - Pada artikel sebelumnya saya juga sudah membuat artikel mengenai cara membuat show and hide komentar Disqus. tapi sekarang saya akan buat show and hide untuk komentar blogger.
Show anda Hide Komentar merupakan fitur yang berfungsi untuk membuka atau menyembunyikan widget komentar yang ada di situs website atau blog anda.
![]() |
Show And Hide Komentar Blogger |
Dengan adanya penambahan artribut Javascript (Onclick Event) fitur ini akan jauh bekerja dengan baik. tujuan penambahan fungsi tersebut adalah untuk meringankan loading blog pada halaman postingan, khusus blog anda yang sudah banyak komentarnya ini sangat pas supaya meringankan
beban loading blognya.
beban loading blognya.
Untuk cara kerja script ini adalah isi konten komentar ini akan tetap tertutup sebelum anda membuka kolom komentar tersebut dengan menekan tombol show and hide. oke kita langsung saja ke tutorialnya. silahkan simak dan pahami cara di bawah ini/
Cara Memasang Show And Hide Komentar Blogger dengan Onclik Event
- Masuk ke Menu Dashboard Blogger => Pilih Tema => Edit HTML
- Kemudian cari kode <div class='comments' id='comments'> dan kode tersebut biasanya ada 2. silahkan nanti ubah kode keduanya
Gunakan tombol CTRL + F untuk mempermudah mencari kode tersebut
- Jika sudah ketemu, hapus kode tersebut dan ganti dengan kode di bawah ini
<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>
<div class='clear'/>
<div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
<div class='clear'/>
/* Show and Hide Comments */
.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}
- Setelah itu Cari kode </body>
- Kemudian tambahakan kode di bawah ini dan letakan di atas kode tersebut
<script type='text/javascript'>
//<![CDATA[
// Show and Hide Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>
- Terakhir simpan tema atau template
Setiap Template biasanya memiliki struktur data yang berbeda, silahkan anda sesuaikan saja kode di atas.
Nah, itulah tutorial mengenai Cara Memasang Show And Hide Komentar Blogger dengan Onclick Event. jika anda masih belum paham, silahkan tanyakan di kolom komentar di bawah. semoga bermanfaat dan jangan lupa bagikan ke teman-teman ataupun media sosial anda.
Tags
Blogger

Kalo tutorial memunculkan sebagian komentar ada gan?? misal dibuat jadi beberapa halaman
BalasHapusBisa kayaknya gan, soalnya saya belum coba
Hapusbagus bang langsung saya terapkan. tapi maaf bang saya punya masalah, kenapa show dan hidenya di blog saya bersamaan munculnya yaa..
BalasHapusTerimakasih
Bersamaan gimana mas, silahkan WA saja 089663419254 ...kirim foto nya biar saya tau detailnya
Hapusterimakasih bang moho izin saya wa yaaa
HapusSilahkan gan, saya tunggu
HapusBiar cuma muncul di halaman postingan, ga muncul di halaman Navigasi kayak sitemap, contact, dll gimana ya gan?? Sudah saya tambah
BalasHapus......................................................
Tapi tetap tampil dihalaman navigasi
nonaktfikan komentar di menu halamannya
Hapus)
BalasHapus......................................................
(
Ke sensor ga bisa tulis Comen script
BalasHapusTerima kasih tutorialnya. Di beberapa artikel ada yang tidak bisa diklik dan muncul tanda pagar di akhir url. Itu kira2 kenapa yah kak?
BalasHapusmenurut saya kemungkinan kalo muncul tanda pagar di akhir url, ada kesalahan pada template atau memang belum di atur link pada artikel tersebut, biasanya halaman contact, atribut,Home, dll perlu edit di bagian templatenya kak. semoga membantu
Hapus