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


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~


9 Responses to "Cara membuat Guest Book keluar dari atas"

  1. wah, boleh di coba nih.. thx ya.. n salam kenal.. :)
    kunjungi balik ya ^_^

    ReplyDelete
  2. oke sob aq kunjungi balik, salam knal jga

    ReplyDelete
  3. blog aku sngat jelek tolong ajarin dong
    ne blog aku
    http://wandipase.blogspot.com/

    ReplyDelete
  4. thx gan informasinya
    kunjungi blik ya
    http://ayeadblog26.blogspot.co

    ReplyDelete
  5. makasih sobat....mampir jg ya,,ane tunggu..

    ReplyDelete
  6. terimakasih atas ilmunya,,semoga bermanfaat^_^

    ReplyDelete
  7. thankz ,,,,

    kunjungi juga blog aq gan ,,
    http//yantoevolutionz.blogspot.com

    ReplyDelete

untuk berkomentar:
1. setelah Anda membaca artikel ini anda wajib komentar
2. komentar anda sangat saya harapkan
3.komentar anda sangatlah penting demi kemajuan blog kita
4. komentar anda bagaikan berlian yang tak ternilai harganya
5. Cantumkan link blog anda apabila anda berkomentar, agar blog anda ikut naik trafic nya