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



 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnsXAWBBMc1nElRMvblqBQdme8aPHhMY2UgNN8ft-c8CmNmqqZ6wfPxJlY7dGxCDIGTVqdZQPzEZEPyKkvMNFAWMg7xlMB-ey9fGZ6EHK5y-uhjgVx78MEVvxyN_Tsl9Qkp698ZC01pu0/s1600/close.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtAOJJGSWoNIlnjnct0TcxOnxp8q3LyrK3r7CQsqg7tcSA6_hpCh8cOVwOn5k4FBTGxic2t9r6rk2jQzhn_xiXBLa2AqaKtyj6Ze7vnD_4LhvG6CYLJAg2-qzJm2ftdvc1eTSPuKaYX_w/s1600/close2.png


 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvlT9OOh3GoHN8f_CF-J8TPYcSrI7hRe4UUWSJAXNrfeAxU7TKTWrA4s2psniBOlhmFaFlegQ21UGMPLvC8R1CT8px6UYKTa1zo1dlHN64uW4Eltb6tZ2Rmq8EUP8uY16aJ-yShIBhQaU/s1600/close3.png

Butang Shoutbox


 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJnwblnCH1v_Lj5zdqCS2lu6Mx8U0yUOScxf_0lQePQMsvtvi3raqE2xlDPQlpSQ8RYaePLy8xfp8gT7C77Nz3r22-HP9lt_IzoSXXII2_MthiddH4SymEGKZVnvDW2ROjKkvzT30D3T0B/s1600/farahblack.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCsfa0UEvw5o_0HKUzerGE9nFwZGgxvPKy02CYSONkZWAr8oKu0iIfrAKj-w1yaX9SV4MrT_EI_2AHy0GoQh56tELvioelmIEl5O1NsPChyGL8TBLz5GkK97gJ-rGnThuk2sHAESz7kw9r/s1600/farahbluelight.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRkH9ZXohJq89W0QWbBOEHbkDiEW0b2QYgHrSvG0-wywyb_CyXrASiP2Kb3_PzcAQ7610jtXnf9CZ0ijLsqO68A-47hIHLTTjwDGBoFxqFlv93pNar7MSXsjoyDJkm_a8kW41omDyaj_x_/s1600/farahhotred.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3dd-151uiUITpokgeuhKZFdHQMJgVfwJIYvJwwJXlgvcr33kirraPi3l9uV9akS4veboqVNbNhCydBtHmu2CXcaFJSiLp5fx2uV3V__CoE-OE1384octOY501e6FmLx3eOoXpIhNmUeFf/s1600/farahlemon.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg53pDWn0ay3BnMJGV5Qmi27hhYraNrVVSevnsZHL17c0M7-eF47VPbHdh0QbnMzCMCX1toA2It-kS3ZjtRAX6JUXwRgwWc64s02SrLlBufgJLdMwcnIKHHazt5oQDgXuw2MMJRYcXAUO3Z/s1600/farahmix.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFBfW11Ou-w0fMdZHjfiCY4QQdKTPd57MoVNafgf6XUHI-apr24XrYfCSUgr1zG36jkEDZJwNKiNwK3JA5__V5IY5miqHqUCTNJTAsrr6crK0n5-3CiqXRghSYxdIKg51PHO__L71Yhkx/s1600/farahorange.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI4XSXZuhXdA5LbVU1j8xe5mp8sBhO4uVblfXHKKu1IINmvZUBdGuLwq_M6hUGdprwfitUqsRDGrb_YAdALwLlQpie44Yt-Y-EEibSneX5wvXT3e3zKAUc2ui6i3Ubk-I1aHOr883MERuA/s1600/farahpurple.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdFkJ3OshfL-JqhouMG40MQt58DK-xRvE5s5FcZKtPoZ0wIgh0ZB0YrV1u5MeH7I2jBFBg9voUc2RZuzG9HVtWK0ef9CLSVkOqXsf0WW_eF9XYUXRxO6fMg7ZuU5jXoh1DcAjodeF6zI7x/s1600/farahred.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikgmgDbhdu3KUeWeaRP7kW3y1Wfb8GFUxo5J7I8dzcXeZQThOc3eOncV3Udsj4RXpsBB7uzl0_gNhj8KI8yLOWxwWpXgwDYngNfz7C6i0LIBTHIZq9Cz5MS6HJDal5pzp8F6T9xAUNDlkM/s1600/farahsoftpink.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggzikCtiyTiEU7eS0vSu-mcgkJoUwgGXh_mPYP2bajEEp9FWehDrCe0Omc-d51fy_oY-8_h0Dd9CnUBH7R_y_4q7uM6mpDTMOidGTFAcAjXIP9KANFqLzNpnNkyxMYg8yVj_bAC0fPi8v6/s1600/farahsoftpurple.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvb0LNql5pARS7teSsqsttyPMtUlpBSwabCf6LAebUtxw_Y3pniXHXtGUxoSM_GTcXQvgvgv7w2vTkkdgu5M1zFb_pzGq520hYdqpnra47lPhfiioGvXJPeRzLsLFGE0lJjkJpHEpzhBwo/s1600/farahwhite.png

