X-Steel - Wait
TERIMA KASIH ATAS KUNJUNGANNYA DAN JANGAN LUPA TINGGALKAN KOMENTARNYA

Jan 23, 2013

Cara membuat guestbook di samping

oke kalau sobat sudah memiliki chat box atau shout mixsilahkan 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


<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

0 komentar:

Post a Comment