Buku Tamu Nempel di samping dan autohide pada blog

Buku tamu nempel auto hide

Banyak cara untuk mempercantik tampilan blog diantaranya adalah dengan memasang buku tamu.

Dengan menggunakan cbox kita dapat membuat buku tamu tersebut.

Buku tamu ini dipasang secara tersembunyi atau auto hide. Tidak terlihat widget buku tamunya melainkan hanya terlihat tombol bertuliskan Buku Tamu.

Pengunjung yang ingin mengisi buku tamu tersebut harus mengklik tombolnya baru kemudian widget cboxnya akan keluar.

Cara membuat Buku Tamu auto hide yang nempel di samping adalah sebagai berikut :

1. Sign in ke blogger dan silahkan Login dengan Account Anda

2. Pilih Layout/Tata Letak

3. Pilih Page Elemen/Elemen Halaman

4. Klik Add a Gadget/Tambah Gadget

5. Lalu pilih "HTML/JavaScript"



Kemudian Copy-Paste kode di bawah 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('http://sites.google.com/site/brugkembar/sc/bukutmbg.png')

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 ShoutMix - http://www.shoutmix.com -->

<iframe title="dadihidayat44" src="http://www5.shoutmix.com/?dadihidayat44" width="260" height="400" frameborder="0" scrolling="auto">

<a href="http://www5.shoutmix.com/?dadihidayat44">View shoutbox</a>

</iframe>

<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />

<!-- End ShoutMix -->

<br/>

Anda berminat buat Buku Tamu seperti ini?<br/>

Klik di <a href="http://www.monoton.co.cc/2011/05/buku-tamu-nempel-di-samping-dan.html"> sini </a>

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

CATATAN :

1. Ganti tulisan yang berwarna merah dengan kode yang anda peroleh dari Cbox.
2. Tombol Buku Tamu dapat anda ganti sesuka hati dengan terlebih dahulu merancangnya di Photoshop atau di CorelDraw, setelah itu upload di hosting image seperti photobucket dsb. lalu ambil URLnya dan pasang di background.

Itulah beberapa langkah untuk membuat buku tamu yang nempel di samping dan tersembunyi (auto hide)
semoga bermanfaat dan sukses ya...