Menyembunyikan Widget di Blog

Terlalu banyak widget tentunya akan membuat tampilan Blog menjadi kurang rapi dan terkesan kumuh.
Tapi mengingat fungsi widget yang sangat penting, tentunya kita akan bingung dalam memilih widget yang ingin ditampilkan. Nah kali ini aku mau memberikan kalian solusi, jika widget terlalu besar kamu bisa menyembunyikannya di samping blogmu, dan untuk memunculkannya tinggal klik saja.

Contohnya seperti Widget Buku Tamu milikku yang ada disamping blogku ini.
  • Nah untuk membuatnya, kamu login dulu ke Bloggermu!
  •  Cari rancangan, elemen laman, tambah gadget, java script
  • Setelah itu Copy script yang ada di bawah ini:


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">
KODE HTML WIDGET ANDA!!!!!!
<br /><a href="" title="">Yudhaime's Site</a><br />
<div style="text-align:right">
<a href="">
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>



<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Tulisan yang berwarna biru kamu ganti dengan kode HTML widget kamu!
Selesai..

HEHE Terima kasih...