Informasi|Berita|Teknologi|Tata cara|Pembelajaran|Tutorial|Tips

[ Kontes ]

Buat Chat Box Melayang


Sebelumnya ane udah ngasih tahu caranya buat chatbox di blog,sekarang ane kasih tahu gimana caranya buar chat box bixa melayang bukan di sidebar aja,
Caranya.


1.Buat chatbox anda terlebih dahulu,untuk cara membuat chatbox,
2.Masuk ke akun blogger sobat.


3.Ke tata Letak


4.add gadget


5.lalu masukkan script dibawah ini



<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://i37.tinypic.com/345o85i.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
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">

 <-- INI Kode Chat boxnya

<br/>
Anda ingin membuat buat Buku Tamu seperti ini?<br/>
Klik  Di aj Di Sini

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


6.buat kode chat boxnya bisa dganti kok
7.Simpan.


Beres deh,,.,gampang kan


Selamat Mencoba.,,., :D
Contoh bisa di liat sendiri di blog ku

Back To Top