Tutorial 32 : Autohide Shoutbox plus Float

Salam..
Dah 2 hari tak update blog..sebab bz sikit..banyak nak share ini..kakakka..
Sebenarnya I tengah sibuk main code html untuk design blog I ini..Nanti tahun 2011, I guna templete itu hehehe..
I buat yang simple je tapi kemas plus PINK!! love pink much much much hehehe..penat sangat nak main code html walaupun dah mula berjinak-jinak menjadi designer huhuu.. poyo je..
Ok mari sini? I nak ajar untuk buat hide chatbox, ala-ala main sembunyi-sembunyi tu..
Blog I ini belum lagi main nyorok-nyorok ye sebab I belum lagi nak menyorok :)  So kalau suka sorok-sorok dan menyorok boleh test tutorial ini yep..

1. Seperti biasa, Sign in blogger > Design > Page Elements > Add a Gadget > HTML/javascript
2. COPY code di bawah dan masukkan ke dalam HTML/javascript tadi..

<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://i1205.photobucket.com/albums/bb432/fara_idola/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F11DF4;
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 DI SINI/CBOX

<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>
3. Selepas itu sila ubahsuai benda-benda berikut sebelum SAVE.

50px : Semakin tinggi nombor samakin rendah/bawah chatbox anda.
Font yang warna merah : adalah URL image, u all boleh tukar dengan URL sendiri. Kalau guna yang itu pun OK!
100px, 50px : adalah ketinggi dan kelebaran, tukar ikut citarasa ye..
Replacekan MASUKKAN CODE SHOUTBOX DI SINI dengan code chatbox/shoutbox anda.
#F11DF4 adalah warna background..
#666666 adalah warna border..
Lepas itu Save dan tengok hasilnya..


Sekian tutorial untuk hari ini..TATA..komen ye lepas try..

New Update! Float Shoutbox


kebanyakkan coding di atas tak berapa nak ngam..ada yang tersentol, terkeluar dan macam-macam masalahkan. Ok kali ini aku nak ajar Auto hide Float SHoutbox. Senang jer.. lagi laju dan cepat macam kilat..


1. Seperti biasa, Sign in blogger > Design > Page Elements > Add a Gadget > HTML/javascript
2. COPY code di bawah dan masukkan ke dalam HTML/javascript tadi..

 <style type="text/css">
.gb_fixed{
position:fixed;
top:50px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:3px solid #F70415;
background:#FC6A84;
right:10px;
padding:10px;
padding-top:20px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>

MASUKKAN CODE SHOUTBOX DI SINI/CBOX

<div><center><a href="javascript:void(0)" onclick="gb_showHideGB()">
<img src="URL BUTANG CLOSE"/></a></center></div>
</td></tr></table>
</div>
<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img src="URL BUTANG SHOUTBOX"/></a>

3. Tukar benda berikut :

MASUKKAN CODE SHOUTBOX DI SINI : Code shoutbox korang, register sini kalau tak ada.
URL BUTANG CLOSE : url link butang close
URL BUTANG SHOUTBOX : url butang shoutbox
#F70415 : warna border
#FC6A84 : warna background
code warna SINI 

penting! kalau nak kotak shoutbox korang cun, pastikan width=300 height=380 untuk coding shoutbox korang.






Butang Close



 http://4.bp.blogspot.com/-S08TcYj93Tk/TjgPX3MfJNI/AAAAAAAABek/hUiFqdyqOA0/s1600/close.png
http://4.bp.blogspot.com/-9fVH-YeXUNU/TjgPYQ1HatI/AAAAAAAABeo/oaIalgJZGbA/s1600/close2.png


 http://2.bp.blogspot.com/-wtG2O4Cml64/TjgPY3kyE7I/AAAAAAAABes/RepAsVgwuOU/s1600/close3.png

Butang Shoutbox


 
http://1.bp.blogspot.com/-rSp4ahf8U0U/Tlbwde0w26I/AAAAAAAABt0/jie9RhAayuk/s1600/farahblack.png
http://1.bp.blogspot.com/-vY3tcPtmLk8/Tlbwd7hYd0I/AAAAAAAABt4/34_1BKkIyzY/s1600/farahbluelight.png
 http://3.bp.blogspot.com/-IervuVeMojw/TlbwePL1yiI/AAAAAAAABt8/gj6_NGSq-r4/s1600/farahhotred.png
 http://3.bp.blogspot.com/-liNiGO08LtY/Tlbwem_1BPI/AAAAAAAABuA/Ux1oJ9fDQQo/s1600/farahlemon.png
http://4.bp.blogspot.com/-fKFzsKTR9R4/TlbwfNbvAJI/AAAAAAAABuE/ZX20NsNaPRU/s1600/farahmix.png
http://2.bp.blogspot.com/-KD_mK68ZmmQ/TlbwfbpXLnI/AAAAAAAABuI/X9QrOvy_gQM/s1600/farahorange.png
http://3.bp.blogspot.com/-HpO62EmipQY/Tlbwf3g9crI/AAAAAAAABuM/QuveS-wxnf8/s1600/farahpurple.png
http://3.bp.blogspot.com/-l7MRvmjnVwI/TlbwgOykCrI/AAAAAAAABuQ/uRCDB5FXvIk/s1600/farahred.png
http://1.bp.blogspot.com/-RouydudtoTs/Tlbwg8wwaRI/AAAAAAAABuU/uJb1rj_DQrk/s1600/farahsoftpink.png
http://3.bp.blogspot.com/-lU-GkG0oIpo/TlbwhoRkupI/AAAAAAAABuY/bbQZKyjRzUA/s1600/farahsoftpurple.png
 http://1.bp.blogspot.com/-6jLw0xPd8gI/Tlbwh_KIoFI/AAAAAAAABuc/QxTjhv2ei9w/s1600/farahwhite.png

ok baii, dah try bagitahu eh  :)
Share this PostPin ThisEmail ThisShare on Google PlusShare on Tumblr
102 Comments for "Tutorial 32 : Autohide Shoutbox plus Float"

