Menambahkan Show And Hide Comments Blogger Dengan Onclick Event

Menambahkan Show and Hide Comments Blogger dengan Onclick Event - Kembali lagi membuatkan tutorial blog sehabis kemarin membahas wacana Cara Memasang Iklan Melayang Responsive dengan Tombol Close. Kali ini akan membuatkan wacana cara menambahkan fungsi show and hide ke dalam area komentar blogger dengan memanfaatkan atribut onclick event.

Tujuan menambahkan fungsi ini ialah untuk meringankan loading (onload) blog di halaman posting jikalau di postingan blog teman sudah terdapat banyak komentar didalamnya. Cara kerja dari script ini cukup sederhana ialah konten komentar akan tetap tertutup sebelum teman membuka area komentar dengan menekan tombol show and hide yang akan aku bagikan ini.

Mari kita simak caranya sebagai berikut :

Show and Hide Comments Blogger dengan Onclick Event

1. Buka Blogger > Template editor > Cari markup komentar ini :

<div class='comments' id='comments'>

Catatan : Biasanya terdapat dua markup menyerupai di atas

Ganti (kedua) instruksi di atas dengan instruksi 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 instruksi 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 instruksi 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.

Demikian tutorial sederhana wacana cara Menambahkan Show and Hide Comments Blogger dengan Onclick Event. Jika ada kesulitan silakan tanyakan lewat kolom komentar, terima kasih.

Tweet

Subscribe to receive free email updates: