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:

~Sarah Bieber~ said...

Thankss ;)

apitrawrr said...

@~Sarah Bieber~ welcome sarah :)

mitsuie lee said...

apit nice tuto bahh :] thanks btw

Mia Potter 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

apitrawrr 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

apitrawrr said...

@mitsuie lee Hehe , thanks bahh :)

Moko Ryōko said...

thanks ! :]

Daya The Sixth ! said...

Tengkiu Banyak2 ..Gumawo Unnie (!) :)

yunie ;) ! said...

Tengs for the tutu ;)

Una said...

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

chocolatemylife.blogspot.com 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

Puteri said...

abg apit, nice tuto laa :D

syieda 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 !

Nur hamizah (: said...

apit , url shoutbox tu yg mana ?

ieqa torpedo 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 :)

nur fazlin (myalyn) said...

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

Subscribe