Tutorial Blog : Menu Keluar dari Atas

annyeong!!

what??! tuto yg ke 3 ?? laju nya. macam copycat pulak dah. haha. bukan ye. Nua bukan copycat.

lupa pulak. hari tu ada kawan kita tanya kat chatbox macam mana nak buat menu keluar dari atas. macam yang butang tutorial nua ni. cuba la tekan. ajaib tak ajaib.

okok, memandangkan dah tengah malam, Nua pun dah tak de idea sangat ni nak membebel. kita teruskan je dengan tuto kita okeyyyy.

mula²  pegi ke Design > Page Elements > Add a Gadget > HTML/JavaScript
kemudian paste code ni

<div class='widget-content'>
<style type="text/css">
#at{
position:fixed;
right:500px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
opacity:0.9;
border: 1px dashed #666699;
border-radius:13px;
background:url() #BBBBFF repeat-x bottom center scroll ;
-moz-box-shadow: 0 0 17px #666699;
-webkit-box-shadow: 0 0 17px #666699;
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="left">
<div style="background:url(http://img804.imageshack.us/img804/9967/16797812.png) repeat;">



<div style="width: 280px; height: 330px; overflow: auto;">

<b>TAJUK</b>
<br />
► <a href="LINK ENTRI">TAJUK ENTRI</a><br />

</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://img51.imageshack.us/img51/2552/tutup.png" alt="close" title="tutup" /></a></div>
<br /><div align="right"><font size="3"><a href="URL BLOG"><div style="color: #FF0000;">
<span ></span></div></a></font></div>

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

<div style='display:scroll; position:fixed; top:190px; right:3px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" src="http://img806.imageshack.us/img806/2551/lalalaq.png" alt="tr" title="klik untuk tutorial"/></a></div></div></div>

korg tukar la ape yang patut ditukar okey.
code warna : SINI
yang Nua bold kan tu, korg boleh la tukar dengan cara korg sendiri okey??? kalau ade masalah bagitau kat komen tau. ^^