Cara Membuat Shoutbox/Bukutamu Melayang

 
Bacaunik ~ Cara Membuat Shoutbox/Bukutamu Melayang, Apakah kamu punya blog dan mempunyai bukutamu untuk diisi para blogger yang lain untuk menandai blog mereka dan bwerharap kamu mengunjungi blog mereka juga? Tapi disini masalahnya apakah blog kamu masih punya lahan yang leluasa untuk meletakkana bukau tamu itu? kalau tidak, saya ada solusinya. Ya, blogku yang satu ini juga mengguankan fitur ini. Silakan lihat samping kanan blog ini yang berwarna hijau, nanti hasinya akan seperti itu.
Ini Cara Membuat Shoutbox/Bukutamu Melayang:

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb2wIDfQx_k37uVAtmDiSexz8RS0TdNMuPrSTyiXMMO5fcZ-WbDXjPXrGiW0H4ceUUamnnXnbe_TIHwJSDrjHbZj7cL85uQZzW-P6OSPBnZ6kr_ZRNRdumf1U_fmVKX39L9F_9GgWA5cHq/') 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">

LETAKKAN KODE SHOUTBOX/BUKUTAMU KAMU DISINI!

<br/>
Tertarik dengan buku tamu diatas?<br/>
<a href="http://bacaunik.blogspot.com/2011/11/cara-membuat-shoutboxbukutamu-melayang.html">Klik disini</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 :

Ganti tulisan yang berwarna merah dengan kode bukutamu kamu

Icon Buku Tamu dapat anda ganti sesuka hati dengan image kamu sendiri yang telah kamu upload di hosting image seperti photobucket dsb. lalu ambil URLnya dan pasang di background.

Selamat Mencoba :D