CARA MENAMBAH CHATBOX KE DALAM BLOG

Chat box atau buku tamu merupakan hal yang tidak asing lagi bagi sobat widget ini dapat digunakan untuk ngobrol/ bercakap-cakap antar sesama blogger. Banyak sekali cara pemasangannya tapi yang saya akan gunakan adalha cara yang mudah saja. Sobat bisa meletakkan buku tamu ini di segala arah mulai dari kiri,kanan,atas,bawah. langsung saja , ini caranya silahkan diperhatikan :

1. Sobat masuk dulu ke akun blog sobat 
2. Kemudian pilih layout/tata letak 
3. Setelah itu klik add gadget, pilih html/javascript 
4. Kemudian masukkan kode berikut

<style type="text/css">
#at{

position:fixed;

right:35%;

z-index:+1000;

}

* html #at{position:relative;}

.attab{

height:0px;

width:0px;

float:top;

cursor:pointer;

background:url(url);

}

.atcontent{

float:left;

border:2px solid #fff;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg1dNuU78beRudJj0SEbj1LxA0tTBstCE7H6LO-BKccX4aH-9wnWvZwqn-BKZvdJYftYCKW2qgQxCOIdd4OAZTVZJJekXghUMXqNzTpZHyWvQR4DeFBqeEiOYtT4_16MNBv2pYqmDq5Fyy/)#000000 repeat-x bottom center scroll;

-moz-border-radius:10px;

padding:10px;

}

.atcontent:hover{

border:2px solid #fff;

background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;

}

</style>

<script type="text/javascript">

function showHideAT(){

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

var w = at.offsetWidth;

at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);

at.opened = !at.opened;

}

function moveAT(x0, xf){

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

var dx = Math.abs(x0-xf) > 25 ? 35 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

at.style.bottom = x.toString() + "px";

if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}

}

</script>

<div id="at">

<div class="attab" onclick="showHideAT()"> </div>

<div class="atcontent">

<div align="center">

<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

Strip kode cbox sobat

</div>

</div>

<br />

<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>

</div></div>

<script type="text/javascript">

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

at.style.bottom = (-200-at.offsetWidth).toString() + "px";

</script>

Ket. :

1. 1. Tulisan yang berlatar kuning bisa sobat ganti dengan tulisan top / right/ left karena tulisan itu berarti dimana sobat meletakkan chat box/ buku tamu sobat.
2. Tulisan yang berlatar hijau ganti dengan script kode chat box sobat. Untuk mendapatkan script chat box sobat silahkan klik di sini
3. Tulisan yang berlatar merah bisa sobat ganti dengan url sobat/ tidak..terserah selera sobat Untuk memunculkan chat box/ buku tamu tsb pasti diperlukan tombol untuk memunculkannya.nah caranya seperti ini :

• Masukkan kode dibawah ini bersamaan dengan kode script diatas

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisay6m6RGvij-T9SsPNSJiC22PAsyTIcv71CrOvrNxM7XfYqrW-s5Cw_lY-B4IkSeNrwr5FQ1STNdQEMmF0w0OAgr0Cxb84pdMVCQNRvJZFGrI8QgCj6xzefJnOYTrup7PoECVPCdzuzlz/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

akhirnya selesai juga artikel saya kali ini, semoga bermanfaat bagi anda semuanya.

TERIMA KASIH

Tweet

Fb

Postingan terkait:

Ditulis Raka — Sunday, August 11, 2013 — Add Comment — Tutorial