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..
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.
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
