Membuat Chatbox Buku Tamu Keren Melayang di Samping Blog

Widget chatting online yang populer ini di dunia blogging di sebut dengan chatbox atau kalau di indonesia di sebut dengan buku tamu karena bentuknya yang menyerupai selembar kertas, metode pembuatan widget tersebut harus melalui proses pendaftaran atau pembuatan akun chatbox, sehingga dari akun tersebut nantinya anda bisa menghapus komentar yang tidak di inginkan.

Sebenarnya anda bisa langsung meletakkan di HTML java scrips secara langsung tanpa tambahan kode HTML namun jika di paste secara langsung tampilan chatbox tidak bisa melayang di sisi blog. Dan jika anda ingin membuat chatbox melayang di samping blog terlebih dahulu harus menambahkan kode java script yang sangat banyak jumlahnya, perlu di garis bawahi bahwa chatbox melayang sangat memberatkan loading blog. Untuk itu saran saya sebaiknya gunakan saja scara langsung.

namun jika anda tetap ingin membuatnya tampil melayang di sisi kanan atas blog, silahkan tambahkan kode berikut ini di (dalam kolom taxtera)nanti secara otomatis akan terbuka jika di sentuh menggunakan cursor

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/563708_579672962051258_1282169300_n.jpg') 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>

PASTE KODE CHATBOX ANDA DI SINI

<div style="text-align:right">
|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div>

Coba anda perhatikan pada tulisan "PASTE KODE CHATBOX ANDA DI SINI" tersebut di ganti dengan kode chatbox, cara mendapatkan kode tersebut caranya sebagai berikut.
Bagaimana Cara membuat buku tamu di blog, simak tutorial berikut ini:
1. silahkan kunjungi situs http://www.cbox.ws/
2. Klik tulisan besar "Get your own free cbox now " di halaman tersebut
3. isikan data yang di perlukan seperti pada gambar di bawah, jangan lupa alamat email anda yang masih aktif.

4. setelah data semua sudah siap klik "create my cbox" apabila data semua di anggap benar jika berhasil akan ada pernyataan "cbox created"
5. Berikutnya cek email masuk anda, dan klik link aktivasi yang di berikan sesuai perintah dalam email.
6. maka anda akan menuju halaman cbox, selanjutnya login menggunakan username dan pasword anda dan klik tanda panah kuning untuk masuk.

7. anda akan menemukan kode pada halaman tersebut, seperti gambar di atas, silahkan kpi semua kode dan paste di tengah kode yang di sudah saya sebutkan di atas. Cara memasang di blog cukup di HTML/ Java script, dan lihat hasilnya

Share this article:

Kategori

Membuat Chatbox Buku Tamu Keren Melayang di Samping Blog

Paling Banyak Di Baca