Cara Membuat Buku Tamu Auto Hide Pada Blog

Agar blog kelihatan ringkas dan rapi, tambah simple kebanyakan blogger lebih suka menaruh buku tamunya dengan cara auto hide yang diletakkan di atas sebelah kanan atau kiri blog. Cara register atau membuat Cbox buku tamu free/gratis inilah link nya Cbox Chat. Cara membuat buku tamu auto hide pada blog aku akan tuliskan tutorialnya saat ini. Caranya hanya perlu menambahkan gadget pada tata letak > tambahkan gadget > pilih HTML/JavaSsript dan memasukkan kode di bawah ini:

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}* html #gb{position:relative;}

.gbtab{

height:150px;

width:50px;

float:left;

background:url('http://i1243.photobucket.com/albums/gg546/alice4ja/cb2_zps237d4cae.png') no-repeat;

}

.gbcontent {

float:left;

border:1px solid #000000;

-moz-border-radius-bottomleft:5px;

-webkit-border-radius-bottomleft:5px;

-o-border-radius-bottomleft:5px;

-khtml-border-radius-bottomleft:5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-topleft: 5px;

background: #F2F2F2; url() no-repeat bottom;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

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

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);

gb.opened = !gb.opened;

}function moveGB(x0, xf){

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

var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}

}</script>

<div id="gb">

<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">

<center>

LETAK CODE CBOX ANDA DISINI

<br />

<script type="text/javascript">

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

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

</script>

</center></div></div>

Kalau code c-box/kode buku tamunya sudah diisi di bagian yang aku tandai dengan warna merah, simpan dan lihat hasilnya. Yang aku tandai dengan warna pink itu url image/gambar buku tamunya, bisa juga meng-copy kode di bawah ini:

http://i1243.photobucket.com/albums/gg546/alice4ja/cb1_zps11cba48a.png

http://i1243.photobucket.com/albums/gg546/alice4ja/cb3_zpsde86b736.png

Itulah Cara Membuat Buku Tamu Auto Hide Pada Blog, selamat mencoba.

Share :