Cara Memasang Chatbox Melayang

Untuk menghemat tempat dan menampilkan sesuatu yang atraktif, kita bisa memasang shoutbox melayang. Jadi nantinya akan ada button "Buku Tamu" disebelah kanan layar komputer anda dan bila diklik, akan muncul shoutboxnya. Menarik kan ?

 "Buku Tamu" diklik:

Chatbox muncul setelah  "Buku Tamu" diklik:

Untuk cara memasangnya, lakukan langkah-langkah ini:

1. Login ke blogspot.com
2. Klik: Rancangan => Tambah Gadget => HTML/Java Script
3. Masukkan kode dibawah ini ke HTML/Java Script

<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/AVvXsEi7iGZEvW8MH-0ePJuJZ1GVjItp2TDmv1mvInublVmfHxHEjTq-tyyxySKuTaU5r2pNsq-rbLiRBQFpwhuUAeAl_Guc9GRaVu5AXlIVNBC3NQxZvhyphenhyphena5Le1H7S7tKuY7GCos13kSrJ_YZHO/') 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">

KODE SHOUTBOX

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Keterangan: tulisan KODE SHOUTBOX diganti dengan kode shoutbox milik anda

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest