tutorial: slider shoutbox

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

slider shoutbox ?? tak pernah dengar ea ?? tutor nie adalah aspirasi daripada wan hazel ,,, saya cuma ceduk sikit jea .. hehe ... jom follow tutor nih .. gerek beb !!

1. Dashboard >> design >> add gadget >> HTML / JAVASCRIPT
2. lepastu awak pastekan kod dekat bawahhh ni kat dalam ruangan HTML / JAVASCRIPT tadi !

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

CODE SHOUTBOX KORANG

<div align="right"><a href="javascript:void(0);" onclick="showHideAT()">CLOSE</a></div>
<br /><div align="left" float: right;><a href="URL BLOG KORANG/">by NAMA KORANG</a><div style="color: #FFFFFF;">
<span ></span></div></div>
</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;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:150px; right:5px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://i1119.photobucket.com/albums/k638/muna97/th_shoutbbb.png?t=1300364463" alt="PUSH" title="KLIK ME" /></a>
</div>  

tulisan warna BIRU : awak boleh tukar TOP /BOTTOM / LEFT / RIGHT

top : slider dari atas  .

bottom : slider dari bawah

left : slider dari kiri

right : slider dari kanan


tulisan berwarna : GAMBAR YANG KORANG NAK . :)