Cara Membuat Tombol Show / Hide (Spoiler)

topgans.blogspot.com - Selamat pagi sobat blogger, pada postingan sebelumnya saya membahas tentang cara membuat Headline News di blogger, namun di pagi kali ini saya akan membahas tentang cara membuat tombol show dan hide. Ada yg udah tau bukan ? Nah silahkan di simak ..



Pada kesempatan kali ini saya akan mencoba berbagi tips blogger tentang cara membuat tombol show dan hide. Sudah pada tau bukan ? Bagi sobat yg belum tahu apa itu spoiler , saya jelasin lagi deh..hehe

Spoiler memiliki fungsi untuk menyembunyikan sebagian atau keseluruhan isi posting untuk menghemat ruang (Baik itu berupa text,gambar ,etc, dan sangat berguna ketika mencoba untuk mengurangi ruang di entri/posting dan spoiler juga bisa membantu mempercepat loading blog. Karena itulah banyak yang menggunakan fasilitas ini di dalam postingan blognya. Yang pasti spoiler di sini bukan spoiler mobil..hhehe

Bagi sobat yang ingin memasang tombol show hide di blog, caranya gampang banget kok. Sobat blogger hanya perlu mengcopy paste kode HTML di bawah ini.






<div><div style="margin-bottom: 2px;"><i><b><small>JUDUL SPOILER</small></b></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 style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">


ISI SPOILER (Terserah anda)


</div></div></div>


Maka hasilnya seperti ini,
JUDUL SPOILER

ISI SPOILER (Terserah anda)


Ataupun bisa juga seperti ini,


Kalau anda menginginkan tampilan seperti ini, anda hanya perlu menghilangkan kode JUDUL SPOILER lalu anda ganti kata show dan hide sesuai keinginan anda. Tapi jangan lupa juga untuk mengganti ukuran lebar nya, Misalnya : width:100px;

Gimana sob ? Cukup mudah bukan ? Hehe ,bila sobat masih belum mengerti dan belum bisa juga silahkan bertanya dengan meninggalkan komentar disini.
Semoga bermanfaat dan Selamat Mencoba :)

Related Posts by Categories



20 comments:

Free Download Full n Free said...

Saya Uda Pernah Bahas Juga ni Sob,. Keren Sob :)

Tophan said...

@Remix 7 : Hehe , saya cuma kepikiran mau posting ini barang kali ada sobat yg belum tau.. :D
Thanks sob , keep posting juga di blognya ..
kita sama-sama berbagi ilmu dan menjalin silahturahmi yg erat :)
Salam blogger ..

Shinobi Caemk said...

emang keren nih kalo pake spoiler, postingan bisa tertata rapi dan menghemat ruang ...

Edit Spoiler said...

ada yang tau ga gimana cara customize kotak spoiler.ny??

Tophan said...

@shinobi : Yap pastinya gan .. hehe
@Edit Spoiler : Maksud agan costumize di bagian mananya ?

Edit Spoiler said...

ya kotak spoiler.ny.... kalo yang biasa kan ya kyk contoh d atas... nah maksudku pinggirannya ad warna2 tampilan glow kyk twitter...

Tophan said...

Ohh kalo itu cuma tambahin kode HTML/scriptnya sob :)
Di google banyak ko kalo mau cari tampilan2 yg glow , trus ada efek glitter n dll ..

Unknown said...

ohhh.. jadi seperti ini ta cara buatnya...

baru tau aku... dari kemarin sayang sering lihat dari blog2nya temen pada ada spoilernya kaya gini.. sekerang aku jadi tau...
makasih sob atas sharenya.. mantab....

Tophan said...

@AbduGreen : Hehe ,sama2 sob. Selamat mencoba :)
Senang bisa berbagi ilmu dengan sobat blogger lainnya :D

NTRage03 said...

dlu q sering pake yg ginia :D
tpi skarang udah agak bkurang..
thanks ya sob :)

Tophan said...

@_ciids : Hoho , saya juga sudah jarang memakai spoiler :p
Sama-sama , senang bisa membantu :)

NTRage03 said...

:D klo kae spoiler alna jadi inget kaskus gitu malah :D

Tophan said...

@_ciids : Hehe , iya gan ..
Spoiler memang identik dgn kaskus , :p

seo said...

terima kasih atas pencerahannya. Ijin bookmark, gan.

Tophan said...

@om-onny : sama sama om .. :D

Bimo (Momentum of Learning) said...

sip..berguna infonya :)

Tophan said...

@Bimo : Semoga bermanfaat sob :D

Berbagi Kreativitas said...

Ternyata teks Show & Hide masih bisa kita rubah ya gan? sesuai dengan keinginan kita. Tapi kok fungsi tombol yang dibawah gak jalan tuh :)

Fuad XP said...

Sob,ko di blog ane ga jalan pas di klik tombolnya?? :)

Anwar Saputra said...

gan klw nampilkan show nya di posting macam gan,,, gmna caranya>>>>>
mohon bantuannya,,,,thanks infonya

Post a Comment

Maaf kalau saya tidak sempat menjawab/membalas komentar anda, dikarenakan saya tidak online 24 jam.
Mohon gunakan kata-kata yang sopan dalam memberikan komentar.
Komentar SPAM, SARA dan sejenisnya tidak akan di tampilkan.

Next Prev home
Follow Topgans