Cara Membuat Spoiler Hide atau Show

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Biasanya dalam membuat postingan membutuhkan kotak atau pembungkus kode script agar pembaca dapat membedakan mana artikel mana kode script, Oke langsung aja, berikut ini saya berikan berbagai macam script untuk spoiler hide/show.

Type 1 hasilnya seperti ini: 

Script Spoiler Type 1

<div !mulai spoiler><div style="text-align:center ; "><input style="width:97px; background-color:#84B5E7;  color:#1F1F9E ; border:1px solid #00FF00; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; font-weight: bold" value="Show" 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div> <div style="padding:5px ;  "> <div style="display: none; background: #ebf3fb ; border: 2px solid #aaccee; padding: 10px"> Disini anda bisa isi postingan, gambar atau script </div></div></div !akhir spoiler>

Keterangan script Type 1
97px = Lebar (kotak show)
1px = Garis (kotak show)
#00FF00 = Warna garis (kotak show)
bold = Tebal tulisan (show)
#1F1F9E = Warna tulisan (show)
#ebf3fb = Warna background area
2px = Garis area
10px = Lebar background area

Type 2 hasilnya seperti ini:

Script Spoiler Type 2

<div><div style="margin: 7px;"> <div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Judul Disini </span><input value="Klik Lihat !!!" style=" margin:5px;padding: 6px; width: 110px; font-size: 14px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39; Close..&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39; Clik Here&#39;; }" type="button" /> </div> <div class="alt2" style="border: 1px inset ; color:#1F1F9E; background: #ebf3fb; margin: 0px; padding: 3px;"> <div style="display: none;"> Disini anda bisa isi postingan, gambar atau script  </div></div></div>

Type 3 hasilnya seperti ini:

Script Spoiler Type 3

<div id="spoiler"><div><input style="font-size: 15px; font-weight: bold; margin: 5px; padding: 4px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show'; }" name="button" type="button" value="Klik spoiler ini" /></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;"><p style="text-align: justify;">Disini anda bisa isi postingan, gambar atau script <br /> </p></div><div id="hide"></div></div></div>

Type 4 hasilnya seperti ini:

Script Spoiler Type 4

<style type="text/css"> #headerDiv, #contentDiv { float: left; width: 500px; } #titleText { float: left; font-size: 1.1em; font-weight: bold; margin: 5px; } #myHeader { font-size: 1.1em; font-weight: bold; margin: 5px; } #headerDiv { background-color: #0037DB; color: #94FFE6; } #contentDiv { background-color: #94FFE6; } #myContent { margin: 5px 10px; } #headerDiv a { float: right; margin: 10px 10px 5px 5px; } #headerDiv a:hover { color: #FFFFFF; } </style> <script language="javascript"> function toggle2(showHideDiv, switchTextDiv) {  var ele = document.getElementById(showHideDiv);  var text = document.getElementById(switchTextDiv);  if(ele.style.display == "inline") {       ele.style.display = "none";   text.innerHTML = "<img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif'/>";    }  else {   ele.style.display = "inline";   text.innerHTML = "<img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/minus.gif'/>";  } } </script> <body> <div ;="" style="width: 520px;"> <fieldset> <legend>JUDUL SPOILER 1</legend> <div id="headerDiv"> <div id="titleText"> Judul Spoiler 2 =&gt;</div> <a href="javascript:toggle2('myContent','myHeader');" id="myHeader"><img src="http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif" /></a></div> <div style="clear: both;"> </div> <div id="contentDiv"> <div id="myContent" style="display: none;"> Di sini anda bisa isi postingan, gambar atau script dll </div> </div> </fieldset> </div> </body><small><center><a href="http://www.for.web.id/2014/11/cara-membuat-spoiler-hideshow.html" target="_blank">Get Widget</a></center></small>

Hasilnya seperti ini:

Script Scroll Seperti ini

<div align="left"> <table border="2" style="width: 300px;"><tbody> <tr> <th colspan="100%" scope="col">JUDUL DISINI</th> </tr> <tr><td><div style="font-family: arial; font-size: 12px; height: 100px; overflow: scroll; width: 300px;"> <div style="overflow: hidden; padding: 0 px; text-align: left; width: 100%;">  Disini anda bisa isi postingan, gambar atau script </div> </div> </td></tr> </tbody></table> </div>

Ref:
variasiblogger.blogspot.com
dan kreasi sendiri serta dari berbagai sumber (maaf lupa namanya)

Share this

Share on FacebookPlus on Google+