Membuat Spoiler atau Open Close Keren

Membuat Spoiler atau Open Close Keren ~ Setelah membahas bagaimana

cara Identifikasi Jenis Kelamin Tanaman Ganja pada postingan artikel

sebelumnya, hari ini saya akan share sebuah Blogger Tutorial mengenai

cara membuat sebuah spoiler atau tombol open close di blog.







Spoiler



Spoiler atau tombol open close ini berfungsi untuk menyembunyikan

sebuah text, gambar ataupun widget. Ketika kalian meng-klik tombol

open maka text, gambar ataupun widget yang kalian sembunyikan akan

terlihat begitu pula sebaliknya, jika kalian kembali meng-klik tombol

close maka text, gambar ataupun widget yang kalian sembunyikan akan

kembali tertutup. Kalian sudah mengerti kan? Kalau kalian ingin

menggunakannya silahkan kalian pilih bentuk spoilernya dan copas kode

di bawahnya ke tempat yang kalian inginkan





Spoiler 1







<div><div style="margin: 5px;">

<div class="smallfont" style="margin-bottom: 2px;">

<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 = 'TUTUP'; } else {

this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display

= 'none'; this.innerText = ''; this.value = 'BUKA'; }"

style="background: none repeat scroll 0% 0% yellow; border: 1px dashed

red; color: blue; font-size: 10px; margin: 0px; padding: 5px; width:

auto;" type="button" value="BUKA" /></div>

<div class="alt2">

<div style="display: none;">

<div style="background-color: yellow; border: 2px dashed red; color:

blue; padding: 10px; text-align: justify;">

Text, URL Gambar atau Widget kalian Disni</div>

</div>

</div>



Spoiler 2







<div><div style="margin: 5px;">

<div class="normalfont" style="margin-bottom: 2px;">

<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 = 'CLOSE'; } else {

this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display

= 'none'; this.innerText = ''; this.value = 'OPEN'; }"

style="background: none repeat scroll 0% 0% BLUE; color: white;

font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button"

value="OPEN" /></div>

<div class="alt2">

<div style="display: none;">

<div style="color: white; padding: 10px; text-align: justify;">

Text, URL Gambar atau Widget kalian Disni</div>

</div>

</div>



Spoiler 3





Text, URL Gambar atau Widget kalian Disni



<div><div style="margin: 5px;">

<div class="normalfont" style="margin-bottom: 2px;">

<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 = 'CLOSE'; } else {

this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display

= 'none'; this.innerText = ''; this.value = 'OPEN'; }"

style="-moz-border-radius: 15px 15px 15px 15px; background: none

repeat scroll 0% 0% BLUE; color: white; font-size: 11px; margin: 0px;

padding: 5px; width: 30%;" type="button" value="OPEN" /></div>

<div class="alt2">

<div style="display: none;">

<div style="color: white; padding: 10px; text-align: justify;">

Text, URL Gambar atau Widget kalian Disni</div>

</div>

</div>



Spoiler 4







<div><div style="margin: 5px;">

<div class="normalfont" style="margin-bottom: 2px;">

<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 = 'TUTUP'; } else {

this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display

= 'none'; this.innerText = ''; this.value = 'BUKA'; }"

style="-moz-border-radius-bottomleft: 15px;

-moz-border-radius-topright: 15px; background: none repeat scroll 0%

0% RED; color: white; font-size: 11px; margin: 0px; padding: 5px;

width: 30%;" type="button" value="BUKA" /></div>

<div class="alt2">

<div style="display: none;">

<div style="color: white; padding: 10px; text-align: justify;">

Text, URL Gambar atau Widget kalian Disni</div>

</div>

</div>



Spoiler 5







<div><div style="margin: 5px;">

<div class="normalfont" style="margin-bottom: 2px;">

<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 = 'TUTUP'; } else {

this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display

= 'none'; this.innerText = ''; this.value = 'BUKA'; }"

style="-moz-border-radius-bottomright: 15px;

-moz-border-radius-topleft: 15px; background: none repeat scroll 0% 0%

darkgreen; color: white; font-size: 11px; margin: 0px; padding: 5px;

width: 30%;" type="button" value="BUKA" /></div>

<div class="alt2">

<div style="display: none;">

<div style="color: white; padding: 10px; text-align: justify;">

Text, URL Gambar atau Widget kalian Disni</div>

</div>

</div>



Spoiler 6







<div style="margin: 5px;">

<div class="bigfont" style="margin-bottom: 2px;">

<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="margin:

0px; padding: 0px; width: 100%;" type="button" value="SHOW" /> </div>

<div class="alt2" style="-moz-background-inline-policy: continuous;

background: none repeat scroll 0% 0% rgb(255, 0, 0); border: 1px

inset; margin: 0px; padding: 6px;">

<div style="display: none;">

Text, URL Gambar atau Widget kalian Disni</div>

</div>

</div>



Catatan :

1. Kalian bisa melakukan beberapa modifikasi : mengganti warna/color,

ukuran/jenis font, text-attribute seperti bold/italic, dari Spoiler

tersebut.



2. Isi dari Spoiler juga bisa dimasukkan kode div style seperti di

bawah ini, sehingga bentuknya seperti tabel yg ada scroll bar-nya...







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

.

.

.



</div>





NB :





Kode titik2 ditengahnya adalah isi, bisa berisi link, text, gambar, dll



Bagaimana? Cukup mudah bukan cara membuatnya tinggal copas aja koq.



Semoga bermanfaat and Happy Blogging.

Baca juga artikel Blogger Tutorial lainnya. Cekidooot...