Membuat Sliding Box

Membuat Sliding box, code Scriptnya :

<!--Slidbox -->
<script type="text/javascript" src="http://marewainfo.googlecode.com/files/slidboxordinary.js"></script>
<div style="position:fixed; width:342px; overflow:hidden; bottom:20px;
right:10px; display:none;
background:url(http://1.bp.blogspot.com/_JUg9QsmKp5s/TORmQZAoYXI/AAAAAAAACAI/cLoCJMP1rGo/s000/bo-bg-html.gif)
repeat; -moz-border-radius:15px; -webkit-border-radius:15px;
border-radius:15px; border:2px solid #111111;" id="fbslidebox">

<div style="width:320px; padding:10px; margin:0 auto; overflow:hidden;">

<a href="#" style="float:right; color:#999; padding:0 3px;
border:1px solid #CCC; text-decoration:none; font-size:9px; font-family:Verdana, Geneva, sans-serif;" id="fbcloseslidebox">X</a>
<!--Slidbox tempat isi -->
<strong style="color:#66ad3d;">JUDUL</strong>
Diisi Sesuka Hati
<!--Slidbox end tempat isi -->
</div></div>
<!--Slidbox end -->
<div style="-moz-border-radius: 12px 12px 12px 12px; background-color: #e6e6e6; border: 2px solid rgb(204, 204, 204); color: black; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
Hasil CodeScript </div>

Read more »

Membuat Toggle Spoiler Untuk Menampilkan dan Menyembunyikan Widget Sidebar

Untuk lebih jelasnya kamu bisa mengikuti langkah-langkah sebagai berikut:

1. Login ke akun Blogger kamu.
2. Dari halaman Dasbor, klik Rancangan dan pilih Edit HTML.
3. Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
4. Beri tanda centrang pada Expand Template Widget.
5. Cari kode ]]></b:skin> lalu letakkan kode CSS berikut di atasnya:
/*-----Toggle Spoiler-----*/
.widgethidden {display:none}
.widgetshown {display:inline}
6. Dan letakkan script berikut di bawah kode ]]></b:skin> tadi:
<script type='text/Javascript'>
function togglespoiler (postid){
var whichpost = document.getElementById(postid);
if (whichpost.className=="widgetshown"){
whichpost.className="widgethidden";
}
else{ whichpost.className="widgetshown";
}
}
</script>
7. Setelah itu carilah kode berikut pada widget-widget yang akan kamu sembunyikan:
<h2 class='title'><data:title/></h2>
8. Ganti kode tersebut dengan kode ini:
<a href='javascript:togglespoiler (&quot;widget-spoiler1&quot;)' title='Show/Hide Widget'><h2 class='title'><data:title/></h2></a>
9. Kemudian pada kode berikut, yang ada di bawahnya:
<div class='widget-content'>
10. Ganti dengan kode ini:
<div class='widgethidden' id='widget-spoiler1'>
11. Simpan dan Lihat hasilnya
    
    Nah, sekarang coba kamu klik pada judul widget-widget sidebar kamu, apakah sudah bisa di Show/Hide?
    
    Catatan:
    Untuk widget-widget berikutnya, ganti widget-spoiler1 menjadi widget-spoiler2, widget-spoiler3, dst., baik pada kode HTML untuk judul (title) maupun pada kode widget-content-nya.

Read more »

Membuat Menu Show/Hide(Spoiler)

Judul Spoiler 1

Judul Spoiler 2 =>

DI SINI ISI SPOILER ( BISA IMAGE, JAVASCRIPT DLL )

Contoh diatas Code Scriptnya :
(Click Mouse untuk highlight all)

<br /> <br /> <style type="text/css"><br /> #headerDiv, <br /> #contentDiv { float: left; width: 510px; } <br /> #titleText { float: left; font-size: 1.1em; <br /> font-weight: bold; margin: 5px; } <br /> #myHeader { font-size: 1.1em; font-weight: bold; margin: 5px; } <br /> #headerDiv { background-color: #0037DB; color: #9EB6FF; } <br /> #contentDiv { background-color: #FFE694; } <br /> #myContent { margin: 5px 10px; } <br /> #headerDiv a { float: right; margin: 10px 10px 5px 5px; } <br /> #headerDiv a:hover { color: #FFFFFF; } </style> <br /> <br /> <script language="javascript"> function toggle2(showHideDiv, <br /> switchTextDiv) { var ele = document.getElementById(showHideDiv); <br /> var text = document.getElementById(switchTextDiv); <br /> if(ele.style.display == "inline") { ele.style.display = "none"; <br /> text.innerHTML = "<img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif'/>"; } <br /> else { ele.style.display = "inline"; text.innerHTML = "<img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/minus.gif'/>"; } } <br /> </script> <br /> <body> <div ;="" style="width: 550px;"> <br /> <br /> <fieldset> <br /> <legend>Judul Spoiler 1<br /> </legend> <br /> <div id="headerDiv"> <br /> <div id="titleText"> Judul Spoiler 2 =&gt;<br /> </div> <br /> <a href="javascript:toggle2('myContent','myHeader');" id="myHeader"><br /> <img src="http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif" /></a><br /> </div> <br /> <div style="clear: both;"> <br /> </div> <br /> <div id="contentDiv"> <br /> <div id="myContent" style="display: none;"> DI SINI ISI SPOILER ( BISA IMAGE, JAVASCRIPT DLL ) <br /> </div> </div> </fieldset> </div> </body><br /> <br />

SCRIP SOBAT

Untuk Contoh diatas Kode Scriptnya :

<br /> <center><div><div style="margin: 5px;"><div style="margin-bottom: 2px;" class="smallfont"><i><span style="font-weight: bold;"> </span></i><input style="margin: 0px; padding: 0px; width: 265px; font-size: 10px;" value="JUDUL" 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 = 'JUDUL'; }" type="button"/></div><div style="inset ; margin: 0px; padding: 6px;" class="alt2"><div style="display: none;"><div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 265px; height: 250px; text-align: center; "><br /> SCRIP SOBAT<br /> <br /> </div></div></div></div></div></center><br />

Selamat Mencoba semoga bermanfaat

Read more »