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...
