Cara Membuat Tombol Buka Tutup Komentar pada Blog

Cara Membuat Tombol Buka Tutup Komentar - Kali ini saya akan mencoba memberikan tutorial tentang blogging yaitu tentang bagaimana cara membuat tombol yang dapat membuka dan menutup kolom komentar pada blog. tutorial kali ini fungsinya cukup menguntungkan, Karena dapat mempercantik tampilan blog sobat dan tidak berantakan  serta pastinya blog sobat tidak kelihatan panjang ke bawah.

Cara ini juga biasa di sebut show and hide comments yang artinya buka dan tutup komentar, Sedangkan cara pembuatannya tidak begitu sulit, kita hanya perlu menambah kode CSS dan Javascript pada template blog kita. Mari di simak

Cara Membuat Tombol Buka Tutup Komentar Pada Blog

1. Masuk ke Blogger.com
2. Masuk ke menu "Tema"
3. Lalu pilih "Edit HTML"
4. Cari kode script komentar "<div class='comments' id='comments'>" biasanya terdapat 2 script. lalu sobat ganti semua 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'/>

5. Sobat Tambahkan kode CSS di bawah ini di atas kode "]]></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:#555;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#555;transition:all .3s}
a.showcontent:hover{background:#fff;color:#555;}
#comments a.hiddencontent:hover{background:#555;color:#fff;}

6. Terakhir sobat tambahkan kode Javascript di bawah ini di atas kode "</body>" pada template blog sobat.

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

7. Finish

Demikian lah Cara Membuat Tombol Buka Tutup Komentar Blogger menggunakan CSS dan Javascript ini saya buat, Semoga bisa dan lancar pada blog sobat, Sobat juga bisa mengubah tampilan tombolnya dengan mengedit kode CSS di atas (bagi yang mahir).

Semoga sukses.

Dadang Kurnia

Hanya seorang Nubie, Memulai blog Sebagai Hobby.

Share this post