Latest Movie :
SELAMAT DATANG DAN SLAMAT MEMBACA BLOG SAYA YANG SEDERHANA INI santun saya PUJANGGA HINA

Cara membuat spoiler atau tombol hide



Cara membuat spoiler atau tombol hide


Cara membuat spoiler
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...
Spoiler ini digunakan untuk menghemat ruang pada artikel/tampilan blog kita karena kemampuannya yang bisa menyembunyikan dan menampilkan kembali widget/gambar/kalimat..
caranya seperti 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;">

Tempatkan code yang mau di spoiler disini

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

Maka hasilnya akan seperti ini dibawah ini










Share this article :
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. mari berkreasi - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger