Bermacam bentuk button atau spoiler

Sorok widget di sidebar untuk,agar penampilan blog lebih kemas.

Cara untuk sorokan widget dengan button atau spoiler ini,ada Bermacam bentuk button atau spoiler

Anda hanya tinggal pilih bentuk sebagaimana yang sesuai dengan blog anda.

1.Salin code di bawah ini.

<div id="spoiler" style="display:none">

LETAK CODE DI SINI


</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.Cara yang ini pun boleh juga:

<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%;">

Letak apa sahaja di sini

</div><div id="hide"></div></div></div>

3.Boleh juga cuba yang ini:

copy paste kode ini:

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

isi teks/gambar / kode html

</div> </div> </div>

4.Buat spoiler dengan jQuery pula.

<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 DISINI</button>
<div id="dvt">

Letak apa yang anda inginkan disini</div>

Mungkin yang mengunakan jQuery ini agak susah sedikit kerana terpaksa mengantikan width: 200px;height: 100px mengikut kesesuaian apa yang hendak kita masukan.

Semoga beroleh manfaat dengan tutoril Bermacam bentuk button atau spoiler ini.