Membuat Background CBOX

Melengkapi postingan tentang kotak chat ( CBOX ), kali ini saya akaan share membuat background widget Cbox dengan gambar pilihan kita.
Tidak usah panjang-panjang pengantarnya langsung aja kita mulai pada topik.

Langkah I :
1.Masuk Cbok dengan ID anda.
2.Klik Color & Font.

3.Hapus kode warna agar kotak cbox transparan.

4.Klik Apply.
5.Klik Publish! untuk mengambil kode script.

<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="250" height="305" src="http://www7.cbox.ws/box/?boxid=364306&boxtag=bb9z9t&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#025400 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="250" height="75" src="http://www7.cbox.ws/box/?boxid=364306&boxtag=bb9z9t&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#025400 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>

6.Perhatikan tinggi koyak Cbox
   height : 305 + 75 = 380
   Jumlah ini adalah ukuran tinggi gambar yang akan kita buat background.
7.Upload untuk mengambil URL gambar tersebut.
   Contoh URL gambar putri saya yang jadi background Cbox saya :

http://i754.photobucket.com/albums/xx181/ciptocamsa/tyas-cbox.jpg

Langkah II

1.Masuk Blogger dengan ID anda.

2.Pilih rancangan.

3.Tambah Gadget.

4.Pilih HTML/Javascript

5.Tambahkan kode di bawah ini :

Catatan :

* Warna merah = ganti dengan URL gambar milik anda.

* Warna Coklat = ganti untuk mengatur gambar background

* Warna Hijau = ganti dengan kode script cbox milik anda.

Tambahan :

Untuk memasang Kotak chat melayang ganti kode di atas dengan kode di bawah ini :

position:fixed;

top:100px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:250px;

width:50px;

float:left;

cursor:pointer;

background:url('http://i754.photobucket.com/albums/xx181/ciptocamsa/coollogo_com-115637084.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #81F781;

background:#81F781;

padding:10px;

}

</style>

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>

</div></center>

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div></div>

Jika tidak terjadi kesalahan maka kini anda sudah memiliki kotak CBOX dengan backgroun yang baru.
Mau gonta-ganti gambar background juga boleh...!!
Sampai disini dulu semoga ada manfaatnya..!!
Jangan lupa beri komentar anda untuk perbaikan blog ini kedepan.!

Bagikan artikel via :