Thursday, November 04, 2010

CuStom ShoutBox

Cabtik juga tgk custom Shoutbox floating kat blog page so tutorial harini adalah untuk create chat box supaya floating kat tepi blog page. Cam kat tepi tu.. Korang leh try step kat bawah ni

1) Bukak Dashboard - Page Element - Add Gadjet - HTML/Javascript

2) Copy semua code dekat bawah ni

<em><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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUajW9QxfF6_8kmlOU-tdxxdVqbmutbeUyB67W5j0-OyCWu3Lv6j3yJVlJ0C6FDng035d6uFS3eoJcNhoFrcFzrVLgGdQq3RiEnpB00Mg54Z8I5LC4JVpcj3TTIbBLjdYfZPL9jLzXSkD8/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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">

COPY DAN PASTE CODE CHATBOX KORANG DEKAT SINI YER.

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close/tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
.</em>

3) Then, gi tengok balik code dekat atas ni dan copy paste code sebenar chat box korang kat tempat yang I suruh tu.

4) Tak payah tulis apa-apa title dekat gadjet ni.

5) Tekan Save. Then siap! Heeee~~

Extra!

1) Tapi kalau korang nak edit sendiri gambar chatbox korang macam chatbox I (Alaaa...yang I letak gambar adik I tuh, Chacha), korang boleh edit sendiri guna photoshop tak pun guna photoscape sudeyyy. Size pandai-pandai lah korang resize ekkk.

2) Replace link gambar baru ke link lama. (I dah bold kan dah link gambar tuh kat code atas tu ekk)

Share: