Menambah Tombol Show and Hide Comments Blogger

Menambah Tombol Show and Hide Comments Blogger - Halo, apa kabar sobat blogger? senang rasanya pada kesempatan kali ini saya kembali bisa berbagi tutorial blog untuk sobat semua. Setelah pada postingan yang lalu saya juga membagikan tentang Memasang jQuery Efek Zoom Gambar bisa Bergeser.

Pada kesempatan kali ini saya akan berbagi tips mengenai Cara Menambah Tombol Show and Hide Comments Blogger dengan memanfaatkan atribut OnClick Event. Tutorial kali ini saya kutip dari situs Arlina Design.

Tujuan dan manfaat dari Menambah Tombol Show and Hide Comments Blogger ini yaitu untuk meringankan loading page postingan kita, terlebih jika postingan kita tersebut telah memiliki banyak komentar didalamnya.

Cara kerja dari script ini sebetulnya cukup sederhana, yaitu konten komentar akan tetap tertutup sebelum sobat membuka area komentar dengan menekan tombol show and hide yang disediakan.

Berikut Cara Menambah Tombol Show and Hide Comments Blogger:

1. Masuk ke bagian template > edit html > lalu cari kode berikut

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

Catatan: biasanya terdapat dua markup seperti diatas.

Ganti (kedua) kode diatas dengan kode dibawah 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. Kemudian tambahkan kode css berikut sebelum tag ]]></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. Terakhir tambahkan kode dibawah ini sebelum tag </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. Simpan template.

Bagaimana?
Cukup mudah bukan Cara Menambahkan Tombol Show and Hide Comments Blogger, untuk warna tombol show and hide-nya sobat bisa sesuaikan dengan warna template sobat. Selamat mencobat..

Sumber: Arlina Design