Membuat Buku Tamu Melayang

03.46 Cara Membuat Blog No Comments

Buku tamu adalah sebuah widget yang dipasang oleh pemilik blog yang fungsinya bisa untuk chatting atau tanya jawab antar pengunjung dengan pemilih blog, namun buku tamu tersebut akan lebih menarik kalau dipasang melayang diblog kita, selain itu bisa untuk menghemat sidebar, apalagi untuk blog yang banyak pasang iklan tentu widget buku tamu akan memakan tempat pada blog kita, dengan trick buku tamu melayang diblog ini akan dapat menghemat ruang blog sehingga bisa digunakan untuk yang lainnya. lalu bagaimana cara membuat atau memasang sidebar melayang diblog. caranya adalah sbb

• Log in ke blogger sobat
• Masuk ke Rancangan
• Pada elemen halaman pilih tambah gadget atau add gadget
• Pilih HTML/Javascript
• Copy dan Paste Kode dibawah ini kedalam kotak 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('http://lh4.ggpht.com/_HaY2ATEJawU/TLwoL_K8BDI/AAAAAAAAAGo/6X8jrBQ6sig/cooltext473361389.jpg') 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">

Masukan Kode Buku Tamu Disni

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

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

• Setelah itu Klik Simpan

Catatan :
Ubah Masukan kode Buku Tamu sobat disini dengan kode buku tamu sobat