Excalibur
Info

Selamat Datang

Selamat datang di blog Roy Lichtenstein- saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan Berlama - Lama di sini dan membaca lebih lanjut tentang artikel yang saya susun. Ada banyak hal dapat anda pelajari, Anda mungkin akan menemukan sesuatu yang menarik

Sekilas Tentang Roy

Nama saya Roy Lichtenstein, Saya Bukan Seorang Blogger, Hacker, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...

Social Icons

xtreme-roylichtenstein.blogspot.com

Cara Membuat Spoiler Show & Hide Button

Cara membuat spoiler ini ada yang tanya tapi saya lupa siapa yang tanya.. maaf ya jadinya nama blog kamu tidak bisa saya tampilkan di artikel ini.. mungkin sudah banyak sobat blogger yang sudah mengerti memposting trik ini.. tapi berhubung ada sobat yang tanya ke saya.... oke deh.. kita bahas lagi disini...

Langsung ke intinya .. Spoiler ini digunakan untuk menghemat ruang pada artikel/tampilan blog kita karena kemampuannya yang bisa menyembunyikan dan menampilkan kembali widget/gambar/kalimat..

Simak caranya berikut ini.. :

1. Copas Kode Script Spoiler dibawah ini ;
2. Terserah ini Spoiler mau diletakan di artikel atau di widget/gadget...
<div style="margin: 5px 20px 10px;" align="center">
<div class="smallfont" style="margin-bottom: 2px;"> <input value="Show" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" 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;">

PASTE KODE SCRIPT YANG INGIN DI SEMBUNYIKAN DISINI YA

</div>
</div>
</div>
Ket :
align = untuk merubah posisi spoiler tengah/kiri/kanan
border = untuk memberi garis kotak pada spoiler
show/open = nama pada tombol spoiler bisa kamu ubah-ubah

3. Aturlah Sesuai dengan keinginan kamu.. lalu Simpan..

a. Contoh Spoiler Gambar dengan Border = 1px
...ini Spoiler dengan border biasa (border = 1px) .. untuk menghilangkan bordernya jadikan border = 0 px

b. Contoh Spoiler Gambar tanpa border alias 0px...

c. Contoh Spoiler Gambar dengan border alternatif...

Dan ini Contoh SpoiLer yang digunakan pada Widget > eksperimen284.blogspot.com
Selamat Mencoba

Tidak ada komentar:

Posting Komentar

Berikan Komentar Anda Dibawah Sini Jika Belum Punya Akun Google/Blogger Anda Bisa Pilih Anonymous