Saturday, December 05, 2009

3 Macam Membuat Spoiler ( menu Show and Hide )


Caranya tinggal copy dan pastekan pada blog kita.
1. Spoiler I :

<div>
<input style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button" value="Tampilkan" /></div>
<div style="border: 0px solid #000000; margin: 10px auto; padding: 5px; background: #c9d2ed none repeat scroll 0% 0%; width: 500px;">
<div style="display: none;">
DI SINI ISI SPOILER ( BISA IMAGE, JAVASCRIPT DLL )</div>
</div>

Contohnya lihat di bawah ini.

DI SINI ISI SPOILER ( BISA IMAGE, JAVASCRIPT DLL )
2. Spoiler II :

<div style="border: 0px inset gray; padding: 1px;"><div style="text-align:center;" ><button type="button" class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Klik Aja" ><span style="color: rgb(0, 0, 0);" ><b>Ganti Dengan JUDUL SPOILER</b></span></button></div><div id="spoiler" style="display: none;"> DI SINI ISI SPOILER ( BISA IMAGE, JAVASCRIPT DLL )</div></div>

Contohnya lihat di bawah ini.
3. Spoiler III :

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul Spoiler Anda </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
DI SINI ISI SPOILER ( BISA IMAGE, JAVASCRIPT DLL )
</div></div></div></div>

Contohnya lihat di bawah ini.
Judul Spoiler Anda
DI SINI ISI SPOILER ( BISA IMAGE, JAVASCRIPT DLL )
Nah jika sobat mau modivikasi, silahkan di utak-utik sendiri. Karena tentang Spoiler kayaknya sudah lama sekali muncul di dunia blog.
http://emo.huhiho.com

Anda Sudah Baca Yang Ini? :

41 komentar:

Klik Here To Show All Comment


Unknown Saturday, December 05, 2009 12:59:00 AM  

salam sahabat
wah siip n siip dhek sangat bermanfaat thnxs n good luck ya

Mich Saturday, December 05, 2009 3:09:00 AM  

wah tq banget yah om
heheh^^
jadi ngerti sekarang hoho

Mr. X Saturday, December 05, 2009 3:45:00 AM  

:-t
Mbak Dhan dan Mas Heru, makasih deh...
:.((
Mich kok manggil Om cih? hik...huwaaaa....

Mich Saturday, December 05, 2009 3:50:00 AM  

yah...
jgn nangis hoho :)
keep smile yah cc :)
haha

Mr. X Saturday, December 05, 2009 3:57:00 AM  

;;)

@ smile lagi...
Makasih deh Mich... :)

Seti@wan Dirgant@Ra Saturday, December 05, 2009 3:59:00 AM  

Mantap Dinda..
Aku kayaknya paling suka pake yang nomer 2.
makasih banyak.

Mich Saturday, December 05, 2009 4:01:00 AM  

cc...
kok namanya khusnul ?
nama panggilan cc apa?
haha

Rock Saturday, December 05, 2009 4:20:00 AM  

Skrg blog km jd enteng dik pake spoiler...
Coba ahhh...

ina Saturday, December 05, 2009 4:24:00 AM  

wuih keren... makasih mba...ilmunya...

Mich Saturday, December 05, 2009 4:33:00 AM  

cc...
cara bikin tabview kyk cc itu gmn y? hoho...

Anonymous,  Saturday, December 05, 2009 4:38:00 AM  

Para Blogger Iklan kan Blog anda semua
Di Http://iklannyata.blogspot.com .
Blog Iklan gratisssss & Tingkatkan PageRank Blog anda

recyclebin Saturday, December 05, 2009 4:39:00 AM  

wah keren.. bisa dicoba nih.. biar blog jadi enteng.. makasih mbak ^^

@cicin Saturday, December 05, 2009 5:19:00 AM  

Tq info nya.
Jgn lupa, artikel yg hrs d baca untuk para cewek di Galeri Fhoto. Baca ya?

Unknown Saturday, December 05, 2009 5:30:00 AM  

lumayan nambah ilmu lagi.....ini sih kayaknya buat postingan semacam tebakan atawa teka teki.....jawabannya ....baru kita klik. salam.

nanggroe Saturday, December 05, 2009 5:48:00 AM  

sip nih tutorialnya... salam kenal ya... boleh tukeran link ga? link blog ini udah saya pasang di halaman blogroll blog aq...

Anonymous,  Saturday, December 05, 2009 8:32:00 AM  

Spoiler.. spoiler..

aku senang menggunakan ini, aku baru bisa satu macam, tp ini ada 3 pilihan...

hore....
Copas2...

Sohra Rusdi Saturday, December 05, 2009 9:52:00 AM  

datang disini baca tutorial spoiler

pengumpulblog Saturday, December 05, 2009 11:24:00 AM  

Ilmu yang mantap lagi khus. Terima kasih ya. Yang paling penting kita harus mengerti bagaimana cara untuk menggunakannya. Hik....

Rizkyzone Saturday, December 05, 2009 11:45:00 AM  

mantab nih dek langsung mas coba, mas suka yang tampilan yang pertama, sip dek

Mr. X Saturday, December 05, 2009 1:00:00 PM  

b-(

Wah Padahal Tutorial tentang Spoiler sudah banyak.

8-}

Terima kasih sekali buat semua yang telah berkomentar pada blog sederhana ini.

Rizkyzone Saturday, December 05, 2009 5:14:00 PM  

dek kok g d post tw pertanyaane mas, yang kaya d komentare ade'

misterdicious Saturday, December 05, 2009 6:13:00 PM  

wah... keren nih.. coba2 utak atik ah entar... thanks for sharing ya?

Bang Ancis Saturday, December 05, 2009 11:10:00 PM  

Wow ribet amat ya? akan aku usahin biar bisa... thanks ya..

Goaplek Saturday, December 05, 2009 11:10:00 PM  

Nice info my friend, ini satu ilmu baru lagi nih buat nyubi kyk aku.....

Mr. X Sunday, December 06, 2009 5:28:00 PM  

@ Rizky2009, sudah nih mas coba lihat ini :

http://kluwan.blogspot.com/2009/12/cara-membuat-arsip-blog-site-map-label.html

:-t

Mr. X Sunday, December 06, 2009 5:32:00 PM  

@ misterdicious, maksih

@ Bang Ancis, Bang masak sih ribet? boong ah...

@ Goaplek, he he ... bukan newbie ah...

MULYONO W SPd Monday, December 07, 2009 12:56:00 AM  

Makin bagus aja blognya adik kita ini comment balik ya

Mr. X Monday, December 07, 2009 1:13:00 AM  

Willyo Alsyah P. Isman + MULYONO W SPd, langsung ke tkp...

:)]

Rival Aditya Friday, December 11, 2009 7:12:00 AM  

wah keren De' kak Riv mau cba biar tmbh simple Blog kakak ......

amrul Sunday, December 20, 2009 7:08:00 AM  

mantabz sob post nya
oce sob ane coba dulu yaaa...
oy tengkyu yaaa ilmunya..
Goodluck ya...

Post a Comment

newer page older page home
top