TUTORIAL BLOG - Membuat Slide Float Untuk Shout Box

 salam bloggers kawan-kawan..
hari ini aku nak siapkan request seorang blogger baru..
dah lama dah dia request cuma aku  tak sempat buatkan..
sibuk....apa yang dia requestkan?
bagaimana nak buat kotak shout kat tepi..
oo macam belog aku kat tepi tue....so tunggu apa lagi..
mari kita belajar okay!

1. Log In > Dashboard > Design > Add A Gadget > HTML/Java Script
2. Copy Code di bawah ini dan Pastekan dalam HTML/JavaScript..


<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://wanhazel.blogspot.com/2011/08/tutorial-slide-shoutbox-icon-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/AVvXsEhL8bq2d1pBGkNMu17ijadWA1TeY-ReTX6r3xYF8o5KoR5Yew1e6x9ELT1Ohois08X_hZpXR5EuV9Xla9VdUSSrjrEwRelmOYJW4ujhpUaUNvYWaOBUEn-vbKoUaDZDpCNwTin68b3fGx0/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/AVvXsEgPVAnzkq_Zv8wXX5kVVdob5oz5I8SQP8iPMGEX6BYh1rpsXSWxxy12n_rY2sz2wtbpphd24Srcjho6Hlcu8ezo_Xa9EGqpDaBL18ZMYEuoZvYvsczNJUAOVWJoHmn3yPZWU2XIkEWXnXo/s1600/b.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_R7LvHfLhGQPKJwoDDl4vR_cATYvMBr_Og1MunLypSgffKrAYoCFUl7AQWOt-nucT7JodrG2lbuXSExmoKEgIHM-nJM1uTDlJvoQddmrmDrt3NcuXlzLlcYzqGf_xTUIWoAWI3LV0G6c/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/AVvXsEinDt9TEm5hoshM0qnD20Bs_X2iEuIkaw-fTn_4QDieY_67BkA8BbNJ-xgaZhtUKnd9HqwKcacg7hUPXQMM7CLGsWD1YTnltPByI2-cKEJ6Oz1YvyxNJpzPs4CH_bErgzwYEMCp0-jv1tA/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 />


<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="240" height="200" src="http://www6.cbox.ws/box/?boxid=589760&amp;boxtag=mvgh52&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-589760" style="border:#EDDEDB 1px solid;" id="cboxmain6-589760"></iframe></div>
<div><iframe frameborder="0" width="240" height="75" src="http://www6.cbox.ws/box/?boxid=589760&amp;boxtag=mvgh52&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-589760" style="border:#EDDEDB 1px solid;border-top:0px" id="cboxform6-589760"></iframe></div>
</div>
<!-- END CBOX -->


<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>

---

TERIMA KASIH SUDI BACA DAN KOMEN

---