Sunday

(UPDATE) Tutorial ; Autohide Shoutbox anda.

selamat pagi.




ini hari nak cakap banyak pun tak boleh. sebab tak ada masa and tak dapat nak online lama lama sebab internet rumah ini macam ada sikit problem. HAHAHAHHAA benci T____________T

oh ramai tanya macam mana nak buat shoutbox autohide mcm tu. heh padahal dah ramai yang buat tapi tak apa, saja nak bagi anarm.net femes sekejap, ini tutorial dia.

pegi layout>page element>add gagdet ;
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

MASUKKAN CODE SHOUTBOX KORANG KAT SINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Note :
  • 50px untuk setkan kedudukan shoutbox korang. Semakin tinggi nombor yang korang setkan, semakin ke bawah lah korang punya shoutbox tu.
  • color pepel itu masukkan code shoutbox :)
**Read more / credit: anarm.net ( tutorial sorokkan shoutbox )

**Tab warna berlainan : pisyek.com ( tukar tab kaler lain )

** nak lagi kacak boleh usha : nazrien.com

*untuk ubah color and word, guna photoshop ke apa tah serius aku malas nak buat sbb tu aku guna yang pisyek punya saja :D

selamat berhujung minggu :)

suka tak?

25 komentar.:

Viera said...

wahh,tenggs kak bg tuto nie..
nak try la nnti.
:))

thnkss!

black_mel said...

thnax,,,,,berguna nie,,,

Liyanaa. said...

cuba cuba cubaaa :P HAHAHAHA ur wc korg ;)

d-ba. said...

Akk , cmne nk tukar warne tab tu ek ?

Diana Naubi said...

Sayang-sayang-sayang thanks!!!
Kagum betul!!
:D

sis ain said...

akak.... camne nak tukar warna tab tu??? lagi satu yang perkataan shoutbox kat tab tu macam mana nak tukar ke perkataan lain?? macam yang kak mieya bble talk buat.. please tolong saye ye kak...

helena's said...

ohh bleh sorok2 eh..hahaha

Liyanaa. said...

kak hel.

bolehhh cuba try sorok tp makesure dorg jmpa lah HAHA

ween said...

Ynn,
terer la u main coding. teruja :D

topo said...

fuyo hebat ni.. :D
terima kasih di atas link yg telah diberikan hohoho

nuraiminajiah said...

kaka..nak tnya ckit...camne nak wat header cam akak neyh???akak wat kat maner??ade x lmn web yg ajar??

sickchild said...

nak try nak try nak try.

berat tak laling?

Pisyek said...

wow!!! thanks untuk backlink ke pisyek.. hehe...

nih yg pisyek suke nih... =P

Meow said...

kenapa nak hide shotbox xbest la blogger nak walking nanti...huhu

zety said...

syg..i gune tutorial u ni..thanks;)

Liyanaa. said...

baik sygg :D

Fatimah said...

Terima KAsih!!!!!!!!

** a i l y ** said...

waahhhh menarik! nak cuba la. thanks liyanaa!

Liyanaa. said...

sama sama ailyl manis :P

hani madu said...

hii..
i suke and i borrow it k..

continuously writing said...

thanx utk tutorial ni (:

L.O.V.E said...

mkaceh dear...gud tuto...hehehhee..

L.O.V.E said...

mkaceh dear...gud tuto...hikhikhikk.......

PinQib said...

thnkxxxxx

Nazwa Amidi said...

Thankss yerr :)

Post a Comment

Thnx sudi jenguk dan redi to leave a comment?

RULE:
1. spam lh :P
2. ckp mende best sket. br la semangat nk bls
3. nk kutuk pn agak agak lh


From,
Ynn Ainul.