Cara Membuat Spoiler di Blog

Assalammu alaikum.. ^^
ya long time no see yah sobat blogger..
setelah berbulan-bulan saya rehat dulu dari dunia blogging, akhirnya sayapun muncul lagi #Tuiiing
yah sedikit cerita kenapa saya gak update-update ini blog jadi gini ceritanya



beberapa bulan yang lalu saya bikin postingan dan waktu itu saya baru belajar caranya bikin spoiler, nah waktu itu lagi bingung-bingungnya tuh. Ada spoiler yang berhasil dibikin, ada yang gagal.. alhasil setelah frustasi karena 2 minggu gak bisa-bisa saya pun memutuskan istirahat dulu 2 minggu biar gak stress, nah pas banget ketika mood saya buat ngeblog dateng lagi langsung deh setelah 1 bulan saya mulai lagi buat ngebetulin kesalahan-kesalahan yang ada di script spoiler tersebut. naas(jleeeb) pas saya coba ngecek blog saya, ada iklan yang system(cara kerja)nya kaya virus, jadi kalau sobat-sobat buka blog saya beberapa bulan yang lalu saya mohon maaf kalau ada gangguan waktu kalau blog saya dibuka pasti setelah beberapa detik langsung di re-direct ke alamat iklan tsb.

ah udah dulu ah kok malah jadi ngedongeng hehehe.. XD

okee, sesuai judulnya disini kita bakal belajar membuat spoiler seperti di forum-forum itu..
#emang bisa?? waktu itu saya coba pakai script [spoiler]isi spoiler[/spoiler] tapi kok gak bisa
yap tentu bisa dong.. ya tentu saja, karena script untuk di forum dan blog emang rada berbeda kawan.. nah yuk kita coba, ini dia cara-caranya

1. Masuk ke postingan yang ingin diberikan spoiler(atau buat baru juga boleh)
2. Pilih mode HTML

3. Masukkan Script Spoiler-nya
nah untuk script spoiler sebenarnya ada bermacam-macam diantaranya
#Script 1

<div id="spoiler">
<div><input type="button" value="Buka" style="margin:0px;padding:0px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Lagi'; }">
</div>
<div style="background: #00ffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">

isi spoiler

</div>

Keterangan:
yang berwarna hijau adalah tulisan yang akan muncul sebelum spoiler dibuka
sedangkan yang Merah adalah tulisan yang akan muncul pada saat spoiler dibuka
yang Kuning adalah warna background pada spoiler, jika ingin dikosongkan(transparant) ganti saja dengan transparent
yang oranye adalah isi spoiler, nah ini bisa diisi apa saja bisa diisi foto/gambar/video/text dan lain-lain. pokoknya banyak deh yang bisa dimasukkin sini, fungsinya sih sama saja seperti yang biasa digunakan di forum, hitung-hitung dengan spoiler ini halaman/ artikel yang dibuka tidak terlalu berat
Percobaan:
ayo kita test ^^

isi spoiler

#Script 2

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Judul Spoiler</span></i><input 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

-----isi spoiler-----

</div>
</div>
</div>
</div>

Keterangan:
nah kalau yang ini lebih simple scriptnya cukup ganti yang berwarna:
Hijau dengan tulisan yang akan ditampilkan pada saat Spoiler terbuka
Kuning dengan tulisan yang akan ditampilkan saat Spoiler tertutup(akan dibuka)
Merah dengan script/link atau text yang ingin dimasukkan ke dalam spoiler
Percobaan:
ayo kita test ^^

Judul Spoiler

-----isi spoiler-----

nah sobat blogger, segitu aja dulu ya dari saya. Next time kalau ada waktu lagi bakalan saya update kok blognya tenang aja (klik iklannya juga yah biar saya nambah semangat bloggingnya hehehe.. :D)<