Tutorial Cara Buat Hide/Show Shoutbox

click to zoom 


Hai all..bersua kembali ke tutorial yang berikutnya...
koz pasti kebanyakan korang mesti tertanya-tanya macam mana nak buat shoutbox macam koz nyer blog inikan...ok...lau korang nak tahu cara nak buat mari koz ajarkan...langkah-langkahnya senang jek...
sebelum mulakan pastikan korang dah ada shoutbox sendiri(kalau yang tak ada itu boleh dapatkan di sini Shoutbox )

Langkah 1

Log in blog >Layout> Page Elements>Add a Gadget>HTML/JavaScript 


Langkah 2


Korang copy dan paste code di bawah:-

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

.gbtab{
height:150px;
width:100px;
float:left;
cursor:pointer;
background:url('http://img686.imageshack.us/img686/686/shoutbox.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, 100-w) : moveGB(80-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 DEKAT 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 = (100-gb.offsetWidth).toString() + "px";
</script>
Langkah 3

Kemudian korang masukkan code shoutbox korang pada perkataan 
" MASUKKAN CODE SHOUTBOX KORANG DEKAT SINI"

dah masukkan save dan tengoklah hasilnya...
camat mencuba :D
Ranking: 5

Comments:19

01 June, 2010 11:33

nice post. . .

01 June, 2010 15:37

apsl bt die xnaik pn shoutbox..ksong jer..jz da tnda close jer

01 June, 2010 15:54

@MISH LOLIPOPanda dah taruk code shoutbox tak?

01 June, 2010 17:14

dh pun tp ksong jer..da kotak kcik tulis close

02 June, 2010 14:10

huish, lama dah nk cari tutorial pasal hide/show ni..
thnkx! :|:

02 June, 2010 18:37

thanks tlg. sy dah wat. pastu kotak shoutbox tu same mcm kamu la plak yg bdk kecik comey tu. haihh xpe eh? kalo kamu x bg nnt sy tuka blek la.

03 June, 2010 09:42

@ZhEtxpe pakai je...mmg sesape yang megikuti tutorial ni akan mendapat button tu...:D

x leh un...
saya dah letak dah!!:b:

04 June, 2010 23:51

dh letak
ade tp cam cacat laaaa...
tlg tgk :)

04 June, 2010 23:54

@♥yaya♥
ape yang cacat yaya???koz tgk ok jek

09 June, 2010 14:26

dak nakal...tunjukkan posting utk shoutbox yg simple mcm shoutbox yg baru tu..mama ske....tp kalo leh buat warna pink lg mama ske....ahakss

09 June, 2010 14:33

@Ogy

warna pink?okey nnt koz buat tutorial tuk button dier lak oney :D

13 June, 2010 09:42

heyy budak nakal! this is fantastic! oh yea, i'm curi-ing ur banner taw. :p

14 June, 2010 10:02

xpekn kalau sy pkai gmbr yg sma dgn bdk rabbit tu??

07 July, 2010 15:33

tQ.. i like.. :e:

07 October, 2010 14:54

nice tutorial.

17 October, 2010 21:11

code shoutout tu pe?
x paham la...

11 November, 2011 02:03

tq ye..bermanfaat sgt..^_^

Post a Comment

Komehlah dan klik G+ di atas sekali okey^^

 
Google PageRank Checker Powered by  MyPagerank.Net