Cara Buat Buku Tamu Berada Disamping Blog

1. Login ke Blogger sobat.

2. Klik Rancangan/tata letak/layout.

3. Klik tambah gadget/add gadget.

4. Pilih HTML/javascript.

5. Copy paste kode di bawah ini.

<style type="text/css">#gb{

position:fixed;

top:25px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:150px;

width:30px;

float:left;

cursor:pointer;

background:url('http://farm3.static.flickr.com/2771/4442306534_c1431ea4ce_o.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #1300F2;

background:#FFFFFF;

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

MASUKAN KODE BUKU TAMU DISINI

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

</a></div>

<div style="text-align:right; font-size:xx-small;">Cara Buat Buku Tamu <a href="http://klinik-it.blogspot.com/2010/03/cara-buat-buku-tamu-berada-disamping.html" target="blank">disini</a><br/><br/> widget by <a href="http://www.klinik-it.blogspot.com" target="blank"> Klinik-it</a>

</div>

</div>

<script type="text/javascript">

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

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

</script>

6. Hapus tulisan masukkan kode buku tamu disini yang di stabillo dan ganti dengan kode buku tamu atau shoutmix blog kamu.
7. Klik Simpan dan lihat hasilnya.

Selamat Mencoba.............. Semoga Berhasil......................

Posted in: Tutorial Blog

You Might Also Like: