Cara Membuat Menu Spoiler atau Open-Close atau Show-Hide

Ok duech, Let'z Cekiprooot'z...

1. Log In dahulu ke Account blogspot Anda.

2. Klik "Page Element/Elemen Laman" & klik "Add/Tambah Gadget", lalu klik "HTML/Java Script".

3. Selanjutnya, COPAS kode yang ada di dalam box di bawah ini ke Gadget tersebut. Klik "Save/Simpan". Aturlah posisi dari Gadget ini, sesuai yg Anda inginkan di blog Anda.

Di bawah ini ada beberapa contoh SPOILER yang bisa kawan2 gunakan... depeleh, deepeeleeh... deeepppeeellleeehhh...

SPOILER 1

<div><div
style="margin: 5px;"><div class="smallfont" style="margin-bottom:
2px;"><input value="BUKA" style="margin: 0px; padding: 5px;
width: auto; font-size: 10px; background:yellow; color:blue; border:1px
dashed red;" 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'; }"
type="button"/></div><div class="alt2"><div
style="display: none;"><div style="border: 2px dashed red;
color:blue; background-color:yellow; text-align: justify;
padding:10px;">Isi dengan teks atau kode gambar dll disini</div></div></div></div></div>

SPOILER 2

<div><div
style="margin: 5px;"><div class="normalfont"
style="margin-bottom: 2px;"><input value="OPEN" style="margin:
0px; padding: 5px; width: 30%; font-size: 11px; background:BLUE;
color:white; border:1px dashes yellow;" 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 = 'CLOSE'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'OPEN'; }" type="button"
/></div><div class="alt2"><div style="display:
none;"><div style="border: 2px dashes white;
color:white;background-color:NONE; text-align: justify; padding:10px;
">Isi dengan teks atau kode gambar dll disini</div></div></div></div></div>

SPOILER 3

<div><div
style="margin: 5px;"><div class="normalfont"
style="margin-bottom: 2px;"><input value="OPEN" style="margin:
0px; padding: 5px; width: 30%; font-size: 11px; background:BLUE;
color:white; border:1px dashes yellow; -moz-border-radius-topright:
15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft:
15px; " onclick="if
(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
!= &#39;&#39;) {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;&#39;; this.innerText = &#39;&#39;; this.value =

&#39;CLOSE&#39;; } else {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;none&#39;; this.innerText = &#39;&#39;;
this.value = &#39;OPEN&#39;; }" type="button"
/></div><div class="alt2"><div style="display:
none;"><div style="border: 2px dashes white;
color:white;background-color:NONE; text-align: justify; padding:10px;
">Isi dengan teks atau kode gambar dll disini</div></div></div></div></div>

SPOILER 4

<div><div
style="margin: 5px;"><div class="normalfont"
style="margin-bottom: 2px;"><input value="BUKA" style="margin:
0px; padding: 5px; width: 30%; font-size: 11px; background:RED;
color:white; border:1px dashes yellow;-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-webkit-border-bottom-left
-webkit-border-bottom-right
"
onclick="if
(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
!= &#39;&#39;) {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;&#39;; this.innerText = &#39;&#39;; this.value =
&#39;TUTUP&#39;; } else {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;none&#39;; this.innerText = &#39;&#39;;
this.value = &#39;BUKA&#39;; }" type="button"
/></div><div class="alt2"><div style="display:
none;"><div style="border: 2px dashes white;
color:white;background-color:NONE; text-align: justify; padding:10px;
">Isi dengan teks atau kode gambar dll disini</div></div></div></div></div>

SPOILER 5

<div><div
style="margin: 5px;"><div class="normalfont"
style="margin-bottom: 2px;"><input value="BUKA" style="margin:
0px; padding: 5px; width: 30%; font-size: 11px; background:darkgreen;
color:white; border:1px dashes yellow;-moz-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-bottom-left
-webkit-border-bottom-right
"
onclick="if
(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
!= &#39;&#39;) {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;&#39;; this.innerText = &#39;&#39;; this.value =
&#39;TUTUP&#39;; } else {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;none&#39;; this.innerText = &#39;&#39;;
this.value = &#39;BUKA&#39;; }" type="button"
/></div><div class="alt2"><div style="display:
none;"><div style="border: 2px dashes white;
color:white;background-color:NONE; text-align: justify; padding:10px;
">Isi dengan teks atau kode gambar dll disini</div></div></div></div></div>

SPOILER 6

<div
style="margin: 5px;"> <div style="margin-bottom: 2px;"
class="bigfont"><input style="margin: 0px; padding: 0px; width:
100%;" value="SHOW" 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> <div style="border: 1px inset ;
margin: 0px; padding: 6px; background: #FF0000; none repeat scroll 0%
0%; -moz-background-clip: border; -moz-background-origin: padding;
-moz-background-inline-policy: continuous;" class="alt2"><div
style="display: none;">
Isi dengan teks atau kode gambar dll disini</a>
</div></div></div>

Catatan :

Ada sedikiiitttt tambahan nech, yaitu sbb :

1. Kalau Kawan2 perhatikan kodenya, maka Kita bisa melakukan beberapa modifikasi : mengganti warna/color, ukuran/jenis font, text-attribute spt bold/italic, dari Spoiler yang akan dipakai di blog Kawan2.
2. Isi dari Spoiler juga bisa dimasukkan kode div style, sehingga bentuknya seperti tabel yang ada scroll bar-nya.

<div style="padding:10px; overflow:auto; width:200px; height:200px;" 1px="">

.

.

.

</div>

NB :
Kode titik2 ke bawah itu adalah isi dari div style ini, bisa berisi link, text, gambar, dll.