9 April 2011

Sliding Shoutmixt



Assalamualaikum semua!
 Farra ada requestkan Tutorial Kat Shoutmixt Kihah


Dia ask Macam mana nak buat SLIDING SHOUTMIXT. 
 
Macam ni

 

Jom ajarkan!
Before that, Kihah nak creditkan to APIT! for the info!
Semua Kihah COPY dari blog dia! HAHAHA! Jahatkan?
Jom mulakan!

1.Edit layout > Add a gadjet > Html javascript
and sila sila la copy kod kt bawah ni

<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.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onmouseover="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url()#000000 no-repeat;">
<div style="text-align: center;">


URL SHOUTMIX / CBOX


<div align="right"><a href="javascript:void(0);" onclick="showHideAT()">CLOSE</a></div>
<br /><div align="left" float: right;><a href="http://wanhazel.blogspot.com/">by WAN HAZEL</a><div style="color: #FFFFFF;">
<span ></span></div></div>
</div></div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-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://i1180.photobucket.com/albums/x416/Ila_Nabilah/shouthere-blue.png" alt="PUSH" title="KLIK ME" /></a>

</div></div></div></div>

Okay ? da paste ,
Listen
Merah:Boleh tukar jadi dashed , dotted and sebagainya
Orange:Color boleh carik kt sini
Blue:Url shoutmix atau cbox
Purple:Icon shoutbox
Then save !
Klau nk tukar kedudukan dye sila la main koding sendiri :)
author image

FAQIHAH HUSNI

Hi! I'm the writer and author of this webpage. Currently studying in SM Sains Kubang Pasu or know as KUPSIS in Kedah. A Kedahan girl for sure! 2017 is my senior year there and I'm fighting to 9A+ in SPM. Do pray the good result for me and others 1317 warriors. Thank you for your time :)

5 comments:

Budi Bahasa Budaya Kita