salam...
akak mcm mne nk crik code shoutbox tu kak?

@FazeEla gloom

wasalam. Kalau adik dah buat sbox atau cbox buka semula widget yang dah save kat sidebar. ambil semula code dan letak dalam code di atas..kalau xda. Buat je akaun baru sbox.

macamana nak dapatkan code tu kak?

akak....napa saya buat dia ader terkeluar??? saya kena buka and tutup blk baru dia sembunyi betul2

npe x jdik :O byk kali buat tapi gmba x kluar2 jugak and shoutbox tu ada kat tgah2 blog

@seon mi

Register dulu sbox atau cbox..ambil code widget dia

@Jenny99

memang mcm tu..bergantung pd line tp slalu dia akan tertutup usah risau ek

@mimie

ambil dulu code dia letak kat tempat yang akak suruh letak code widget..yang lama punya removekan :)

makasih yerr...suke masuk cini...^^

akak boleh x bagi satu contoh code yang boleh diamik? buat asyik x boleh je..geram pulak huhu

thankies ye . sye wat jd . suke dtg sini XD

dah try tp x jd la..cmane ek..dh copy code sbox and yg lame pun dh remove. tp stil x kuar..

akq,,,cmne nk tk0 wrne bckgr0und tu,,n then,dy mang hide,,p mle2 bkak bl0g jek,,dy jd kt tgh2..

@taufiq_aysyah

plz cari cara mengambil warna/colour di blog tutorial ini..ada..yng dia ditengah2 tu sebab maybe your internet connection not good..biasanya dia akan normal sahaja..dont worry ya!

@mylittlelovelife

before your remove your code sbox..you must copy sbox code to microsoft office/ notepad or something like this..ambil code yang sis bagi dan tempek kat tempat yang diletak code sbox

Thank a lot to my honey2 sekalian..sorry kalau saya tak balas komen you all..

akq ley bgy x cntoh code cbox@sbox ??

@Bella HazBell_sensei

gambar tersorok?? gambar kena padan dengan tggi dan lbar cbox

akk me kasih sbb bwat tuto ni saye nyer blog dh ade shout box...tq

sis, cmne nak url image tu ek ? :)

akak , contoh icon tab yg cute2 ade tak ? Nak URL die ,, sye tak tau nk cri kt mne . Puas cari dh .

slm..kak..sy copy code tuk shoutbox.thnx yerr..tutorial akak mnjadi!^__^

emm..akak klau nk button shoutbox slain yg akak buat 2 nk cari kt mne ye??

kak..npe shoutbox nye xtertutup smule pn ??
klaka towl
haha

