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:26

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..^_^

07 December, 2018 15:31

Very interesting article, thank you for sharing. I also want to share the following health articles, God willing, useful. Thank you :)

Pengobatan Alternatif Kanker Paru-paru
Obat Ginjal Bocor Tradisional
Penyebab Radang Sendi dan Pengobatannya
Cara Pesan QnC Jelly Gamat Asli

This article is interesting and useful. Thank you for sharing. And let me share an article about health that God willing will be very useful. Thank you :)

Cara Menghilangkan Benjolan di Bibir
Tips Menghilangkan Wajah kusam

This article is interesting and useful. Thank you for sharing. And let me share an article about health that God willing will be very useful. Thank you :)

Pengobatan efektif Menghilangkan Benjolan di Payudara
Obat Luka Berair yang Tak Kunjung Sembuh

Obat Penghancur Benjolan di Leher

Post a Comment

Komehlah dan klik G+ di atas sekali okey^^

 
Google PageRank Checker Powered by  MyPagerank.Net