Cara membuat Shoutbox sliding

Seperti yang Anda semua ketahui bahwa ada berbagai cara untuk membuat tampilan buku tamu atau shoutmix chat saat terbuka.

Pada tutorial kali ini kita coba membuat tampilan shoutmix chatnya dengan model
sliding.
Berikut ini langkah untuk membuatnya :

1. Rancangan -> Tambah Gadget ->
Pilih HTML/JavaScript.

2. Masukkan ke dalam kontennya
kode berikut ini lalu simpan.

<style type="text/css">
#shout{
position:fixed;
bottom:1px;
left:1px;
z-index:+2000;
}
* html #shout{position:relative;}
.shouttab{
height:45px;
width:30px;
float:right;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaLBlQD1SDu_NGn1gdDnU2CIeFP69MXs814KQ28BtdifREZjpP4KkNuu1J7khT8ihxvKkDRYfD-dcqKzKaicb6kRwNpgGE75swfVt_rsJskEfPT7DWXs3n_q-ChhAVSQ9RtblKjvpDkQ10/s1600/arrayfloat.gif') no-repeat;}
.shoutcontent{
float:right;
border:2px solid #ccc;
background:#FFFFFF;
padding:5px;}
</style>
<script type="text/javascript">
function showHideSHOUT(){
var shout = document.getElementById("shout");
var w = shout.offsetWidth;
shout.opened ? moveSHOUT(20-w, 0) : moveSHOUT(0, 35-w);
shout.opened = !shout.opened;}
function moveSHOUT(x0, xf){
var shout = document.getElementById("shout");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
shout.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveSHOUT("+x+", "+xf+")", 70);}
}
</script>
<div id="shout">
<div class="shouttab" onclick="showHideSHOUT()" title="Show/Hide"> </div>
<div class="shoutcontent">

KODE SHOUTBOX ANDA LETAKKAN DI SINI.

<script type="text/javascript">
var shout = document.getElementById("shout");
shout.style.left = (30-shout.onsetWidth).toString() + "px";
</script></div></div>

KETERANGAN :Masukkan kode buku tamu Anda pada
tempat yang disediakan.