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

Hallo semuanya...

Kali ini Pphoo™ akan mengulas Cara Membuat Menu Spoiler atau Open-Close, Show-Hide.

Terus, kalau kita klik button bertuliskan 'CLOSE' tadi, maka isi dari button tersebut tidak ditampilkan lagi di layar monitor.

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.

Semoga bermanfaat Kawan... (",)