Buku tamu ato kalo saya bilang lebih tepatnya chat box banyak di pake di blog. Fungsinya tentu buat ngemudahin pengunjung chat sama pengunjung laennya ato sama yang punya blog. Juga bisa buat absen pengunjung setia blog loe gan. Kalo buku tamu di pasang di sidebar bakal ngabisin tempat gan, jadi bagusnya kalau kamu pasang buku tamu melayang di blog.
Buku tamu melayang yang keliatan cuma tabnya doank jadi kalo di klik baru muncul chat boxnya gan.kalau kamu ada niat pasang buku tamu melayang di blog kamu? baca terus artikel ini sampai selesai.
saya akan bagikan 2 script cbox yang saya ketahui,tapi kamu bisa engkreasikan sendiri dengan cara mengotak atik code script nya.
Silahkan langsung disimak gan, gak pake edit HTML tinggal nambahin widget di blog aja gampang banget.
Cara Membuat Buku Tamu Melayang DiSisi Kiri Blog
Yang pertama kamu harus punya kode chat box gan, cara dapetinya gampang kamu tinggal registrasi di situs yang nyediain chat box gratisan. Kamu bisa daftar di
CBOX gan. Kalo mau di situs laen juga boleh sesuai selera kau aja gan. Tapi saya rekomen di CBOX karena tampilannya keren,kalau belom paham silahkan baca dulu yang
INI
Kalo udah dapet kode chat boxnya, sekarang Kamu masuk Blogger terus pilih Layout dan klik Add Gadget lalu tambahin HTML/Javascript. Lalu tinggal di copy kode di bawah ini gan dan pastein di kotak kosong HTML/Javascript tadi
<!-- Mulai Hidden Widget -->
<style type="text/css">
.rifaldhi_fixed{
position:fixed;
top:150px; /*jarak dari atas*/
left:0px;
z-index:+1000;
}
* html .rifaldhi_fixed {position:relative;}
#hidden_rifaldhi {
display:none;
border:2px solid #616258; /*ketebalan dan warna kotak*/
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#f1f1ea; /*warna latar*/
padding:3px 10px 0px 10px;
}
</style>
<div class="rifaldhi_fixed">
<table id="hidden_rifaldhi" cellpadding="0" cellspacing="0">
<tr><td>
<!-- Gambar Atas -->
<div style="text-float:right"><a href="javascript:void(0)" onclick="rifaldhi_showHiderifaldhi()" title="Close/Tutup"><img style="border:0px; width:auto; height:auto;" alt="Guestbook" src="http://blog.akakom.ac.id/marcell/files/close.png" /></a></div>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
Code Cbox Anda
<!-- END CBOX -->
<br/>
<script type="text/javascript" src="http://bukutamu-zies-name.googlecode.com/files/bukutamu-zies-name.js"></script>
</td></tr></table></div>
<!-- Gambar Samping -->
<div style="z-index:+5" class="rifaldhi_fixed">
<a href="javascript:void(0)" onmouseover="rifaldhi_showHiderifaldhi()">
<img style="border:0px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhVxhSn-Oqg4ez_O8vwYW4PPmBvp4WZx0qCw1NcvDrwX6Y0v4GsX-bXdIrmeaC9iLL-VnyNcYJcwDTGetTpuoo1Cv3AVETXqOgyptaDlJsMWYknDyJ8pUsrOWo64D-zW-nNrXFWTz8uToK/s1600/bt-biru.png" /></a>
</div>
<!-- Selesai Hidden Widget -->
Keterangan:
Tulisan yang berwarna
hijau adalah code Cbox Anda
tulisan yang berwarna
merah adalah gambar yng dapat anda ganti menurut selera anda.
Terus ada satu lagi gan agak unik srdikit
caranya sama.
<style type="text/css">
#at{
position:fixed;
right:5%;
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/AVvXsEgZJSqAuOqr8teO8HtF0sAhig9z1icwghK9mKJpzzQcINnqS9gVUQWBD5JxWQN-YwH9R5yJVWMYyAVBaGjfjjq5krwgJu-_dx-SVdW-reCdGq3dHt66lNPkdWTnYQF3L4HQQBfDu95HI3cj/)#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, -220-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;">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
Code Cbox Anda
<!-- END CBOX -->
</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 = (-220-at.offsetWidth).toString() + "px";
</script>
<div style="position: fixed; top: 100px; left: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhVxhSn-Oqg4ez_O8vwYW4PPmBvp4WZx0qCw1NcvDrwX6Y0v4GsX-bXdIrmeaC9iLL-VnyNcYJcwDTGetTpuoo1Cv3AVETXqOgyptaDlJsMWYknDyJ8pUsrOWo64D-zW-nNrXFWTz8uToK/s1600/bt-biru.png
" alt="cbox" title="Buka Chat Book"/></a></div>
silahkan dicoba gan moga bermanfaat
.jpg)
