CBOX Part 2

Assalamulaikum dan hi!

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>

50px : Semakin tinggi nombor samakin rendah/bawah chatbox anda.

Font yang warna merah gelap : 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..

New Update! Float Shoutbox

Cara di atas ada yang tak ngam so ada lagi kaedah.

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 #33FF33;

background:#FFFFFF

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>

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

#33FF33: warna border

#FFFFFF: warna background

code warna SINI  

BUTANG CLOSE (Sumber dari Blog lain)

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi61gDTdL2mM1saYaXCiOgn7Z9a4lY1qmd6kcFn3w44TPJ2iD7usLw6P7itYHfj2BUfH8Bw8wn20NeM2jlMnEyIdLhT2__OdkUbR7ZOHbLMM9OnisaJEJxlRGHa-c5P2m3b7yyrtPqRgrQ/s1600/close.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivVfZ8YACi4UmGRmA6ST3kW2PpWEvWfQr0pHuj2T4B5maV3Y7C4OpOUkYDqwLLSL7nPR6R-OwOr3N2m2dyLHsv25NbogJAIl7gipMyK88Rra6gF7SCaeu7s9qPCCwY-NSpiEFJpW49Zzc/s1600/close2.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBcKQvjFvTnzLuBDnOKBryMKUE7WFTuldvImWlXVOQ0JzTwyG8Whv_uryC47d4nBDP4QglSRUQqK-z-PP9_BOhBn2l-JuThPfwyWMpoMjh9fXve5G7NkEKTU8ElSF05w3C9Y3Iy1L7a0/s1600/close3.png

Butang Shoutbox 

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlPApV7Z4CAnnhgMOOOLXGbu9579tM0oWkwT1FVpvnWWzTZ9XmtjauJdVyKw-8gEpsuRP1zyLgq2EICndLuzyYfSkt2rp0jl_n1VHASsWztbPpR4YuYQ8l1clPXlYHTEhHGQd7suEmVBpf/s1600/farahblack.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIc-ijpCmeZI39QDvFgUNCEMFMUPT53CufXQB_tRHDy0DBmELj_NRN_j8EmsJgVRUCxRXp7md1gy_JB-okHNCXf4Ft1uYt7XVZQKMo0C0_IF-L8kKH2SMTfag125k0RfixT6akTcr4OO8/s1600/farahbluelight.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEkgZ0Ka_t05Jn6NnkTtbzEv4r0YfviYix1USpg_hx-YcUnvr9nFY2Oc_DmxjbEJlkw8XlMzWoxnG2O7v7Zy9b3HneaHVzwcxcIDumkmfxGhXv1nJnkwXrSlfgp8SqcU_WbepYQofMo1a0/s1600/farahhotred.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzx_p6Fp5dn-Ht7DVTdl3lkiMZR_DSEDuCz7hRhtpeASIFtcGJWK6NAkvjlCkP-nIDvQdTcAn1jjZOyzC_lAyHDtfm2GA6_BgOHMKsh3bSIItExxYZk2NQpiCLKZw0usHT6g2UnS9uDNe6/s1600/farahlemon.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6Ywlrvg7B3uYIGZjDcT3-Y747TgWOmEl8joL39LUVQx1Q1PDVcjJLaZT9Mu4muESlZHU8ZfW6PB2i-NWKXhJ-v4lM6owfmHZF9zcOdYgeOOHOVX4vJYHNpAJ5juDZcBNVg_UDwU0jxNi/s1600/farahmix.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdBsQgSVVtDixwt-1vHVv-B2gGMOgRPKcLu37YWopmr-aq_LvVa8PJcCiZcgJqDaej3ZlVbwrXNI_grHGuNgCi1533arPRePN-FGL_YcxYW2gwzPs4JhuYlnJi0yC57ehXX9amMj2B7cG5/s1600/farahorange.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxt7NBggRAlPHgNzy7a3jWFyICDaayEX9ki4-LnGwe41sYHZr9ASH92QjnzGm8RwhSKAOTYsYn_PZNGC9zvBb2HDcJWEB2S0b2PLrYpujJ1qhpDO7J56_5BuNJoPzNm-CLrvyf2EmmA7jE/s1600/farahpurple.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoQJwqmWjwBmISf-R5VvSkTwsxCFkZWoJr0mFRgdSlhot1NCa5QfgPFOUfnK-jzFaIMk9sXsdOoz1DlUcaFpPVQ9KrkXaD0cmGOTD_sOKhpzHMEZexZSX8dmd5W_hILtB9eM8Bgofx2C56/s1600/farahred.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1jY_hFuUCiStiaW8hdYRBj_u4UDJk3uAkt8ha-bfOyXuX5cuAdElw2QYtPmNKzmv7EC0Tm-B5SLOqCxo987DRka-muoyDwAwt-LAvRb_Egy8DfXH_BWVi3SeWDbI2qnNLInXu5n3vjjD/s1600/farahsoftpink.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8UZIuvpfp_8e4Oc3tbRbYGA60iB0d2ivG9tNzacS_Us4sznaWiQeTZbZT-5lsPz3mvbrO22Dab3fb-wlfVKWuN5RBXhMmxRd6RFS-QKR-PyARpCVPbRAM92rrD-8yU79tkQSA5Yr7zBVd/s1600/farahsoftpurple.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtAvkNXpsUuQ2IMNz5qLSHRGUuet3FAu1zxj1aX_5ngwom6Et6SDeiCFXBS2ZR8_DIQ0qTcXm6w7qEapMxOPORljOc3zLRNHtNJ2BiZCP9RblQTR9s6KlGO7GvgNNWwx8vmx9TiHdtmiUP/s1600/farahwhite.png

Selamat mencuba!

Shout Box