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

Text, URL Gambar atau Widget kalian Disni

<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

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

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 = '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

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 = '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

Text, URL Gambar atau Widget kalian Disni

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



20 komentar:

nurcahyaku10 said...

Wah sangat lengkap sobat spoilernya, trims sarenya

BRI Jakarta Veteran said...

thanks sahabat
spoilernya banyak alternatif pilihan

Iduy said...

spoiler jenis widget kesukaan saya nihhh...! ajib gan

Kang Farhan said...

ajib nih abang.... ni perlu saya bookmark nioh....
makasih bang spoilernya...lengkap abissss

A Mom said...

cool site, keep it up!

pelangi sepi said...

Spoilernya lengkap

ayu said...

lengkap..menakjubkan..nice blog

ARMAN said...

@Nurcahyaku10, Sama-sama Thanks

@BRI Jakarta Veteran, sama-sama thanks

@Iduy, silahkan gan thanks

@KangFarhan, Thanks bang

@A Mom, thanks mom

@Pelangi sepi, Thanks mba

@ayu, Thanks mba

meulek-ict said...

wah mesti di coba nih gan....

ARMAN said...

@meulek-ict, Silahkan gan thanks

bocah n said...

aseek dapt tambah widget nihh.. thanks gan dah berbagi....

ARMAN said...

@bocah n, Okey gan sama-sama thanks

wongcrewchild said...

tutorial keren sob, fungsional dan mmpercantik tmpilan blog, thanks

ARMAN said...

@wongcrewchild, Thanks sob

Hacc said...

Banyak pilihannya nih. Izin copas codenya sob buat praktek. Thanks!

ARMAN said...

@Hacc, Silahkan sobat thanks

Jejak Puisi said...

ijin nyimak tutorny y kang... sekalian baca2 tulisan para komentator :D

salam blogger n happy blogging kang... ;)

VoltSyz ivan said...

Kakeane apik2.. :D cupes ah..

Bege-bege said...

sangat membantu artikelnya gan :D ijin copas

M.E.Service said...

Terimakasih Boss artikelnya ...ini yang saya cari-cari''' izin nyobain ya Boss...maklum newby
lagi seneng nyoba-nyoba...!

Post a Comment

Silahkan kalian berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar spam. Saya Lagi Bermasalah Dengan Adsense, Saya izin Vakum Ngeblog Dulu Sobat Buat Nyari Solusi!!

Related Posts Plugin for WordPress, Blogger...