slide float widget

ok aq nak share sikit kat korang cara nak buat slide float widget

benda ni bukan saja menarik tapi boleh mengemaskan blog korang tuh taw!

sape2 yang berminat boleh follow step sini ya~ :)

1. Dashboard > Design > Add Gadget > Html/JavaScript

2. Copy and paste kod di bawah , dan paste di ruangan html tadi tu ;)

<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,livestream Facebook,exchange link,banner dll) anda

</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_zTDq3bIscqdYvFKgtlcpmPg3GVKqwZ9hgN1rUhoqj5m-i_3BBNQtWsFjoGV8-OZB0fCJZ6LtLnE_AGBSN9WAxsGzh1rJvwr2RglUgsvmoWJGA5L71xjm1tRokYaIRCZGdQoqBH3dUM/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>

**#000000 korang leh ubah warna..cari kod HTML warna..

**kod (shoutbox,livestream Facebook,exchange link,banner dll) anda

**Pastikan nilai tidak melebihi width: 580px; height: 380px.

3. Da siap . SAVE ! :)

Lepas tuh . korang buat cam ni pulak ...

1. Dashboard > Design > Add Gadget > Html/JavaScript

2. Copy kod di bawah , dan pastekan di ruangan html tadi tuh :

<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="http://s2.kimag.es/share/38953289.png" alt="PUSH" title="KLIK ME"/></a>

</div>

** Yang warna merah tuh , korang boleh tukarkan gambar yang lain oke ?:)

3 . Da siap . SAVE ! :)

=SELAMAT MENCUBA=