Cara membuat spoiler show hide



..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
Photobucket
...ini Spoiler dengan border biasa (border = 1px) .. untuk menghilangkan bordernya jadikan border = 0 px

b. Contoh Spoiler Gambar tanpa border alias 0px...
Photobucket
c. Contoh Spoiler Gambar dengan border alternatif...
Photobucket
Dan ini Contoh SpoiLer yang digunakan pada Widget => mdjiung.blogspot.com

..Selamat Mencoba..


Artikel Terkait:

0 komentar:

Post a Comment