ShowHide pada kotak Komentar

Post kali ini respon dari request teman saya. hehe,, yaitu membuat ShowHide pada kotak komentar. (Seperti di blog ini).
Oke, tanpa basa-basi langsung aja ke stepnya.

Sebelumnya "Download Template Lengkap" dahulu, biar lebih aman. :)

Pertama, login akun blogger kalian.
Masuk ke Rancangan -> Edit HTML
Centang

Expand Template Widget

Lalu cari kode ini

]]></b:skin>

Lalu paste kan kode dibawah ini, tepat diatasnya

#comments {
display : none;
}
.show-hide a{
text-align: center;
}
.ramastyle {background: #CCC;
padding: 5px;
}

Lalu cari kode

</head>

Simpan kode script dibawah ini tepat diatas kode tadi

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

Langkah terakhir...
Cari lagi kode dibawah ini

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

Lalu letakkan kode ini dibawahnya

<center>
<div class='ramastyle'>
<a class='show-hide' 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>

SIMPAN TEMPLATE dan lihat hasilnya.. GOOD LUCK.. ^^