Membuat kotak view atau hidden pada Blogspot

Hai sobat semua..hmm akhirnya ni saya bisa buat tulisan sendiri,ya meskipun kode juga dari jiplak punya orang..hehe.Baiklah langsung saja ya?disini saya akan menerangkan tentang bagaimana cara membuat kotak view atau hidden.Sebenernya sih namanya adalah spoiler,berhubung dulu saya tidak tahu ya nyebutnya seadanya...Mungkin artikel seperti ini sudah bayak banget yang buat,tapi sekedar iseng dan ingin meningkatkan rank blok saya.

Saya akan mencoba membuat 2 jenis spoiler yaitu yang pertama hanya dengan teks/gambar saja dan spoiler dengan variasi bullet/numbering.Untuk contoh dan kodenya bisa dilihat dan di copi dibawah ini :

1. Untuk Spoiler Jenis Pertama

<div !mulai spoiler><div style="text-align:center;"><input style="width:100px; background-color:#e6e6e6; color:#000; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;" value="Tampilkan" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"></div>
<div style="padding:5px; text-align:justify;"><div style="display: none;">TULISAN/GAMBAR YANG AKAN DISEMBUNYIKAN</div></div></div !akhir spoiler>

2. Untuk Spoiler Jenis Kedua

# Login ke akun Blogger kamu.
# Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.
# Cari kode ]]> (gunakan Control F atau F3):
# Letakkan kode CSS berikut di atasnya:
/*-----Toggle Spoiler-----*/
.widgethidden {display:none}
.widgetshown {
display:inline
overflow:auto;
}
# Lalu letakkan script berikut di bawah kode
]]></b:skin>:

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

Catatan:
Bagi yang sudah memasang CSS dan script toggle spoiler untuk blok komentar, abaikan perintah di atas.

# Setelah itu, pada setiap ingin membuat spoiler, buatlah perintah seperti berikut:

<div style="text-align:center; margin:0px 0px; font-size:auto; font-weight:bold;">
<a href='javascript:togglespoiler ("spoiler1")' style='border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:3px 10px; background-color:#e6e6e6;' title='Click for expand'>Tampilkan/Sembunyikan</a></div>
<div class='widgethidden' id='spoiler1'>
TULISAN/GAMBAR YANG AKAN DISEMBUNYIKAN
</div>

Catatan:
Jika kamu akan membuat spoiler lebih dari satu, maka pada link javascript dan id-nya ganti menjadi spoiler2, spoiler3, dst. Atau bisa juga membuat nama id sendiri, seperti: foto, puisi, kartun, dll.

Nah gimana,mudah kan?Maaf ya untuk contoh yang kedua tidak saya beri contohnya,..maklum aja ya,ntar blog saya malah acak-acakan lagi.Hehe...Saya yakin kawan-kawan pasti bisa..selamat mencoba,semoga sukses...