Macam-Macam Tombol Spoiler

Ardi21_ansyah

Blogger, Tips N' Trick Blogger

Minggu, 13 Juli 2014

Belum ada komentar

Macam-Macam Tombol Spoiler

pada kesempatan kali ini saya akan sedikit berbagi tentang macam-macam tombol spoier show/hide dan bagaimana cara membuatnya. Spoiler sendiri sangat bermanfaat buat sobat yang sering posting artikel panjang-panjang. sobat bisa menaruhnya di spoiler dan loading blog sobat bisa ringan ,, asikkan. tombol spoiler sendiri ada bermacam-macam model dan bentuk, berikut macam-macam tombol spoiler beserta codenya: 

1.Spoiler Model 1

Spoiler:

Taruh kode atau text yang akan di sembunyikan di sini

Code Scripnya adalah :

<br /><div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <strong>Spoiler</strong>: <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button" value="Open" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> Taruh kode atau text yang akan di sembunyikan di sini</div> </div> </div>

2. Spoiler Model 2 

Letakkan Kode yang disembunyikan disini

Code Scripnya adalah :

<br /><div id="spoiler"> <div> <input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" type="button" name="button" value="LIHAT" /></div> <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"> Letakkan Kode yang disembunyikan disini</div> <div id="hide"> </div> </div>

3. Spoiler Model 3

LETAKKAN KODENYA DISINI

Code Scriptnya adalah :
<br /><div> <input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" type="button" name="button" value="BUKA" /></div> <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"> <div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;"> LETAKKAN KODENYA DISINI</div> <div id="hide"> </div> </div>

Nah itu tadi sedikit dari saya tentang Macam-Macam Tombol Spoiler beserta code2nya,,, semoga bermanfaat ya sob...