Kali ini saya akan share tentang cara membuat show hide kotak komentar. Pertama-tama saya mungkin sedikit cerita tentang awal mula saya memakai kotak komentar seperti yang ada di blog saya ini.
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 saya 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>
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'/>
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!
Sebagian para blogger mengeluh karena jika kita menggunakan kotak komentar seperti ini, teman-teman blogger yang menggunakan fasilitas mobile akan kesulitan pada waktu memberikan komentar tentang hal yang kita postingkan. Saya disini ingin memberi solusi bacalah artikel berikut -> cara membuat blog mudah di akses via HP | mobile.
lihat juga cara membuat aplikasi blog untuk hp tanpa mahir bahasa pemograman.
Sekian dulu dari saya, semoga tutorial cara membuat kotak komentar show hide ini bermanfaat.
PERHATIAN!! silahkan mengcopas artikel di atas dan mempublikasikannya. dengan sarat anda menyertakan sumber artikel dengan link hidup yang mengarah ke artikel ini. contoh: http://dhiibhiehh.blogspot.com/,terima kasih