Membuat shoutmix melayang di samping

kadang kita merasa kalo blog kita terlihat sumpek, mampet, pokonya penuh dengan widget sehingga ngga ada lahan yang cukup lagi untuk menaruh buku tamu atau widget shoutmix.
tapi santai aja sobat, karena sobat bisa mengakalinya dengan menjadikan widget shoutmix bersembunyi di samping. mau tau jawabannya ? Oke langsung aja kita caw... :D

masuk ke akun blogger pilih tata letak > Elemen Laman.
Klik add gadget > trus pilih HTML/Java script.
Copy paste kode di bawah ini > trus simpan.

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/AVvXsEhx8r8GXUhdUnnDYezifXuj4ZSjMYja5m3w5kpAWgFfEMqw586QfJbqXOTdu6KtgJCf09xvwkjhyphenhyphenMm7g_qP-U-C4sNdRmg32EzqAkHWa57gUbzcr0jWj-tL3VodJs0OqU0MAdJ1mrARFPsg/') 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">
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Close]
</a>
</div>

<iframe title="kokobota" src="http://www5.shoutmix.com/?kokobota" width="475" height="400" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?kokobota">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/>

<div style="text-align:right; font-size:10px">
Dapatkan Buku Tamu Seperti Ini di
</div>
<div style="text-align:right; font-size:10px">
<a href="http://sevenfrogz.blogspot.com/">
sevenfrogz.com</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Untuk kode yang berwarna merah silahkan ganti dengan shoutmix kode sobat.

Selamat mencoba !