Macam-Macam Tombol Spoiler Untuk Blog

Buka tutup, mungkin itu kata yang tepat untuk judul posting saya kali ini. Kalau kotak scrol mungkin sudah sangat tidak asing lagi di dunia blogger. Mungkin anda juga sudah sangat mengenal dengan tombol atau button spoiler. Dan bagi anda yang masih belum mengenalnya, tombol spoiler ini berfungsi untuk sama dengan dengan kotak scroll, dimana untuk menghemat ruang baik pada gedget atau halaman postingan blog.

Okelah gak usah saya berpanjang lebar karena kayaknya saya juga makin bingung jelasinnya, apalagi anda..hehe,, Cara memasang di blog anda sangatlah mudah, anda tinggal copy aja kode di bawah ini dan pilih model yang mana yang anda sukai, terserah anda.

Berikut adalah Kodenya:

1. Contoh tombol spoiler pertama

Letakan kode apa aja yang ingin anda pasang disini

 

 <div id="spoiler" style="display:none"> Letakan kode apa aja yang ingin anda pasang disini </div> <button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Buka/Tutup</button>

 2. Contoh tombol spoiler kedua

Letakan Kode Apa Aja Yang Ingin Anda Pasang Disini

<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'; }" name="button" type="button" value="CONTOH SPOILER" /></div> <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"> Letakan Kode Apa Aja Yang Ingin Anda Pasang Disini </div><div id="hide"></div></div></div> 

 3. Contoh Tombol Spoiler ketiga

Letakan Apa aja yang Ingin Anda Pasang Di Sini<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <b>copy paste </b> <i>kode ini</i>: <input 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'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> Letakan Apa aja yang Ingin Anda Pasang Di Sini </div> </div> </div> <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <b>copy paste </b> <i>kode ini</i>: <input 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'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> Letakan Apa aja yang Ingin Anda Pasang Di Sini </div> </div> </div>

4. Contoh Tombol Spoiler Keempat

Letakan Apa Aja Yang Ingin Anda Pasang Di Sini

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

Sumber

Anda baru saja membaca artikel yang berkategori Blogger dengan judul Macam-Macam Tombol Spoiler Untuk Blog . Anda bisa bookmark halaman ini dengan URL https://willy-maulana.blogspot.com/2012/10/macam-macam-tombol-spoiler-untuk-blog.html. Terima kasih!

Ditulis oleh: ws -