jadi lagi..oh ma god..alhamdulillah..thanks u..muaks3x!!

sis,
if sy dh ade sbox ni...
sy copy code dier..
nty yg lama kene remove eh??

kak farah , mcam mne nak nak ltak code BUTANG CODE & BUTANG SHOUTBOX ?
ltak kat ADD A GADGET or EDIT HTML ?
tu jea saye nak tnyee . huhu
trime kasih =)

thank you..tutorial yg mudah diikut...

salam, nak tanye knpe kat blog saya shoutbox ade dekat sidebar dan shoutbox yg dekat tepi?

@Alline Amalina

pastikan antara satu code di buang..kalau buat kat tepi buang code kat side bar

thnkz cik farah atas ilmu ini.. =) dah jadi... ^_^

ni yg sy syg cik farah ni...
tenkiu for the tutorial..hehe

suke tutorial cik farah..
luv u dear (=

Tq :) , btw , akk farah ? ade beza ke shoutbox dgn shoutmix ?

akk ? jadi mmng jadi , tapi bila nk tlis msej nape tk bole ek ? kodding slah ke ?

yeahhh , akk . dah dapat . kluar pon msej dia . TQ ssangat :) , kita ambik yang butang close tu ye ?

thanx, dh lama sy cari tuto nie... thanx a lot kak

hot giler kak!
terhebat.
da lme myra carik tuto niyh :)
umuahh ! (gewdix)

saya tak tahu nak wat shuotbox lah,. boleh tolong ajar kan tak?..

klu utk pngguna template mcmmna plak..

Thanks for the tutorial kak . Saya dah berjaya buat . Saya ambil butang shoutbox warna soft pink tuu yee kak .

kak , nice tuto . adik amik butang close n shoutbox tu ek . tQ so much :)

tq kak farah..ingat kan susah cari kod tue upanya senang jerr..

akak saye dah try buat tapi dye x jadi cbox tersembunyi pon..

haii kak farah , thanks for the tuto :)

Akk,shoutmix tu dah tak offer free service,kena bayar.Kalau saya register tempat lain boleh ke akk?

@♥Miss Farah♥
salam sis....nk tnye....npe dye kte sbox expired?

assalamualaikum..
awk, saya guna tutor awk ni..
thanks ye =)

thanks Cik Nurfarah...cbox dah tersorok..

sis , da jadi , terima kasih , :-)

menjadi ! thanks sis untuk tuto float cbox tuh =)

kak , napa saya punya shoutbox tu tak bole buka ek ?? huhu :(

Thanks for this post!! Really helped me alot! :) x

da try tuto yang ohsem ni,,
dan menjadi,, sukanya,,
thanks cik farah...

berguna sekali,sudah di terapkan :) thanks

leeviahan.blogspot.com

ehehe kak menjadi la ;) thank you banyak banyak yeee kak

Terima kasih kak.. :) Akak dtg la ke blog saya : http://biribubiribu.blogspot.com

terima kasih kak.. akak dtg la blog sy : http://biribubiribu.blogspot.com

i like...super like!!! makasih yer

http://healthybeautifulblog.blogspot.com

Assalamualaikum , farah .
thanks sediakan tutorial yang berguna ni . Alhamdulillah , mimi try and berjaya ^^ thanks tao , dear :)

This comment has been removed by the author. - Hapus

jadilahh... thankss yer farah... :)

bikin butang shoutbox dimna kak?

thanks for the tuto. berguna sangat. :)

salam, akak.. yg ID shoutbox 2.. tym registerkan dy nak.. saya dah try create ID sendri tpi semua x dterima.. ID yg mcmmna yg kena buat??

@♥Miss Farah♥ Salam Kak :) Sy nk tanya , lepas sy copy code2 semua . mmg jadi , tapi bila sy bukak . ada butang CLOSE je , nk edit dlm camne ..?

Thanks for the tutorial..
it really help me a lot. :)

akak yg copy tu mne die punye letak saiz sye bukak kecik sgt la pulak :/ @♥Miss Farah♥

Assalam kak.. button close tu menjadi tp bila tekan dye tak dapat nak close. macam mane erkk? :3

assalamualaikum kak..xdek shoutbox yg free ke :(

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Related Posts Plugin for WordPress, Blogger...
Back To Top