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

SHARE:

blog tutorial