Tips Cara Membut Buku Tamu Melayang

Langsung saja ya bagaimana cara buat buku tamu melayang seperti blog ini ( untuk pengunjung setia Tips & Trik ™ ) heheheh .

1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML / Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini ... 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:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDwDdBA6do1GsbYgOk0luVoPObRFsMSRnFucorA5g8QXkrorsiPOCtgJeKgbuCY-hczTrqkABYAscMPbT1LrYN4LcLiB97DtXcYG7dFrqZFjBqZr0cHLR_M1zuKd_KfulQowyvNipcZWDq/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#000000;
padding:2px;
}
</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"><!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="150" height="225" src="http://www3.cbox.ws/box/?boxid=3368349&amp;boxtag=8wewq&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3368349" style="border:#FFFFFF 1px solid;" id="cboxmain3-3368349"></iframe></div>
<div><iframe frameborder="0" width="150" height="75" src="http://www3.cbox.ws/box/?boxid=3368349&amp;boxtag=8wewq&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform3-3368349" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform3-3368349"></iframe></div>
</div>
<!-- END CBOX --><br/>
<div style="text-align:right">
<a href="javascript:showHideGB()">
-- X Close --
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan :

Merah = Gantilah dengan kode Scripts Widget yang akan kamu tampilkan Misalnya kode Scripts Widget Shoutmix .. ( disini saya menggunakan cbox onya sendiri ) hehehe .
Biru = Gantilah dengan URL Gambar Tab kamu  (atau pakai saja url gambar tab diatas tadi ) .. Gambarnya bisa kamu buat dengan Program seperti Photoshop.. lalu kamu Upload / simpan gambar tsb di Photobucket / image hosting lainnya ..baru kamu bisa mendapat kode url Direct Link gambar tadi ..

.gbtab{ = Ini kode scripts untuk pengaturan tampilan gambar tab

Orange
gbcontent = Ini kode scripts untuk mengatur tampilan kontennya
float:left; = Ini utk mengatur posisi widgetnya melayang di kiri / kanan / atas / bawah
border:2px solid #FAFD02; = Memberi warna pada border konten...aturlah / ubahlah warnanya jika mau.. misalnya 7F7F7F / warna abu - abu (sebaiknya gunakan pencari kode warna Photoshop)
background:#FAFD03; = Memberi warna pada isi konten.. disini saya menggunakan warna kuning
 
Simpanlah Widget Melayang ini... Selesai..
 
namun sebaiknya posisi widgetnya di Bagian Tata letak di letakan paling bawah lalu klik simpan ... 

Untuk melihat hasilnya silahkan Refresh blog kamu ...


Sekian informasi dari saya, semoga bermanfaat ....