Cara Memasang Buku Tamu Di Blog

Cara Memasang Buku Tamu Di Blog - Cbox atau yang sudah biasa dikenal dengan sebutan Buku Tamu, sudah terlalu Mainstream ketika membahas tentang cara memasang buku tamu di blog. Baik dengan pemasangan script saja ada juga dengan penambahan CSS.

Tetapi kali ini saya akan memposting cara memasang Cbox auto hidden dari berbagai arah, maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, tergantung kalian dan ditambah gif sebagai Background.

Selanjutnya cara untuk pemasangan Cbox atau Buku Tamu ini sangat simple :

•     Pertama kalian harus Login terlebih dahulu di akun blog
•     Pilih Tata Letak/Layout
•     Tambah Gadget HTML/Java Script
•     Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.

<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(http://sewamobilandi.com/wp-content/uploads/2015/06/Background-Putih.jpg)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://sewamobilandi.com/wp-content/uploads/2015/06/Background-Putih.jpg)#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://sewamobilandi.com/wp-content/uploads/2015/06/Background-Putih.jpg) no-repeat;">
Pasang kode script kalian disini
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://sewamobilandi.com/wp-content/uploads/2015/06/Background-Putih.jpg" 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>

Keterangan :
Yang berwarna kalian bisa ganti dengan url foto atau gif
Warna untuk menentukan hidden
Texts berwarna adalah tempat untuk menaruh script kode cbox kalian.

 Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

1. Tetap login di akun blog kalian
2. 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/AVvXsEgYS3feq8YzduEZeS6SpFlqvQ-O-D7QvkJVQAm8WyPnE2KHW6ABU6VdeJe4AMWNLRO0dK06NCG556V-3xST1ThqRIAakFvAu72L3GHVaK5aNNhWiUZz2wAits0Abl37EF1153TeV7JlHG7r/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 

Kode berwarna hijau adalah gambar tombol, bisa kalian ubah dengan sesuai selera.
Kode warna biru adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
Kode warna kuning anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.

Location:

Berbagi :