SHOUTBOX tersembunyi

hallo , uda lama gk posting >w< kali ini saya mau posting cara meletakkan kotak chatting di samping kanan .. karna sebelum nya ada yang nanya cara mempercantik kotak chatting nya atau biasa di sbut "shoutbox" atau "cbox" tapi baru sya respon sekarang , maaf ya ;) nah untuk cara membuat kotak chatting uda pernah saya posting cara memasang cbox dan cara merubah warna dan font cbox
nah sekarang agar lebih cantik saya akan memberitahu cara nya .. ini dia ..

*sebelum nya tutor ini saya dapat dari cik nurfah , terima kasih untuk tutor nya*

1.sign in ke blog >  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. lalu ubah yang berwarna sesuai yang kalian ingin kan lalu SAVE.

keterangan : 

50px : Semakin tinggi nomor samakin rendah/bawah chatbox anda.
Font yang warna merah : adalah URL image, kalian boleh tukar dengan URL sendiri. Kalau pakai yang itu pun bisa.
100px, 50px : adalah ketinggi dan kelebaran, tukar ikut citarasa ye..
Replacekan MASUKKAN CODE SHOUTBOX DI SINI dengan code chatbox/shoutbox anda.
#F11DF4 warna back ground
#666666  warna border..


New Update! Float Shoutbox 


1. 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 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 gambar  SHOUTBOX"/></a>

3. Tukar benda berikut :

MASUKKAN CODE SHOUTBOX DI SINI : Code shoutbox kalian.
URL CLOSE : url link close
URL gambar SHOUTBOX : url gambarshoutbox
#F70415 : warna border
#FC6A84 : warna background

penting! kalau ingin kotak shoutbox kalian pas pastikan width=300 height=380 untuk coding shoutbox kalian.

gambar Close

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCJpyqSpR0KJEGQOPunBp5qCohZN3uw3ooFXWopISAU9qD7bwZLqSym45-nfK4uyjJlHggiE9dnTwifIdXzEwF3TR_VnzisOTRQgU47GaGrni8RFObFXjLFjuDscDgfE1mnyd9H2GpVhY/s1600/close.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOpZoaxkbtZBjdAvFzMbbxS-YTvJeFctr2O4Tjb6osfOToW8NL0ZAP1wErqSzHF_4s2AiUHgQMaKQE3kl4LP41-qli_-TfvdAFJgU2TcWNMP6GrO3QV9EtUcMpXOeEQZggNUJL_fOPT2w/s1600/close2.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhuAKOH4VOWe5JgDU80xClIAPlmqjt_Hl7c73KVN0e4IwRffMISKkC1ZuylYz422bzGwbyggBgfl0iOWz5-mW-NA9MsSsxlmYVD6EwNoc0AlEHJRqhmXUUA8WPLaBVMRx3pLiYLwpPEbA/s1600/close3.png

gambar Shoutbox 

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1bGkLnC0CX_d0s_sbYpXZ2G8P2_pWtUh_ePqkT-TjlljGwCgKJfQwpDWD5BhJwJ08cz1HGrBDKW8ojHdA8qN3zWYNA8LYSABe_fK3z8Mb0qaKNo7CXo6_H9VfDRWO7hV0mAh_SbuENQhb/s1600/farahblack.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPzipcQyP5_f1YhjiCVPUFJSxGo8Y6GKZZmllI9EQ_QIYn1ZqyPkt_V1Mo2DFUlDIjohSocKP72y4r2frdCySeOo3ttWH5f_xc7uQO6HlkOia_2BRAfqsh2yBWvNvSQNjP8bMYOLMtu59/s1600/farahbluelight.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjEQkgzd2IyqO_F1onOzv2SyDTz39PUxrg9aR0tGSSlgy4u2C5P8HBRQhJCDC12TXM3-JBk38fGoAuScM4THvdWzek_teL0Rag34NFfhs1Pc-ThoHsEeYZzdPGdy5fQZYO-UmqYjhEoXhM/s1600/farahhotred.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxWHaYdzCaYgRc19NhPs1-8aEQstmgOCW6atZXd6x0DXltjdTLVcEuUAbWCYtn28xjeQibQydMRj9nD3bnF2hqHR-7y9uWoc9GhlYpvE-3lk5nwH-9IvqdeFI-FBFzt90lQ2K9U-OuRePA/s1600/farahlemon.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiukIrfshfPFJVpi8n7WYuNLhUiaRRZ5_2DiVFZ50en7YgJvcS-U4xaRDrf-S2640RP4qn4unZHLKuhJOR2MpNiIW_CjQ5LOVpXJk8vWW0fsuOr3hXWfS1NQg3CYLE4HCKGiB7JTD0Ukq7b/s1600/farahmix.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAB2-ywbpmq_yW1h92PO7TA0gNnI0FxgjyI3VjwNrLTEyXvhvJ3xr5d_rGW1u7zB_R3Eear-chWmdOd7aYEaA-cUKynWTDlTdRtbJnj_fef259_4dUJWvS7IEp2yOtZul5CMWJgvJYzDU/s1600/farahorange.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOXfNzTu-HYnM37MjavUSgWGoKcmMURnmkFrMgBM3dADdq9zCRJuan7oS6d_6E97xWZJiR-xOqnEIKNkjJ8FX7u4Y3Er9oh9h143IObrKOj1eFbmjmKLBKgJCGAT_ksaCZQqE5WBLtPNjA/s1600/farahpurple.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-kF-IulVH0NgXOUsOFe7PMWNSRba6uA0nH4Hi6YiJgSolaMHZPIoPRFkh4olSttpZukGNun_N4dHh3DFohPx6cRxtzqo2MCNJdVnOX5lwTg02lk8Es_lKw8yYrx-R2NIFcrmwv4JrO9Xh/s1600/farahred.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipjz616M8M4v2mXa1drKZK3WL3CmuA4ROiC4StA2bDXGXPEuCFdjXRwStAMQ7K_-5WoPvvZZFh3BtM4jYf4KJsN5w2z_p5z1120uQamodIzcVrkFlC71ljUVj68FdkbsdvoVpBQyZZ2FX1/s1600/farahsoftpink.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJh9rlSAGat0StPK4BO2jS72Q7ofTGFJGk1Icb24Tzw1XEbA8HY5pBl3VrYB1s2J0LNNCGl10C9u46rAtDGC7wOYcSvD3xYqUtkt9G3vIY8SfEGoBII-jNrukaJnmtCQaiOVL_SnbvgVJz/s1600/farahsoftpurple.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbESiu6tcsD1b7lyXpySNfcdPuUSN3NhMKdXYnFT8jfLyrfvRMVmxclFieVcVY2kkiJnYVjO5jmo7oNfi-LNDmih1oWIFXEFizzfvEs6DF0gA_UtbYTAm8EOfZhJ3VyoSa-1xd-vsLuMLC/s1600/farahwhite.png