Linteksi Berbagi Ilmu dan Informasi
Pada kesempatan ini LinTekSi akan berbagi tips tentang cara 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 agar 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 kode tag di bawah ini. Biasanya terdapat 2 kode tag yang sama.
<div class=’comments’ id=’comments’>
3. Ganti kedua-dua kode tersebut dengan kode 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 kode CSS di bawah ini 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;}
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 contoh hasilnya Anda dapat melihat pada blog ini. Semoga bermanfaat.
Referensi [ARLINA DESIGN
]
]
