buat slide shoutbox

Mesti ramai dah tahu kan tutorial ni, tapi izzat nak kogsi jugak sebab mungkin ada blogger newbie yang masih lagi tak tahu nak buat camne.

Jom mula tutorial;

1. Dashboard > Design > Add Gadget > HTML/JavaScript

2. copy paste code kat bawah dalam kotak gadget tadi

<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/AVvXsEhXOekYBLDANf_KC7-xAKlGC87qAD6xiv1shz96RahuuDR-m4CgPxfyuxhHEZ1Hzay-U41RcN78LxHYp9KEmIOj-pIsnSDkyHpB2eGE_LLBFuEL1DPXkKpI0iy9kE4JRNLmbOKv47apPoxB/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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">
CODE SHOUTBOX KORANG KAT SINI
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

3. Save

Merah: yang tu korang tukar la dengan URL gambar yang korang nak.

Oren: boleh tukar ikut kehendak sendiri.

Kelabu: code shout box korang.