Cara Membuat Spoiler Opn-Close,Show-Hide

 Berikut ini, Oyah ingin menyampaikan tips untuk membuat SPOILER. Btw, apa sih yang dimaksud dengan SPOILER? Itu looohhh... yang kalo di blog teman2 kita ada semacam button yang bertuliskan 'OPEN' dan kalo kita klik button tersebut, maka akan terbukalah isi dari button itu. (lihat gambar)
Misalnya, link dari blog roll, atau gambar/foto, atau bisa juga teks saja, dll. Naaahh... setelah kita klik button yang bertuliskan 'OPEN' tadi, maka tulisannya berubah jadi 'CLOSE'. Kadang2 ada yang menuliskan 'SHOW/HIDE' atau 'BUKA/TUTUP'.


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

Okelah, kalaw begituw, aq gak mo berpanjang kata lagi. Ikutin aja petunjuknya...

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 :

Btw, di sini aq mo kasi sedikiiitttt aja tambahan, yaitu sbb :

1. Klo teman2 perhatikan kodenya, maka qta bisa melakukan beberapa modifikasi a.l. : mengganti warna/color, ukuran/jenis font, text-attribute spt bold/italic, dari Spoiler yg akan dipakai di blog teman2...
2. Isi dari Spoiler juga bisa dimasukkan kode div style, shg bentuknya spt tabel yg ada scroll bar-nya...

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

.

.

.

</div>

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

Okelah, kalaw begituw.. semoga tips ini bermanfaat, makasyiiihh atas segala perhatiannya, jangan sampe ada yg kelupaan... contohnya : sendal, handphone, kunci motor, kunci mobil, kunci rumah, dompet, tas, topi, jas ujan, jaket, payung.... wakakakak... banyaaaaaakk... yyyaaaaaakkkk....

Artikel Terkait:

Posted in: Tutorial Blog