Membuat Shoutmix lebih menarik ( Melayang )

Teman pasti udah pada tau Shoutmix (www.shoutmix.com) kan..,nah yang belum pada tahu..shoutmix adalah widget atau tambahan aplikasi web yang berisi kotak chating yang ditaruh di halaman web atau blog.tapi kali ini kita akan membuat shoutmix melayang di halaman web atau blog Anda. Seperti gambar dibaawah ,,

Nah berikut langkah -langkahnya :
1) log in ke account blogger anda
2) masuk ke tata letek > elemen halaman > tambah gadget > pilih hhtml/java script
3) masukan kode berikut ini ke dalam hml/java script anda
<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/AVvXsEgHIFf0a3UB0fbKpqZ_MdIMHe6rgMrvCSPc9-67r7A-y6-G4KwpgcXUQxfF2BVfBxst7JOYu6kR7_iHsIWEJAnn2uzWyLuIxaJsjsMZjqrsmnv06Q1aouTRH_c4oYLV8a7XS2gKOhVpl900/') 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">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe scrolling="auto" width="160" frameborder="0" src="http://www6.shoutmix.com/?donalsandy" height="400" title="donalsandy">
<a href="http://www6.shoutmix.com/?donalsandy">View shoutbox</a>
</iframe>
<br/><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br/>
<!-- End ShoutMix -->

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

NB:GANTI KODE YANG BERWARNA Orange DENGAN KODE SHOUTMIX ANDA

4) Simpan dan lihat hasilnya

Tweet