Membuat menu spoiler pada blog

Tampilan spoiler, bisa dibilang sebuah menu yang bisa menghilang dan muncul lagi, dengan sebuah tombol untuk melakukan hal tersebut
Untuk contohnya, bisa anda klik pada tombol di bawah ini :

[Judul Spoiler] [Judul miring] :

Baiklah, langsung saja saya akan memberikan kodenya agar anda, para blogger bisa membuat menu spoiler seprti tadi.
Berikut adalah kode yang anda gunakan :

<div style="margin: 5px 20px 20px;"><div style="margin-bottom: 2px;"><b>[Judul Spoiler] <em>[Judul miring]</em></b> : <input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"> </div><br /><div style="margin: 0px; padding: 6px; border: 1px inset;"><div style="display:none;">[ISI SPOILER]</div></div></div>

Lalu, apakah yang bisa anda rubah sesuai keinginan anda?
1. Tulisan [Judul Spoiler]
dan [Judul miring] merupakan judul dari tampilan spoiler yang bisa anda rubah sesuai kebutuhan
2. Tulisan Show dan Hide yang merupakan tampilan tombol yang bisa anda rubah sesuai keinginan
3. Tulisan [ISI SPOILER] yang merupakan isi di dalam spoiler tersbut saat dittampilkan yang bisa dirubah sesuai kebutuhan anda juga.

Untuk pemasangan, anda bisa memasangnya pada kolom widget yang ada di samping kanan / kiri, atau bisa juga di postingan blog anda.

SELAMAT MENCOBA

Artikel terkait dengan kategori ini:

Fasilitas berlangganan artikel di anima world telah tersedia (FREE)

Silakan masukkan alamat e-mail anda lalu klik Berlangganan:

Delivered by FeedBurner