Cara Membuat chatBox atau shoutmix Berada di samping

Chatbox atau shoutmix adalah widget terpopuler bagi sebagian besar blogger. Tips dan triks blog yang akan kita bahas kali ini adalah bagaimana cara Membuat chatBox atau shoutmix Berada di samping blog kita.

Cara membuatnya sobat bisa mengikuti langkah-langkah sederhana berikut :

1. Sobat harus memiliki code chatbox atau shoumix terlebih dahulu, baca cara membuat chatbox disini.

2. Sobat login ke dashboard blogger.com --> Rancangan --> add gadget --> pilih yang 'HTML/JavaScript'

3. Copy Code berikut :

* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i683.photobucket.com/albums/vv193/vebyo/Guest3.gif') 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">
PASANG SCRIPT CHATBOX SOBAT DISINI
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Keterangan :

Sobat ganti PASANG SCRIPT CHATBOX SOBAT DISINI dengan script chatbox sobat.

 

4. Save, lihat hasilnya.