ask0m k0runk..cmne..sehad..haa~na taw cmna na bwd ny..ik0t jew cra dibwh.. :D

Jum Tutorial..
Wan akan mudahkan Tutorial untuk korang faham..


Dashboard>Add gadget>HTML
gadget paling Bawah ..

law dah..Copy and paste kod nie dalam Gadget HTML korang tu..

<div style='display:scroll; position:fixed; top:10px; right:10px;'>
<a class='linkopacity' href='http://wanhazel.blogspot.com/2011/05/tutorial-slide-float-shoutbox-with-cute.html' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Get Slide Float Shoutbox'><img border="0" src="http://i1009.photobucket.com/albums/af215/wanhazel252909/iconlink.gif" /></a><br />
<a href="javascript:void(0);"onclick="showHideAT()"/><img class= width="140" height="140"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOacmjwlAiT9OBpajtjDwKGYPjeIFYQk_Oe2DF0SQafFJfIcwQQJ9ezWmBQu53SfHXmGxH1k46-_BJOIHKpZtFfcuIOza_DiFt1TQlCttCHb3r32VpfNVYOoPV5_7IjSPq4tx_vfCW-Cqx/s1600/icon+shout.png" alt="Shoutbox" title="Shoutbox" /></a>

</div>

<style type="text/css">
#at{
position:fixed;


top:0;
;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}


.atcontent{
float:right;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLdpHN3ft_mMYXrzXstR9CFopIJ1DkDMvMvc2RROWKSkMStGpBoqmjJcv0iW9Plc7wSmLsKCfXUzG6DwtF2SOIdWZ5jv02tdlkBAlj7L1GZoPr6Wum_FW8klC9q-cMQyLiaAeiOftTTs8/s1600/kak+yana+shout+frame+copy.png) no-repeat 0 0 transparent;
width:800px;
height:460px;center scroll ;


padding:56px 0 20px 5px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">



<br /><br /><br /><br /><br /><br />


Masukkan Shoutbox korang denagn lebar 270 dan tinggi 280


<center><div id="author"><a href="javascript:void(0);" onclick="showHideAT()"><input type="button" value="Close" class="close" />
</a></div>
</center></div>
</div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></div></div>

Lepas korang copy kod tu..Korang masukkan kod Shoutbox korang k..Dekat bahgian yang Wan ada tulis tu


Masukkan Shoutbox korang denagn lebar 270 dan tinggi 280
.

Dan law korang nak Ubah Frame untuk Slide Shoutbox korang nie..Korang ubah kod yang nie..

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLdpHN3ft_mMYXrzXstR9CFopIJ1DkDMvMvc2RROWKSkMStGpBoqmjJcv0iW9Plc7wSmLsKCfXUzG6DwtF2SOIdWZ5jv02tdlkBAlj7L1GZoPr6Wum_FW8klC9q-cMQyLiaAeiOftTTs8/s1600/kak+yana+shout+frame+copy.png
.

Dan law korang nak ubah Icon Slide Shout korang nie lak..Korang ubah kod nie..

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOacmjwlAiT9OBpajtjDwKGYPjeIFYQk_Oe2DF0SQafFJfIcwQQJ9ezWmBQu53SfHXmGxH1k46-_BJOIHKpZtFfcuIOza_DiFt1TQlCttCHb3r32VpfNVYOoPV5_7IjSPq4tx_vfCW-Cqx/s1600/icon+shout.png
.

Dan selesai..Senang kan..Kat Bawah nie Wan bagi percuma Frame Shout..So korang leh guna lah..Frame yang kat dalam Kod kat atas tu frame dia sebijik macam gambar kat atas skali tu..Yang kat bawah nie untuk korang tukar tukar Frame..ehehhe.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghUexUS-aVw5PG-7jyYtezJ3ZXb2AuXDqUdjzlywniPHdFfpVg8EbIXaPyPgYgwOF5Vi80Qf0fmftRq47ObNRbX2WEt6apMJ6HGQotpFPR-fjIfe72PfqURom5bOBDEiq0DN-nrTmHn350/s1600/wan+shout+frame.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOk7lPrMzz1x1WF23NHOWR0jToJUkujXRw_0r5PwAnU8bM42-c72lbDTWATTrd38Fu2lV_cWXTSq_H4XmggRNkwbmfSZDDODgcslWc_WSZR8bskDHzANHp2upJtXj0qyusPyw-xNXQqbKN/s1600/wan+shout+frame1.png

Ok tu je..

so Perbezaan Slide and Ajax Shoutbox cuma cara dia keluar je kan..hehehe..


K lah korang..
Selamat mencuba..save dlu...n preview..bbye..