Menyembunyikan kotak komentar dengan spoiler

Sebelumnya zoel sudah pernah posting tentang cara membuat spoiler, sekarang pembuatan spoiler ditujukan khusus untuk menyembunyikan kotak komentar, kotak komentar ini terletak pada bagian bawah, atau mudahnya yaitu suatu tempat jika Sobat mau komentar, nah kotak itu yang zoel maksudkan.
Pembuatan ini dilakukan dengan tujuan agar halaman pada tiap postingan tidak terlalu panjang, dan menghemat pula tempat pada halaman posting.

• Pertama Sobat simpan code CSS di bawah ini di atas code ]]></b:skin

CSS

/*-----Toggle Spoiler-----*/
.widgethidden {display:none}
.widgetshown {
display:inline
overflow:auto;
}

• Kedua Sobat masukkan code javascript ini di bawah code ]]></b:skin

Java script

<script type='text/Javascript'>
function togglespoiler (postid){
var whichpost = document.getElementById(postid);
if (whichpost.className=="widgetshown"){
whichpost.className="widgethidden";
}
else{
whichpost.className="widgetshown";
}
}
</script>

• Cari code warna merah dan letakkan code warna biru di atas code warna merah, seperti terlihat di bawah:

<div style='text-align:center; margin:10px 0px; font-size:15px; font-weight:bold;'>

<a href='javascript:togglespoiler ("hide-form")' title='Click for comments'>Klik disini untuk berkomentar</a>

</div>
<dl class='widgethidden' id='hide-form'>

<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>

</dl>

Ket:

Warna biru merupakan code yang perlu ditambahkan di atas code warna merah. warna hijau bisa sobat ganti sesuai dengan keinginan sobat, kalimat tersebut yang nantinya akan tampil jika kotak komentar ter-hidden.


Save pekerjaan sobat, mudah-mudahan bermanfaat..