Pasang Widget Hidden Chatbox

Chatbox widget, sebuah widget yang sangat populer di kalangan blogger dan pecinta wordpress. Kegunaan dari widget ini adalah untuk menerima chat dari user yang sedang blogwalking  tanpa harus online seperti di jejaring sosial ( facebook dan twitter ) dan beberapa forum online lainnya. Untuk selengkapnya, follow the tutorial below :



1. Pada Web Browser anda, buka situs http://www.cbox.ws/

2. Reigster apabila anda belum memiliki akun Cbox dan Log in. 

3. Masuk ke tab Look & Feel untuk melakukan kostumisasi pada Cbox widget anda.

4. Layout Options  : untuk kostumisasi ukuran dari Cbox anda
    Style Preset        : memilih template yang telah disediakan oleh Cbox  
    Colours & Font  : mengubah warna dari halaman Cbox anda
    Edit CSS             : melakukan kostumisasi secara Advanced terhadap tampilan Cbox anda

5. Setelah melakukan kostumisasi penuh pada widget Cbox anda, klik tab Publish! dan copy code cbox anda ke dalam blog anda ( Dashboad > Rancangan > Edit Laman > Add Gadgets > HTML )

Klik Publish! dan copy kode widget anda ke halaman blog

6. Pada langkah ini, seperti judul dari tutorial ini yaitu Hidden Chatbox, yang artinya adalah Chatbox tersembunyi. Fungsinya adalah agar tidak membuat halaman gadgets pada blog anda terlalu ramai dan terlihat lebih professional. Untuk menerapkan Hidden Chatbox pada HTML, tambahkan kode dibawah ini :

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #000;
background:#ffffff;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Tutup ]</b></a></div>

Masukan Kode Chatbox anda di sini

<script src="http://www.geocities.ws/alprablog/user/js/hiddengb2.js"></script>
</td></tr></table>
</div>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://i1202.photobucket.com/albums/bb372/alprablog/others/buku-tamu.png"/>
</a>
</div>

7. Pada tulisan yang berwarna merah diganti dengan kode Cbox anda.
8. SAVE dan lihatlah hasilnya. Jika berhasil maka tampilan di sisi blog anda akan seperti ini

Semoga bermanfaat ^_^

sumber ( alprablog  )