4 Macam Tombol Spoiler

Spoiler sendiri sangat bermanfaat buat sobat yang sering posting artikel panjang-panjang. Sobat bisa menaruhnya di spoiler dan loading blog sobat bisa ringan. Berikut macam-macam tombol spoiler beserta codenya :

• Spoiler Model 1

Spoiler:

Taruh kode atau text yang akan di sembunyikan di sini

Code Scriptnya :

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

• Spoiler Model 2

 Code Scriptnya :

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

• Spoiler Model 3

 Code Scriptnya :

LETAKKAN KODENYA DISINI

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

• Spoiler Model 4

 Letakan Apa Aja Yang Ingin Anda Pasang Di Sini

Code Scriptnya :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});}); </script> <style type="text/css"> #dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;} </style> <button id="butToggle">Klik Untuk Buka</button> <div id="dvt"> Letakan Apa Aja Yang Ingin Anda Pasang Di Sini</div>

loading...

Share on Facebook

Share on Twitter

Share on LinkedIn

Ingin mendapatkan artikel dari Serba Serbi Informasi tanpa membuka blog ini? Silahkan masukkan e-mail anda di kolom ini, artikel yang di post Serba Serbi Informasi akan otomatis terkirim ke e-mail anda: