Widget Terbang disamping

Lihat ga di samping Kanan Blog ini ada Widget terbang bernama "Buku Tamu"? Nah pada kesempatan kali ini saya akan mengulas dengan mudah, bagaimana cara memasang widget tersebut di blog kita.
Banyak sekali kelebihan di gedget ini di yang paling utama adalah memnghemat ruang di tamplate kita. langsung aja bagaimana cara memamasangnya di blog kita.

1. Login ke Blogger


2. Pilih Tata Letak

3. Tambah Gadget

5. Copy Script di bawah ini dan Masukan ke HTML/JavaScript Tersebut

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY3jPl9w1ZKaExlgVuhXTAUk9XRL1V7DRDEOqCMjrxy1f09yC0DB8rIbmg0wXvlrRCrzZABFFjyvyrUh-7a0417VL3LEByk7lLY0x2tbhpDDdMLmvU89KgVJs7KnJLCQfK-fHm2SYo9ckL/') 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">

Pasang Iklan Gratis

<br />

http://kolom-banner.blogspot.com

<br />



Taruh Script ChatBox/ShoutMix Anda Disini



<a href="javascript:showHideGB()">


[Clos]

</a>

</div>



</div>



<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>




Widget by Kang Salman

6.  Jangan Isi Judul

7.  Setelah itu Simpan, dan lihat hasilnya.