Cara Membuat CBox / Buku Tamu di Samping Blog

 
Kali ini saya akan share yaitu CBox atau biasanya disebut dengan Buku Tamu bukan  yang  sering kali kita lihat di area widget pada blog, Namun CBox yang akan saya Share yaitu CBox yang tepatnya  berada di posisi samping blog sobat.....

ikuti langkah-langkahnya....!!!!

• Seperti biasa Log in ke Blogger anda [klik] disini.
• Pilih Tata Letak/Layout.
• Pada halaman Page Element/Elemen Laman.
• [Klik] Add a Gadget.
• Pilih HTML/Javascript.
• Copy code di bawah ini dan paste ke dalam HTML/Javascript tersebut.

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:200px;

width:30px;

float:left;

cursor:pointer;

background:url('http://th387.photobucket.com/albums/oo318/cem_ply/th_buku-tamu_03.gif') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #F5F5F5;

background:#000000;

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">

 

Ganti dengan script CBOX sobat

<br/>

<a href="http://forantum.blogspot.com">.

</a>

<div style="text-align:right">

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

[Hide]

</a>

</div>

</div>

</div>

<script type="text/javascript">

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

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

</script>