Cara Membuat Tombol Show / Hide Pada Kotak Komentar

Lama sudah tidak menulis artikel lagi di blog ini, tidak seru juga blog tidak update-update, cari-cari yang sekiranya apa yang belum saya postingkan, saya postingkan hari ini .
Sobat Blogger Sudah pernah lihat menu bagian dari komentar blog kita buat tambahan Menu show/hide? atau jelasnya seperti menu dengan tombol untuk membuka dan menutup menu yang kita inginkan, dan untuk sekarang saya coba terapkan pada Menu Form Komentar.
Untuk Demonya bisa dilihat di blog saya disini

Login blogger
Rancangan, Edit Html
Download Template Lengkap
Centang menu Expand Template Widgets
Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya :

#comments {
display : none;
}
.tombol-komentar a{
text-align: center;
}
.stylewadah {background: #CCC;
padding: 5px;
}

6. Berikutnya simpan Script berikut diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    $(".tombol-komentar").click(function(){
        $("#comments").slideToggle("slow");
        $(this).toggleClass("active");
        return false;
    });
});
</script>

7. Cari kode seperti dibawah ini (ctrl+F untuk mempermudah pencarian) :

</b:includable>
<b:includable id='comments' var='post'>

8. Jika sudah ketemu simpan kode berikut dibawah kode yang dicari tadi :

<center>
<div class='stylewadah'>
<a class='tombol-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>No Comments be the first<b:else/><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></b:if>
</a>
</div>
</center>

9. Simpan template dan lihat hasilnya. Silahkan dikembangkan sesuai keinginan. Semoga bermanfaat.

Demikian Cara Membuat Tombol Show / Hide Pada Kotak Komentar

Contact Us