Cara Membuat Buku Tamu Melayang Di samping Blog

Kompitech - Pada kesempatan yang baik ini saya akan berbagi tutorial tentang Membuat Buku Tamu Melayang Di samping Blog, mungkin anda termasuk pemilik blog yang ingin menambahkan widget buku tamu seperti di blog saya ini. Mungkin kalian ingin menghemat kolom pada blog kalian agar tidak terpenuhi dengan widget - widget atau aksesoris blog, maka kalian bisa membuat widget buku tamu melayang di samping blog. Lansung saja simak langkah - langkah berikut untuk membuat buku tamu melayang :

1. Daftar untuk mendapatkan script Buku Tamu Anda di Cbox

2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
3. Cari dan pilih HTML/Javascript;

4. Tambahkan script berikut ini :

 <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/AVvXsEj8vKvh_80Cfl6e4-ZE-p3mC7duqTwUGpdHNfBPghU20_BEEeNHFDvWDGdzDGIRruvbCuQl4bnFpSZ_hx1rtPYeW5MULgCnIQzO32yFJyIUqwKbA4Oq4w6U96MRsWXIn5MzKziL2T_sw1vM/') 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">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www6.cbox.ws/box/?boxid=671114&amp;boxtag=xp5f55&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-671114" style="border:#ababab 1px solid;" id="cboxmain6-671114"></iframe></div>
<div><iframe frameborder="0" width="200" height="90" src="http://www6.cbox.ws/box/?boxid=671114&amp;boxtag=xp5f55&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-671114" style="border:#ababab 1px solid;border-top:0px" id="cboxform6-671114"></iframe></div>
</div>
<!-- END CBOX -->

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

</div>

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

5. Klik Tombol Save/Simpan.

Keterangan :

* URL yang berwarna merah ganti dengan script cbox yang anda dapatkan dari Cbox

Screen Shot 

 klik gambar untuk memperbesar

 

Smoga Bermanfaat !!