Cara Membuat Widget / Buku Tamu Melayang + Animasi

Buku tamu itu merupakan hal yang penting dalam blog
dikarenakan disinilah para blogger saling menyapa dan memberikan pendapatnya mengenai blog kita... nahh,,,sekarang anda ga perlu lagi susah susah tuk buat buku tamu yang melayang-layangbuat di blog anda...
Sekarang langsung aja ya ke TkP....
1.Kita Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts...
2.Lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...

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

.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('

http://i466.photobucket.com/albums/rr22/wong284/GuestBook.png

') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FFFFFF;
background:#FAFD03;
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">

PASTE KODE BUKU TAMU DISINI YAA...

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

3. Simpan deh....gampang kan....!!

Keterangan :
Gantilah "PASTE KODE BUKU TAMU DISINI" dengan kode Scripts Widget Buku Tamu yang akan anda tampilkan Misalnya kode Scripts Widget Shoutmix..

Untuk animasinya nih sekarang...!!
Tenang aja...Udah saya siapin....hohohohooo....!!
Nih macam-macam karya INIITU (photoshop) buat anda-anda sekalian....!!
Tinggal pilih yang sesuai selera anda... Atau ada yang mau pesan warna lain ??? heeeheehe (saya amatiran bergaya sekali)
Ganti Kode yang berwarna MERAH dengan



http://i1180.photobucket.com/albums/x416/temmy3/biru-gerak.gif


http://i1180.photobucket.com/albums/x416/temmy3/coklat-gerak.gif


http://i1180.photobucket.com/albums/x416/temmy3/hijau-gerak.gif



http://i1180.photobucket.com/albums/x416/temmy3/merah-gerak.gif


http://i1180.photobucket.com/albums/x416/temmy3/pink-gerak.gif


http://i1180.photobucket.com/albums/x416/temmy3/ungu-gerak.gif


http://i1180.photobucket.com/albums/x416/temmy3/hitam-gerak.gif

Gimana ????
Selamat mencoba dulu aja dehh........!!!
Salam....iniitu blogspot...

Ehemz...Jadilah orang pertama di antara teman-teman yang menyukai ini....heehe