tutorial #16 :Sliding shoutbox like me

Okay ,malas nak cer panjang2 .Apit tahu korang berminat nk pakai shoutbox mcam apit kan ?Shoutbox jenis slide neh laju , x lembab , kihkih , Sorry ajax float shoutbox , apit da madukan ko ,kihkih .Kepada sesiapa yg masih x tahu lg sliding shoutbox tu ape ,sila tngok gmbar yg telah diprint screen pakai sofware photoscape .Slide shoutbox nehh wan hazel yg buat . By the way ,scha yg request ,

(Saje nak tunjuk header baru yg zuai buat)
Okay jom mula ,
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 !
Eeiits !Belum lg laa ,
Kemudian sila click Like kt bawah nehh , :face52: . Kihkih
Klau nk tukar kedudukan dye sila la main koding sendiri :)

20 comments:

Ra said...

Thankss ;)

Apit said...

@~Sarah Bieber~ welcome sarah :)

mitsuie lee said...

apit nice tuto bahh :] thanks btw

Shin Soo Mi said...

apit, cam mana nak bagi shoutbox tu slide dari atas cam apit punya, mia punya dia slide dari bawah, best lagi kalau slide dari atas.. Hoho, cam mana nak ubah kodnya

Apit said...

@Mia Potter Hee . tngok sini
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);}

carik kod ni and tukar kn bottom menjadi top :) selamat mencuba

Apit said...

@mitsuie lee Hehe , thanks bahh :)

Unknown said...

thanks ! :]

Daya The Sixth ! said...

Tengkiu Banyak2 ..Gumawo Unnie (!) :)

Anonymous said...

Tengs for the tutu ;)

husna_atiqah said...

jadi..cuma kenapa tak ada tempat untuk nak tulis msg pun??huhu

scha vella said...

apit..kalau kita dah guna follower hidden slide pastu kita guna nk guna shoutbox sliding nie xboleh kenape??? saya dh byk kali try tpi still x boleh
jawab dkt shoutbox oke.. thanks=D

ale's said...

abg apit, nice tuto laa :D

ieda =.= said...

yes!! i got it!! thanks apit ^_^

Yeen said...

Apit!thanks sgad utk tuto neh, pneng crik merate tempat,padahal kat sini da ad, THANKS !

Hamizah :D said...

apit , url shoutbox tu yg mana ?

KakChik said...

url blog tu yg mne ?

IeNa kPop lOvErXz ^^ said...

Apit , asal ta ade close button ?

Joel Leslie said...

thanks for sharing, dear (: meh singgah sini --> http://youreextremelyhot.blogspot.com/

KhairunNisa' said...

Thanks yea :)

Unknown said...

yg blue utk url 2 nk tulis ape ????

Subscribe