tutorial slide icon shoutbox swap edisi comel

adoi..sakit tekak,demam batuk2 tak hilang lagi nih!

spm fever barangkali hehehe...

apa2 pun doakan eiyqa dapat keputusan yang cermelang dalam spm ya,ameen...

result keluar bulan3 ni,sure gempak gile!

dalam gelisah ada rindu..

yela semenjak dah habis sekolah ni susah betul nak jumpa my wink2...

biasalah cinta jarak jauh...kau di terengganu aku di pahang muahahaha!

merapu2~

hari ni eiyqa jalan2 di facebook inbox

wow!ramai betul request yang minta eiyqa buatkan tutorial ni...

korang tak faham apa slide icon shoutbox swap?

ala..yang macam shoutbox eiyqa ni..

menarik bukan??

ok dengan lafaz bismillah jom ikut tuto ni!

step by step dengan muka ada senyum ya!chill~~ :))

1)Dashboard>Design>Add Gadget>HTML 

2)copy and paste kan code dibawah

<div style='display:scroll; position:fixed; top:30px; right:0px;'><div class='clear'></div>
<div class='widget html' id='html1'>
<div class='widget-content'>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<a class='linkopacity' href=' http://eiyqa-contenganjalanan.blogspot.com/2012/02/tutorial-slide-icon-shoutbox-swap-edisi.html ' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Get This'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0LOzQUzuGMnZXeZoNe9YTsjsjxtC8phKT9xaLPMqy4IwRZbHQ-JlM7WSPB0LlG00Iz_ZEHhXEyVSnMm1QxXMBRzQCFn0IJ8oWWYrfCXaOUT8UoL-yhFsarBCnSEbf6RPMs45W4XiglD8/s1600/iconlink.gif" /></a><br />
<a href="javascript:void(0);"onclick="showHideAT()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SHout','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizXinV0Ff7-EGf5jLx0YncyPtOLcAxKsxwwwJ8IlQLJET3UwtF3a9TFwvLiIJJ_pZh4F2MCdliW2v_2JvJqx2IUXb1mOL8OMzlwNKMzIR5T5H5O0K-L4qmKnUy4wLU3Sr7NEh8_O5cTzU/s1600/b.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLbxfaVyV7dk6MZBaGOiws06z1jLXA8GXAICwYaa_Z8htKbR70WB0GtBH8dBubTe9r9woDhyECN3Nb6qZFAbbCtzP8R8jrYWMnAc5_AiM3wH72sHm9qm9z5jdeWyLiltdH-Ex51sIODwA/s1600/a.png" alt="SHout" name="SHout" width="140" height="140" border="0" /></a>
<div class='clear'></div></div>




</div></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/AVvXsEgPzvXL0S8FBbfzbhFzouQ4MFq5zaVn5cAk6sKAcOCgZnBvYzjWeZmZ0x6Pst-rC_F8w_8yzYw740L17p8lufYZzx8XfH0hrE7NZvAFMbovDCdtbX0a34IozsgvZPaLbpiiuVwWZ7MP2KQ/s1600/c.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 />


KOD SHOUT KORANG...WIDTH:240 dan HEIGHT: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></div> 

dah siap syg?ok dengan segera save and preview!!

selamat mencuba! :))