hoho akhirnya bisa posting lagi :D, kali ini mo bikin postingan tentang cara bikin chatbox melayang or yang sering kita dengar floating chatbox.
udah lihat chatbox disebelah kanan atas, pengen yang kaya gitu?? ikutin langkah2 berikut..
langkah pertama :
silahkan login ke blog anda :)
langkah kedua :
buka rancangan or design tyuz klik edit html
langkah ketiga :
silahkan copy paste code dibawah ini diatas code ]]></b:skin>#habeebchuex{position:fixed; top:50px; z-index:+1000}
* html #habeebchuex{position:relative}
.habeebchuextab{height:250px; width:50px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9nNvfxRvQhSQQumvuHybSKgA0lYe8ApkaYF8FmfAoVxlYcPMdSSDxiFYJT84Ty2g5pY2UnwkIUHZM2CPKIesagHrNbaj6ZjVfuGzm15APWlghVCL7p2_P-QU9ZyH849qAKRFXxexd5XIY/s320/tabs.png') no-repeat}
.habeebchuexcontent{float:left;border:2px solid:#00FF80; background:#000000; padding:10px}
.habeebchuex-close{font-size:13px}
.habeebchuex-close{color:#db4b0c}
.habeebchuex-close a{text-decoration:none}
langkah ke 4 :
silahkan copy n paste code di bawah ini di widget kamu yang berbasiskan javascript/html.. or kalo ga punya widgetnya masuk ke design page elements, klik add a gadget.. pilih yang html/javascript.. lalu copy n paste code dibawah<script>
function showHidehabeebchuex(){
var DADcr = document.getElementById("habeebchuex");
var w = habeebchuex.offsetWidth;
habeebchuex.opened ? movehabeebchuex(0, 30-w) : movehabeebchuex(20-w, 0);
habeebchuex.opened = !habeebchuex.opened;
}
function movehabeebchuex(x0, xf){
var habeebchuex = document.getElementById("habeebchuex");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
habeebchuex.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehabeebchuex("+x+", "+xf+")", 10);}
}
</script>
<div id="habeebchuex">
<div class="habeebchuextab" onclick="showHidehabeebchuex()">
<div class="habeebchuexcontent"><center>
CODE CHATBOX or SHOUTMIX kamu
<a href="http://www.habeebchuex.co.cc">cara bikin chatbox melayang</a></div></div></div></center>
langkah terakhir :
tekan tombol simpan.. semoga bermanfaat, n lw ada kesulitan silahkan add comment or PM me :)
Nb : eh untuk code chatboxnya silahkan signup or login dolo dimari, or disini.
08 October 2010
chatbox melayang di side bar
Subscribe to:
Post Comments (Atom)








0 comment:
Post a Comment