Menambahkan Show/Hide Comments Blogger dengan Onclick Event
Menambahkan Show/Hide Comments Blogger dengan Onclick Event

Blog Ardhana - Hallo Sobat Bocahpedia, pada kesempatan kali ini saya akan memberikan tutorial mengenai cara Menambahkan Show/Hide Comments Blogger dengan Onclick Event. Tujuan menambahkan fungsi ini adalah untuk meringankan loading (onload) blog pada halaman posting jika postingan di blog kamu sudah cukup banyak komentar didalamnya.

Cara kerja dari fungsi ini sangat sederhana, konten komentar akan tetap tertutup sebelum kamu membuka area komentar dengan menekan tombol Hide atau Show yang akan saya terangkan ini.

Mari kita simak caranya berikut ini:

1. Buka Blogger> Template editor> Cari markup komentar di bawah ini

<div class='comments' id='comments'>
Catatan: Biasanya ada dua markup seperti di atas. 
Ganti (Kedua) kode di atas 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'/>

2. Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>


/* 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;}

3. Tambahkan kode di bawah ini sebelum </body>

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

4. Terakhir simpan template kamu dan lihat hasilnya

Demikian tutorial mengenai cara Menambahkan Show/Hide Comments Blogger dengan Onclick Event, semoga bermanfaat dan jangan lupa beri komentar yang membangun agar kedepannya blog Bocahpedia menjadi lebih baik.

Related Posts

Load comments

Comments