Cara Memasang Show And Hide Komentar Blogger dengan Onclick Event

By Kurniawan Updated: 2020-09-20T10:43:37Z 12 ·

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.

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

• Selanjutnya cari kode ]]></b:skin> atau </style>
• Lalu tambahkan kode di bawah tepat di atas kode tersebut

/* 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.

SHARE Facebook Whatsapp