Tau chat box yang ada di home page blognya reggy kan? ituloh kotak merah di sebelah kanan kalau di klik keluar chat box? nah itulah yang akan kita bahas kali ini. Tapi sebelum membuat cboxnya tersembunyi ikuti dulu langkah - langkahnya disini. Jika sudah, ikuti langkah - langkah berikut:
1. Login pada blog anda
2. Rancangan
3. Tambah Gadget
4. HTML/Javascript
5. Copy kode di bawah ini
6. Simpan dengan tampa judul<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/AVvXsEgNlMtuVsMx1t9WPKUFXQ2LwfhmEOX_2jSf4re_wsX3Mlew4rhnXns5xnDKXmQIMJVS1xZT84WjbC3QKch6VLc0T9ZL6NbngiIkdoYMIfUbXarEpFif1ZCkKyPcG84wjgweJ6ujwrNrPMcZ/') 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">
-------Kode Cbox / Shoutmix / Lainnya---------
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Selesai Deh...
Ket:
- Ganti Tulisan yang berwarna merah dengan kode Cbox anda
- Anda juga bisa menggunakan kode Shoutmix pada tutor ini
No comments:
Post a Comment