Cara membuat Guest Book keluar dari atas

Guest Book adalah salah satu cara agar pengunjung lebih komunikatif dengan blog kita, agar pengunjung blog sobat bisa meninggalkan jejak dengan cara meninggalkan pesan pada guest book tersebut, pada posting kali ini saya akan memberikan tutorila mengenai "cara membuat Guest Book yang keluar dari atas namun tombol untuk ngeluarin guest booknya bisa dari samping" biar tidak kecewa silahkan liat dulu Demonya, silahkan klik tombol Demo di samping

 namun sobat juga sebelumnya harus memiliki CBOX atau SHOUT MIX terlebih dahulu, untuk cara membuat CBOX silahkan sobat bisa mengunjungi tautan di samping ini

Cara membuat Chat Box

oke kalau sobat sudah memiliki chat box atau shout mix

silahkan ikuti tuutorial berikut ini

• masuk ke blogger 
• Masuk Rancangan ->  add gadget-> pilih HTML/java script
• copy paste code berikut dan taruh di kotak HTML/javascript

klik show untuk melihat code

<style type="text/css">

#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #6B86D0;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</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.top = 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:http://i1148.photobucket.com/albums/o572/ahmadbj/GUESTBOOK111.png;">


<b><strike><!-- MASUKAN KODE CBOX/SHOUT MIX DI SINI --></strike>
</b>

</div>
</div>

<br />

<div style="position: fixed; bottom: 0px; right: 10px;width:150px;height:130px;">
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i1148.photobucket.com/albums/o572/ahmadbj/GUESTBOOK111.png" alt="close" title="Click here to Close Cbox" /></a></div>

</div>


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

Catatan:

• Ganti kode warna merah dengan kode CBOX atau shoutmix anda
• Anda bisa mengganti gambar Guest Book nya dengan Gambar lain dengan cara mengganti url gambar berwarna biru dengan url gambar keinginan anda, atau jika punya kereasi gambar sendiri anda bisa upload di photobucket atau lainya kemudian copy url nya dan masukin di kode warna biru

• kemudian save

oke sob makasih atas kunjunganya, jangan lupa untuk berkomentar oke. :)

~Good luck~

Tweet