cara pasang kotak komentar show hide

Kali ini kita akan merencanakan tentang cara membuat show hide kotak komentar. Ketika saya berkunjung di salah satu homepage sobat blogger dan membaca salah satu postingannya tuh seperti biasa tentumya blogger tidak Cuma membaca tapi juga meninggalkan komentar seperti memberi kritik, saran atupun cuman mengasih kata-kata jempol buat postingannya. Itulah cara kita menghargai para teman-teman blogger yang sudah membagikan apa yang sudah dia tahu.

Langsung aja ke tutorial cara membuat show hide kotak komentar.

1. Tentunya anda sudah login.

2. Pilih Menu Template

3. Kemudian pilih Edit HTML

4. Letakkan kode cascading style sheet berikut di atas kode </style>

  

#panel{
background: #00aeef;
max-height:200px;
padding:10px;
color:#ddd;
overflow:auto;
display:none;
}
.slide{
margin:0;
padding:0;
border-top:4px solid #575757;
}
.tombol-slide {
cursor:pointer;
cursor:hand;
text-align:center;
padding:0px;
margin:0 auto;
display: block;
font:bold 120%/100% Arial, arial, sans-serif;
color:#000000;
background-color:transparent;
}

 
5. Kemudian cari kode berikut.


<dl expr:class='data:post.avatarIndentClass' id='comments-block'>


6. Kemudian letakkan kode ini <div id=’panel’> di atas kode tadi.

7. langkah selanjutnya temukan kode berikut:

  

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</div>
letakkan kode disini
</b:if>

8. ganti kata "letakkan kode disini" dengan kode berikut 

  

</div><div class='slide'><span class='Tombol-slide'><img src='http://1.bp.blogspot.com/-ivzzyF2ewYI/Tj8UgHwXHUI/AAAAAAAAAmc/t2z66Ngw8Ak/s1600/addcomment.png'/></span></div>

9. Sekarang tinggal meletakkan kode scriptnya. Carilah script seperti di bawah ini.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

atau ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>


10. Jika tidak ada di templatemu maka letakkan salah satu kode script tersebut di atas
kode </head>

Setelah kode script diatas terpasang maka letakkan kode berikut di bawah kode tadi.

<script type='text/javascript'>
$(document).ready(function(){
$('.tombol-slide').click(function(){
$('#panel').slideToggle('slow');
});
});
</script>

Simpan template anda dan lihat hasilnya.

Catatan:
Anda juga bisa mengganti image yang berfungsi sebagai tombol dengan text atau image kreasi sendiri.
PENTING!