Cara Membuat Buku Tamu Melayang di Blog

Halo sobat Hafizh khususnya bagi yang punya blogger nih.

Oke, Posting Malam ini Hafizh akan memposting tentang cara membuat buku tamu melayang di blog. Membuat buku tamu itu penting, soalnya di situlah tempat pemilik blog sama pengunjungnya berinteraksi dan saling berbagi. Untuk mempermudah di lihat oleh pengunjung dan pemilik nya serta mempermudah loading blog maka Hafizh akan berbagi pada sobat semua bagaimana  cara membuat buku tamu melayang di blog. Cekidot Step by step:

1. Daftar ke Cbox

2. Login ke Blogger

3. Pilih ke menu Tata Letak

4. Tambah Gadget - pilih HTML / Javascript

5. Copy Paste Code di bawah Ini

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

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-KdK8p-Ek6aE/TxOLJmt9XeI/AAAAAAAAAgY/r-6cSk_lbts/s1600/bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:3px solid #000000;
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">

[PASTE KODE BUKU TAMU SOBAT DI SINI]

<div style="text-align:right">
<a href="http://hafizhalfurqon.blogspot.com">
[Free ShoutMix]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

6. kemudian simpan - SELESAI

Sekarang bisa di cek gimana tampilanya.. semoga membantu

Posted in: Blogging