Cara Pasang Buku Tamu / CBOX di Blog Keren

Cara Pasang Buku Tamu / CBOX di Blog Keren - Cara Pasang Buku Tamu / CBOX di Blog Keren - Cara Pasang Buku Tamu / CBOX di Blog Keren. Cbox sering kali disebut juga oleh para blogger dengan buku tamu, sekarang saya akan share bagaimana Cara Pasang Buku Tamu / CBOX di Blog Keren. Jadi kita bisa berkomunikasi dengan orang banyak selain melalui komentar ataupun yang lainnya.

Demonya anda bisa lihat DISINI

Berikut adalah Cara Pasang Buku Tamu / CBOX di Blog Keren :

• Anda dapatkan kode script cboxnya di  http://www.cbox.ws/
• Setelah itu kita login dengan akun anda
• Tata letak > HTML/java script
• Kemudian masukan kode script dibawah ini ke HTML/java script ( gak usah di kasih judul)

<style type="text/css">
#at{
position:fixed;
right:40%;
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/AVvXsEhp7F61PU029nckz9uJzsJKYe78_lXfL4jcvgvPwogKP0AnlWPUHDH6-J2HsCHivCcTSTc2c0jntrGb3elktEDGiBzfpBY6HSysQxrC5HhV3MZd6HAcNKBg6PyCQveAl2-_yzPZO7KixHvK/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp7F61PU029nckz9uJzsJKYe78_lXfL4jcvgvPwogKP0AnlWPUHDH6-J2HsCHivCcTSTc2c0jntrGb3elktEDGiBzfpBY6HSysQxrC5HhV3MZd6HAcNKBg6PyCQveAl2-_yzPZO7KixHvK/)#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://i1241.photobucket.com/albums/gg516/iancahya/6_zps675cb5ae.jpg) no-repeat;">

CODE SCRIPT CBOX ANDA

</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 :
Warna biru : jarak cbox . silahkan anda sesuaikan
Warna merah : silahkan ganti dengan gambar yang anda inginkan
Warna pink : kode script yang sudah anda dapatkan

Belum selesai, sekarang kita membuat tombol Cboxnya :

• Masih di Tata letak > HTML/java script
• Masukan kode scrpit dibawah ini kedalam element HTML/java script

<div style="position: fixed; top: 55px; left: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://lh4.ggpht.com/_1j80TgNqd_8/TS3MlHxaygI/AAAAAAAABVo/P36anu_ToeA/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Silahkan yang warna merah ganti dengan gambar yang sesuai anda inginkan.

Dan silahkan lihat hasilnya. Sekian post Cara Pasang Buku Tamu / CBOX di Blog Keren. Nuhun.