Tutorial - Slide Shoutbox [swap]

 Assalammualaikum,

Hye semua Bloggerians! Admin KillerKips di sini...

Bagi yang baru saje follow Bloggeria! ,
leh bace 1st entry dari kami -> [WELCOME TO BLOGGERIA!]


Kali ni Killer nk ajar buat Slide Shoutbox. Beza shoutbox yg ni ialah bila korang tgok gamba tu biasa je tp bila korang hover pointer kt gamba tu, tetibe dia swap jd gambar yg len... Puas Killer cari koding ni, tp xjumpa, Kod yg ni pun Killer pull dari blog wan@admin , hihihi. Jgn mara ye Wan, mintak xnk bagi, hahahaha. Kalau korang nk tengok contoh, g blog dia taw, jgn lupa follow. [wan, killer siap promote blog wan lg taw] . xpun tngok kt screen korang sebelah kanan tu.




<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://the-bloggeria.blogspot.com/2012/02/tutorial-slide-shoutbox-swap.html' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Get This'><img border="0" src="http://i1153.photobucket.com/albums/p506/KillerKips_Ofcl/icon-1.png" /></a><br />

<a href="javascript:void(0);"onclick="showHideAT()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SHout','','http://2.bp.blogspot.com/-3kHKyRUc_ZM/TkdSg9OhC6I/AAAAAAAAH6Q/GiCeUPqfgJQ/s1600/b.png',1)"><img src="http://4.bp.blogspot.com/-hrldhDSQShw/TkdSZ1gHtdI/AAAAAAAAH6I/gdus48XBONs/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(http://3.bp.blogspot.com/-vA5ssdIzofI/TkdSnj7H7qI/AAAAAAAAH6Y/5l_JgSF66o0/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



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



Tak perlu ubah url ni. Kalau nak ubah, guna gamba sendiri lah, hihi
URL yg warna merah tu, URL gamba apabila korang hover pointer
URL yg warna oren pulak, URL gamba sebelum korang hover pointer korang
URL yg warna biru, tu background ShoutBox korang

Korang, senang je la, kalo ade prob, cam bese, contact kami atau pergi ke blog Killer

0 comments:

Free Auto Malaysia Backlinks Free Auto Malaysia Backlinks Free Auto Backlinks Free Autom Backlink Generator Free Backlinks Kedai Backlink,Backlink Percuma Free Auto Backlinks