Saturday, July 30, 2011

Tutorial : Slide Float Image

Assalamualaikum ...

sebenarnya, ni sambungan dari tutorial yang lepas. ada yang tanya, macam mana nak hide Exchange Link tu, sebab bende tu agak menyemak bile dah ramai orang tinggalkan link kat situ. oke. sebenarnya, bende ni lebih kurang macam hide shoutbox tu jugak. tak pe. saya akan tolong budak yang baru belajar oke :)

1. Log In > Dashboard > Design > Add a Gadget > Html/JavaScript

2. Copy code dibawah


<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #ff0000;
background:url() #000000 repeat-x bottom center scroll ;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</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;">

kod Shoutbox, Facebook, Exchange Link, Banner dan lain-lain


</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://3.bp.blogspot.com/_LhHZAifMoFE/TN6myUsdsZI/AAAAAAAAC-Q/VqSys0LrD3o/s1600/close_button.gif" alt="close" title="Close" /></a></div>
<br><div align="right"><font size="3"><a href="http://wanhazel.blogspot.com/"><div style="color: #FF0000;">
<span ></span></div></a></font></div>
</div></div></div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></center>

warna purple (warna background), hijau (warna border): korang boleh tukar warna kat sini
warna kuning : masukkan kod exchange link, banner, facebook and whateverlah.

3. korang save je dulu.
4. untuk float image pulak, korang copy code kat bawah :

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;F
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:220px; right:-0px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="180" height="180"src="URL GAMBAR KORANG" alt="PUSH" title="Exchange Link Here"/></a>

</div>

untuk warna kuning : korang letak lah gambar apa yang korang suka.

then, save.

aku mintak sangat, untuk bagi feedback dengan tutorial ni. sebab, takut tak menjadi. ape pun ...

GOOD LUCK :)

daa readers

miyra :) smile alwayz !!

No comments:

Related Posts Plugin for WordPress, Blogger...