Menyembunyikan Kolom Komentar Blogger

Pada kesempatan ini serhamo akan berbagi tips perihal Tutorial menambahkan fungsi show and hide kolom komentar blogger dengan memanfaatkan atribut onclick event. Fungsi show and hide ini berfungsi untuk menampilkan dan menyembunyikan kolom komentar blogger Anda biar loading blog menjadi lebih cepat.

Cara kerja dari script ini cukup sederhana yaitu kolom komentar akan tetap tertutup sebelum Anda membuka kolom komentar dengan menekan tombol show and hide. langsung saja berikut langkah-langkahnya:

1. Buka template editor blogger Anda melalui Template / Edit HTML.

2. Cari aba-aba tag di bawah ini. Biasanya terdapat 2 instruksi tag yang sama.

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

3. Ganti kedua-dua kode tersebut dengan instruksi tag 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'/>

4. Tambahkan isyarat CSS di bawah ini sebelum tag ]]></b:skin> atau </style>

/* Show and Hide Comments */

.hide-contentdisplay:none;margin:0;padding:0;

a.showcontent,#comments a.hiddencontentdisplay: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:hoverbackground:#fff;color:#5593f0;

#comments a.hiddencontent:hoverbackground:#acb3b8;color:#fff;

5. Tambahkan kode Javascript di bawah 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>

Terakhir simpan template Anda. Sebagai teladan balasannya Anda dapat melihat pada blog ini. Semoga bermanfaat.

Referensi [ARLINA DESIGN]