ok baii, dah try bagitahu eh  :)

102 comments

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

    ReplyDelete
  2. @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.

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

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

    ReplyDelete
  5. @seon mi

    Register dulu sbox atau cbox..ambil code widget dia

    ReplyDelete
  6. @Jenny99

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

    ReplyDelete
  7. @mimie

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

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

    ReplyDelete
  9. thankies ye . sye wat jd . suke dtg sini XD

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

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

    ReplyDelete
  12. @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!

    ReplyDelete
  13. @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

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

    ReplyDelete
  15. akq ley bgy x cntoh code cbox@sbox ??

    ReplyDelete
  16. @Bella HazBell_sensei

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

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

    ReplyDelete
  18. sis, cmne nak url image tu ek ? :)

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

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

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

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

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

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

    ReplyDelete
  25. 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 =)

    ReplyDelete
  26. Thanksss.... menjadik!! i love it!

    ReplyDelete
  27. thank you..tutorial yg mudah diikut...

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

    ReplyDelete
  29. @Alline Amalina

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

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

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

    ReplyDelete
  32. suke tutorial cik farah..
    luv u dear (=

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

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

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

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

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

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

    ReplyDelete
  39. klu utk pngguna template mcmmna plak..

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

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

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

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

    ReplyDelete
  44. haii kak farah , thanks for the tuto :)

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

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

    ReplyDelete
  47. akakkk !! jadi!! yeyeyeah !! terima kasih,akak,,:)

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

    ReplyDelete
  49. thanks Cik Nurfarah...cbox dah tersorok..

    ReplyDelete
  50. sis , da jadi , terima kasih , :-)

    ReplyDelete
  51. menjadi ! thanks sis untuk tuto float cbox tuh =)

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

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

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

    ReplyDelete
  55. berguna sekali,sudah di terapkan :) thanks

    leeviahan.blogspot.com

    ReplyDelete
  56. ehehe kak menjadi la ;) thank you banyak banyak yeee kak

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

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

    ReplyDelete
  59. i like...super like!!! makasih yer

    http://healthybeautifulblog.blogspot.com

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

    ReplyDelete
  61. This comment has been removed by the author.

    ReplyDelete
  62. jadilahh... thankss yer farah... :)

    ReplyDelete
  63. bikin butang shoutbox dimna kak?

    ReplyDelete
  64. thanks for the tuto. berguna sangat. :)

    ReplyDelete
  65. salam,
    thanks!!
    jadi dan cntik sgt :)

    ReplyDelete
  66. 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??

    ReplyDelete
  67. @♥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 ..?

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

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

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

    ReplyDelete
  71. assalamualaikum kak..xdek shoutbox yg free ke :(

    ReplyDelete
  72. Assalamualaikum. Terima kasih yea sis. Sya dah dapat shou box yg cantik di blog.

    ReplyDelete

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

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Related Posts

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH