Membuat Slide Float Untuk Shout Box / Cbox

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://i1089.photobucket.com/albums/i348/mh120/sHOUTBOXwwwkolombloggratisblogspotcom.png') no-repeat;
}
.gbcontent{
float:left;
border:3px solid #000000;
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 kode Shoutmix/Cbox di sini] 
                 </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 orange : adalah URL image, boleh tukar dengan URL sendiri. 
100px, 30px : adalah ketinggi dan kelebaran, tukar ikut citarasa..
Replacekan [Masukkan kode Shoutmix/Cbox di sini]  dengan code chatbox/shoutbox.
#F5F5F5 adalah warna background..
#000000 adalah warna border..
Lepas itu Save dan tengok hasilnya..

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnHrIf2kBs5CV1M3EaJ_ExNipDjc36eQKjj-g0F3UO6NG7M6qSSDjW8HuNFmurWDQrF1YhGFiP0EIu20G7az5zXOCT7PuP_O-tm6VWI_DXg2hNxPtleG3oT2tI0hRYqt00S3jVRKEHQN5_/s1600/farahblack.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2_dBVFsul293XoGLAEZJ_DxAB_6TJa9-5-IrKDJlaHy1CRhTbWrqXwckt_-qojcTgZJ0tbjv6zS0OOkVXWC2w2lwa4ZHIk9x08tk63kuTIoJSOxo55iD2FzUfXcV4rn70VijT-SBSGRZ/s1600/farahwhite.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiylLQTpz2HtFLQJafM6PtGv5wHd5SYrUKcYoa1c9dL4ffbUYSeWtWmUU9RbEUk78RjlDeMQpdnNtwkZXckrFGOmUzN7OB-gU49tAyEG4mk0J3Pv766JI6EPLoM9tLfqLlTeG3R1Cfhddgo/s1600/farahbluelight.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXSf5MJMIzMaIQG4ZBe2Ya6Gr84vh17BuKgH3r0gUdJw7dYuQEEE8BHMagClfi-USL4PLAB12AbxyIsx50pQ64F-pLzuuCuL-kwlFwvoRpnuoJ_Yg4URhmCzG7Nl2-KIZKL-KqllFBQWAA/s1600/farahmix.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpm_KIDh2xTqKZGxrhHnWe2zabxyYjQANjEpkU4_hHDd9klp1zR9mhDMWld8qI9mhv6mP5DO6PAx_oBAA4wI9Rhk_lwoZNv3TtAzooFeVhtjK8dH-HdWSKN07XRoHF769Mf_gRMCGwpdWx/s1600/farahred.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBA9PG58-jYA5PnY_l0BiNsUsZtdy4JXzVmyH4i7XHSujKtX9-c5ofd0uQTo6s6WRs2838cQqF_v39r35ndv9R1te8_DjBI3hN_ejtPWxB51doAHEm0-Rug875OQczWwdj6Td4YcL8az7/s1600/farahsoftpink.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhltRT_PmuBxl0Mf_qNhNLwlPfJHNuUXCedwlWLsz_xAAXElTrcZP6otryIhv1wTj0fufzQ3muWBgrDXCsJ2vv2SUQaYD2CXcqBuTOlKatGgZnFuY-Y9s88EZFckdUUZDMPbwbATyNoHCfm/s1600/farahhotred.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinY8R2YUYtU_mR8dandlY0X4XFs_Fcz-iY2uualDPKYPJj3z7KU5waS93E6CMCdcM0Uuv3YVty367BM7-zSEl35eymzlM90esJ774STa03g1NjURypP3_qIEQmWKgc7h8wC9WMuY3_6OTO/s1600/farahlemon.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCRbxRqDs9v8Z5Nh__g1a_Z2if92U8jtjnPTeI6sGjudNVuUVPBWF9VyeQG_3kOR_BdEI6NMrq04HY4IwOBcxQRdcxPEClQ4R4wjy9YGh2_kESk17EfJWXy0UHW6RrwG4X9tDISaKUmoOT/s1600/farahorange.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjApL7jv94lo-VRjndFQn9xC3H3375xPCBsNYnkasle8zj9Qc0RhPdQIsB3El0083ms4vwdQyCkYnex_vdtMhm1Z4MNqVoX37AeKhDMzdOxx6NTlQHlkZY56QRLQoS_XwfWP9MFjWw7smLU/s1600/farahsoftpurple.png

credit to farah