Cara Memasang Buku Tamu Keren

Sebelumnya kita memang sudah membahas ini, dan kali ini kita akan membahas Cara Memasang Buku Tamu Keren tapi apa bedanya dengan yang sebelumnya??? bedanya kalau yang ini lebih keren, buku tamu yang ini bisa berubah-ubah tempat munculnya dimanapun kamu mau, misalnya di bawah atas kiri dan kanan. cara membuatnya juga gak susah-susah amat kok, Langsung aja kita praktekan tutornya>>>

1. Login blog kamu dulu

2. Pilih tata letak

3. Pilih Gadget HTML/Java Script

4. Lalu copy paste code HTML berikut dan 

<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/AVvXsEibsrw3Q9H-HGakJmYOFdzsUe4fNA9vc6_L7jQsKkW81OkUksIC3tUcwk4dAR8GfwdpIiTOlAH6Pp6FvJz5ulGV0DUF_l8K47XnIu1NyNa_-PFe13ymhiRtMDNai-FDbKSOoS-wyPKFiQ_k/)#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;">
Script 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>

5. Klik save / simpan.


Keterangan:

1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya.
2. Kode warna biru adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
3. Texts berwarna hijau adala tempat untuk menaruh script kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

Masih  belum selesai nih brow
Tetap login di akun blog sobat
Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script

<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/AVvXsEgbfbHrniM5mima91OMvHg0_GkAWRqFKfxo9drqGnj2_fk0dQyYBtj6LtIBWlPiFDNOPOGWlfDVXLOI6u14sFn3S2uHRW1loP7orP4yrdWFyILFIPld8p_Fhfdu84J1Mp8o8_8e2Uh5OMQG/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Demikianlah Cara Memasang Buku Tamu Keren Di Blog: Kiri, Kanan, Bawah, Atas. Semoga bermanfaat bagi sobat semua..:)