Membuat Shoutbox melayang muncul dari sisi layar blog anda

Sidebar sudah penuh dengan Widget tapi shoutbox belum terpasang,nich solusinya.dengan shoutbox melayang ini sobt tetep bisa pasang shoutbox.selain itu juga dapat mempercantik tampilan blog sobat. jadi kalau kita ingin menggunakan shoutbox itu kita tinggal klik gambar PESAN tersebut ,maka shoutbox akan muncul dan bisa digunakan seharusnya.
untuk contohnya bisa dilihat disamping kanan blog saya ini.

menarik bukan...??

OK, Langsung saja menuju target utama. . .
Untuk membuat shoutbox berikut penjelasannya :
1.Login blogger
2.Rancangan, Elemen laman, Tambah gadget, pilih Html/Java script
3.Lalu simpan kode berikut :


<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/AVvXsEi6RdH9b6sUOFHHHvw3vUbZh8DucR6hUaF7fhZ1x2new5poiobI6t3ZkdyqO6yN1xrDyBPATZrGC3cff6O_e-ZGcdMKPqtcdEjLEqqMkIAnCRQsiltauWotI1pyPeBbZA7T7EEGSwi8ohCf/') 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">

<!-- Ganti ini dengan kode buku tamu kamu -->

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



yang berwarna biru silankan ubah sesuai dengan keinginan...

Simpan...

jika belum mempunyai kode bisa klik disini untuk mendapatkannya..