Membuat Widget Chat Box 1 Menit

Cara membuat buku tamu/Chat box di blogspot kali ini dengan cara disembunyikan atau hidden alias tidak ditampakkan yang biasanya berada pada side bar sebuah blog. Tapi Buku Tamu ini di sembunyikan di sebelah kanan blog anda. Bingung? Contohnya pada blog saya ini, sobat bisa lihat di samping kanan blog dan silahkan lihat dan coba bagaimana cara kerjanya.

Buku tamu/Chat box pada sebuah blogger sebenarnya bukan sesuatu yang wajib dipasang, tapi pastinya kita akan mendapatkan keuntungan apabila kita memasang buku tamu di blogspot yaitu selain mempermanis blog juga sebagai sarana komunikasi dan sapa-menyapa antara pengunjung dengan admin.

cara membuat buku tamu/Chat box di blogspot, sobat bisa memanfaatkan situs-situs penyedia buku tamu gratis yang mudah sobat dapatkan di internet, salah satunya adalah www.cbox.ws .

Silahkan sobat kunjungi dahulu situs tersebut, mendaftar kemudian ambil kode scriptnya yang nantinya akan dipasang kan ke dalam blog sobat.

Jika sobat ingin mendaftar silahkan baca artikel Saya Cara Mendaftar Blog Anda Ke Cbox

Setelah sobat mengcopy kode script buku tamunya, Langkah Berikutnya adalah :

1. Masuk ke blog sobat "Log in"

2. Pilih Tata Letak

3. Pilih Tambah Gadget

4. Pilih HTML/javascript,

5. Kemudian masukan kode di bawah 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOXXGo7_ucR_eXUJWhPVZAJo5y_T9WBok8cygyLgY-1yPErNj3G53-ERjDeeo7IecnQrUY5LQRwA8QDr-yOo5hjHn4PCJ6VqrOsAX92Y_MzxKq7v1Mc67rLJkL_ac96NWtXFDdN8wKm3I/s1600/bukutamu.png') 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">

(Silakan Pasang Kode Buku Tamu yang sudah di copy tadi Di Sini dan Hapus Kalimat yang saya kasih warna merah ini kemudian masukan kode Cbox anda! Jika Anda Belum Mendapatkan Kodenya, Silahkan Baca Artikel Saya Cara Mendapatkan Kode Cbox)

<div style="text-align:right">

<a href="ALAMAT BLOG ANDA">[get this widget]</a>><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></div></div>

Setelah di pasang Hapus Tulisan Warna Merah tadi dan masukan kode cbox anda, maka hasilnya akan seperti ini :

Apabila sudah di paste jangan lupa di simpan “save” pekerjaan sobat. Dan lihat hasilnya.

Bagaimana mudah bukan “Cara membuat buku tamu di blogspot”? Selamat mencoba.. Jangan lupa komentarnya ya kalo sudah jadi....

Tweet