Tim Van Damme Inspired by Tim Vand Damme

Pengikut

Network


ShoutMix chat widget

Buku Tamu

Blog

8 Jun 2011

Membuat Bermacam Tombol Spoiler Di Blog

kali ini saya akan berbagi trik seputar tombol spoiler. Spiler berfungsi sebagai tombol untuk menghemat bahkan memperingan loading sebuah blog. setelah blogwallking saya temukan berbagai macam bentuk tombol spoiler. langsung aja kita lihat contohnya :
Contoh Pertama :


Contoh Kedua :

Contoh Ketiga :

Contoh Keempat :


<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">LETAKKAN KODENYA DISINI</div></div></div>

Contoh Kelima :

Judul


<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul</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;">
LETAKKAN KODE SOBAT DISINI
</div></div></div></div>

Catatan : - Kode untuk membuat  masing masing spoiler tersebut sudah saya masukkan di dalam spoiler tadi.
semoga Membuat Bermacam Tombol Spoiler Di Blog bermanfaat.

0 komentar:

Posting Komentar


Only CSS and Jquery Design by Insight © 2009

This template is brought to you by : allblogtools.com | Blogger Templates