07 March 2011

tutorial shoutbox slide down !

okay hari ni aku nak buat tutorial . act aku mmg tak penah buat tuto . tuto ni pun aku buat sbb ramai sgt request , kang tak buat kata apa pulak kan . aku reka sendiri shoutbox ni okay :P sesapa yg nak copy tuto ni must credit by me :P ceh sapa copy tanpa kebenaran wa sepak lu lajulaju xd okay takmau cite panjang . 
here we go~~


1 . Dashboard-Design-Page Element-Add Gadget-HTML/JAVASCRIPT 


2 . Copy code yg kat bawah ni then paste dekat HTML/JAVASCRIPT
    [ haa , amek add gadget yg dekat paling bawah sekali tau ! ]



<center><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:15px dotted #4c1130;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;">


code shoutmix korang




</div></div>
<br /><div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://www.company-wizard.co.uk/images/reports/icon-cross-x.gif" alt="close" title="Close" /></a></div><br /></div></div>

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



<style type='text/css'>a.linkopacity img {filter:alpha(opacity=50);-moz-opacity: 0.5;Fopacity: 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 src="http://th623.photobucket.com/albums/tt312/Auumau/Icons/th_0018.gif" border="0" /></a> </div></center> 
<center></center>


*yg bergaris tuh korang boleh tukar ikut suka korang*
*yg colour kuning tuh gamba yg korang nak letak untuk shoutbox tu*
*yg merah tuh gamba yg korang nak letak untuk button close*


3 . Save !


4 . Kalau dah tak jd let me noe okay !


5 . Tekan lah button like tu ! :P
http://themyraamyghah.blogspot.com ♫♫