Cara Memasang Guest Book/Buku Tamu

Cara memasang Buku Tamu/Cbox Part II Melayang berbagai arah Di blog - Gastuwi Blog's

Cbox Atau Lebih di kenal Buku Tamu. CBOX - merupakan fasilitas buku tamu yang satu-satunya  di google dengan gratis. dan pada kesempatan ini saya berikan gratis sesuai Cbox di template saya namu sobat tinggal memberikan / mengcustom sendiri agar lebih keren.dan sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS namun ingat kebagusan blog kita tergantung bagaimana cara kita mendesignnya.

Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah:

1. Seperti biasa sobat harus Login dulu pada akun blog sobat
2. Pilih Tata Letak
3. Tambah Gadget HTML/Java Script
4. Selanjutnya copy paste kode script di bawah ini dan masukan ke 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/AVvXsEg8csruroBG8U-K8mxshmddxVG3VWdqg0S_3Qg3ZE1tQ_HR9IPllEL6O0wOmbieHp_fyVdKD3BCJglMgYPJHjxq0X_U075ou_Po4y2DKQRh1qRChK1pHFUSJ1zoDZ7bM82CnOwwen7sfxQ/s1600/chatbox.gif" alt="cbox" title="Buka Chat Book"/></a></div>
<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/AVvXsEhpx9H-PlPTHaH8x_z_SqrfNRMlnqwH1mZB9bai_zQbcd1CsgUL7RGgDn-SXm4efRWivSNGYC5YIBmesfmQ83VSR9Cl4aEMQjjOrXYS0tG_51loGTb3ggNviGdCdBEwXSsg5c6qdo7T2nsT/)#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/AVvXsEi0auC7Y-JX3oqOZiNihAqz8gkSNXojp3KfQU_E56hyxiLa0qVYX5S5CUaslpNmY3g619YT-aDuuL2B0mEfSowaMZMQ7G8K4BfUoPNUgRylRnf_Q_uINzmQDDRHXJiQ27aVlRBVigwB3gE/s1600/gastuwi-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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpMjsHxF8jwssHfyfDiZH18cY11EcqUPPjeBxe3n2eglKf_Koqlri-RsnHHlLgrPj1epoqoCyEw8fsS5UTxtb9TQzpKUFHNxEP3bcNdg0Pb2kLPe3hC3bFwl3WloJNh9L8iCHh5xHwJx0/s1600/eagle2.gif) no-repeat;">

Code CBOX/Buku Tamu sobat

</div>
</div>
<br />

<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script></div></div>
Klik save / simpan.

Keterangan:

1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
2. Kode warna Hijau 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. Kode warna Orange adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
4. Texts berwarna Biru adalah tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).

Demikianlah cara memasang Buku Tamu/Cbox Part II Melayang berbagai arah Di blog.
Semoga bermanfaat bagi sobat.