Beragam Variasi tampilan BUKA TUTUP yang di pasang di Blog ataupun website akan menambah keunikan dan keasyikan tersendiri bagi kita melihat dan memakainya, itu tidak terlepas dari bagaimana cara kita berkreasi dengan Scriptnya itu sendiri. Selain keunikan dan keasyikan widget tersebut , kita akan diuntungkan dengan bisa meng-KOMPRESS page kita yang sangat banyak Konten yang di posting.

Bagaimana caranya? emang ada berapa macam Tampilan? ok gak perlu berlama-lama ngalor ngidul, kita langsung aja ke TKP !

1. WIDGET BUKA TUTUP/SPOILER TANPA SCROLL

Sciptnya :

<div><input style="font-family:Trebuchet MS; width:100px; border: 3px solid#FFFFFF;-moz-border-radius:20px; -webkit-border-radius:20px; margin:5px 0px 0px 0px; padding:5px; background:#000000; color:#00FF00;" 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 ='Mau Lihat Lagi?'; }" name="button" type="button" value="Lihat disini!!" /></div><div id="show" style="display: none; margin:10px; padding: 5px; width: 100%;">LETAKKAN LINK/SCRIPT/GAMBAR SOHIB DISINI</div><div id="hide"></div>

Untuk Text warna merah miring tinggal edit dengan lebar dan Bordernya sesuai selera sohib

Hasilnya seperti ini :

2. WIDGET BUKA TUTUP/SPOILER PAKAI SCROLL

Scriptnya:

<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; background: #000000 url(#) no-repeat scroll 0 0 ; border: 1px solid rgb(204, 204, 204); height: 250px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: left; width: auto;">

ISIKAN SCRIPT/ NON SCRIPT,URL,URL IMAGE DLL

</div>

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

Ket: -" BUKA DI SINI " bisa di ganti dengan kata lain disesuaikan dengan pemakaian.
-height, margin, overflow, padding, text align dan width bisa di edit disesuaikan dengan tata letak.

hasilnya seperti berikut :

3.SPOILER HTML OLEH SKRAP

Scriptnya :

<html>
<head>
<title>Kode HTML buka-tutup/Spoiler</title>
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
border:1px solid #ddd;
padding:3px;
}
.spoiler .inner
{
border:1px solid #eee;
padding:3px;margin:3px;
}
</style>
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
</head>
<body>
<h1>HTML Buka-tutup w/Js kode Oleh Skrap</h1>
<div class="spoiler">
<input type="button" onclick="showSpoiler(this);" value="Buka/Tutup" />
<div class="inner" style="display:none;">
ISILAH DENGAN LINK,TEXT,IMAGE DLL
</div>
</div>
</body>
</html>

Hasilnya :
Kode HTML buka-tutup/Spoiler

HTML Buka-tutup w/Js kode Oleh Skrap

4.SPOILER ANTIK

<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px"><b>Spoiler</b> for <i>{option}</i>: 
<input type='button'  value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" 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 = 'Buka'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
ISI DENGAN LINK/URL, TEXT, IMAGE, SCRIPT/NONSCRIPT
</div>
</div>
</div>

Hasilnya :

Spoiler for {option}:

5. SPOILER OKE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title> 
 Singod's Spoiler [jQuery]
</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" language="javascript"> 
google.load("jquery", "1.3.2");
</script> 
<script language="javascript"> 
$(document).ready(function() {
 $(".ShowSpoil").click(function() {
  $(".Spoiler").slideDown("slow");
 });
});
$(document).ready(function() {
 $(".HideSpoil").click(function() {
  $(".Spoiler").slideUp("slow");
 });
});
</script> 
<style type="text/css"> 
.Spoiler {
 display: none;
 border: 1px solid #CCC;
}
</style> 
<body> 
<div id="SpoilButton"> 
 <form action="#" method=""> 
  <input type="button" class="ShowSpoil" value="Buka" /> 
  <input type="button" class="HideSpoil" value="Tutup" /> 
 </form> 
 <div class="Spoiler"> 
  ISI DENGAN URL/LINK, SCRIPT/NONSCRIPT, IMAGE, TEXT
 </div> 
</div> 
</body> 
</html>

Hasilnya :
Singod's Spoiler [jQuery]

ISI DENGAN SCRIPT/NON SCRIPT,IMAGE, TEXT

6. SPOILER YA

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Buka pelan-pelan ya.. </span></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;">
<br />
<br />
<br />
<center><img alt="title gambar" border="0" src="url gambar disini" /></center>
</div>
</div>
</div>
</div>
<br />
<br />
<div class="MsoNormal" style="line-height: 150%; margin-bottom: 0.0001pt; text-align: justify;">

Hasilnya :

Buka pelan-pelan ya..

Adapun caranya LOGIN ke Blogger >> Pilih Tata letak >> Add Gadget >> Pilih JAVA SCRIPT <HTML> >> Copas Kode di atas >> Simpan Settingan >> Lihat Hasilnya.

ATAU

Pilih ENTRY BARU >> Pilih Mode HTML dan bukan Mode Compose dan COPAS kode di atas .

Dan utnuk melihat hasilnya tinggal switch dari Mode HTML ke Mode Compose.

Cukup Simple Khan ???

Silahkan di coba......

Demikian postingan kali ini, semoga bermanfaat.

Tag : Trik Blogger