Tutorial Cara Buat Hide/Show Shoutbox Versi Simple

click to zoom

Hai all...petang ini koz akan memenuhi pemintaan "mamaGee"

click to zoom

Maap ye koz lambat tunaikan permintaan mamaGee^^....

Sebenarnya koz dah buat tutorial ini dalam versi comel...tapi memandangkan ada yang nak jenis simple koz akan edit kembali code tersebut kepada yang asal..
jadi jika inginkan yang jenis simple teruskan megikuti langkah-langkah berikut:-

Langkah 1

Login 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:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://img411.imageshack.us/img411/6496/hijau.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 DISINI

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


Langkah 3

Kemudian korang masukkan code shoutbox korang pada perkataan
" MASUKKAN CODE SHOUTBOX DISINI "

dah masukkan save dan tengoklah hasilnya...

Pada code yang berwarna hijau korang boleh ubah gambar tersebut(saiz 100X30)
contoh:-



click to zoom

Anda juga boleh buat permintaan di sini jika inginkan button macam kat atas ni di tukar dengan warna yang anda hendak...koz akan cuba bantu untuk buatkan...

Button untuk MamaGee
click to zoom
Code
http://img143.imageshack.us/img143/4863/pinki.png

camat mencuba :D
Ranking: 5

Comments:38

09 June, 2010 14:38

thx!!! saye da buat...ok..:)

09 June, 2010 14:46

yahhuuuuuuuuuuuu makasihhh...

10 June, 2010 14:33

thanks 4 the useful tip ;)

10 June, 2010 17:39

koz, kalau nak tukar shoutbox ni dr kanan ke kiri page blog cmne eh?thanks..

11 June, 2010 16:18

terima kasih bg ilmu :)

12 June, 2010 08:17

nice tips...i like...thanx budak nakal...bagusla kamu ni... :e

12 June, 2010 08:18

wahh...bagusnyew...nice tips...tengkiyu budak nakal...bagi tips yg sgt besh...nnt nk cubela... :e:

12 June, 2010 10:22

nice blog and tutorial....nnti ibu din i cuba yerk

14 June, 2010 08:27

ahaks k0z...bernyawa blk ek bl0g neh...sajer gatai2 menyinggah kat cnie...santek sh0ut kaler pink tuh..i like...ngeh3...manyaknyer tut0rial..suke..suke...lalallala

23 June, 2010 16:37

sy nak button shoutbox yg lain boleh? pic kartun ker?

27 June, 2010 11:38

kalo yang ade kartun nak wt cn ne lak hehehe?? :l

05 July, 2010 14:03

np keluar kt tgh n tepi ek?

08 July, 2010 08:48

koz,tieha punyer dah ok dah.....tengkiu yaaa....heheheeheh shuker nie... :)

12 July, 2010 23:32

sy nk gak button~
nk colour purple~
letak gambar butterfly~

21 July, 2010 16:34

thanks
cantik lah...
da buat da pon :t:

02 August, 2010 16:37

koz..qiqi rompak yg kaler pink ek

05 August, 2010 15:48

yup simple..culik 1 erk

11 August, 2010 12:20

thx :)

14 August, 2010 23:22

aja la nk wat sh0utb0x cute...plizzz :t:

27 September, 2010 23:02

i like!
thnx! :)

30 September, 2010 13:37

u cbox bley x??

12 October, 2010 09:45

yang warna pink tuu tk keluar gambar laa

19 October, 2010 17:05

koz....nak amek gak le x????amek eh...hihihihi...xtau malu...mekasih!!!

27 October, 2010 01:07

very useful. thanks dear

08 November, 2010 16:37

thankkkk yooooooouuuuuuuuuuu ! i love this site.

11 November, 2010 17:10

Please visit my blog, please follow my blog : www.crestinabsolut.webs.com - thanks

16 November, 2010 10:01

tenkiu..dah buat :)

23 November, 2010 13:52

hi budak nakal :)
sy amek code untk mamagee tu ea . hehe .

30 November, 2010 21:09

budak nakal..contohnya kalo pu3 nak tuka gmbr tepi 2 len..n edit lam adobe photoshop..gmbr kene kecil or ikt sais kite?

01 December, 2010 21:34

yay yay ! jadi ! Thank You :D

03 December, 2010 00:57

eyh, tq for the tutorial! :D

18 December, 2010 11:26

curik butang pink yg koz buat tu letak kat blog. hihi. =p

22 December, 2010 11:24

dah cuba buat nih. menjadik. :D

26 December, 2010 16:03

budak nakal,
sye dah try buat n jd.. masalah nye gamba shoutbox tu tak keluar la.. nape eh? tulung sayeeee =[

11 January, 2011 16:50

thanks ye....dah berjaya. :)

25 January, 2011 22:35

Kenapa saya buat tak jadi?

22 March, 2011 01:14

tak menjadi. setiap kali page load dia automatik show(sepatutnya hide). mcmana bagi dia hide secara default.
lg satu kedudukannya akan ikut tempat letak widget,misalnya kanan,kiri, atas n bawah

27 July, 2012 18:23

thank untk tutor nie... :)

Post a Comment

Komehlah dan klik G+ di atas sekali okey^^

 
Google PageRank Checker Powered by  MyPagerank.Net