Cara Membuat Show / Hide Guest Book Dari Atas

 

 vicky-multi.blogspot.com - Sharing Tips Cara Membuat Show / Hide Guest Book Dari Atas.

Kali ini saya akan membagi tips membuat guest book show hide dari atas. Bagi sobat yang ingin memiliki guest book seperti ini. Langsung saja ikuti tutorial di bawah ini.

1. Pastikan sobat sudah login pada blog sobat
2. Langsung beralih ke halaman Rancangan
3. Selanjutnya klik Tambah Gadget dan pilih HTML / Javascript
4. Kemudian pasang kode di bawah ini

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:autopx;
width:autopx;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #FF0000;
background: #F5F5F5;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:5px;
-moz-box-shadow: 0px 2px 5px 0px #FF0000;
}

</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:#F5F5F5;">

<!-- Taruh kode chat box sobat Disini -->

</div>
</div>

<div align="center"><a href="javascript:void(0);" onclick="showHideAT()"><input type="button" value="Close" class="close" /></a>
</div>

</div></div>

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

<div style='display:scroll; position:fixed; top:80px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://1.bp.blogspot.com/-dsspRx_lf3M/TvvZ4De97aI/AAAAAAAAAAw/PTp1z_YvqJE/s1600/Chat+Book.png"  /></a>
</div>   

5. Simpan dan lihat hasilnya

Keterangan:

• Ganti tulisan  yang berwarna merah dengan kode chat box sobat
• Jika sobat ingin merubah garis pinggirnya ganti kode yang berwarna biru
• Jika sobat ingin merubah tab picturenya ganti kode yang berwarna pink
• Kode yang berwarna hijau adalah kode background nya

Join'Z VickyZ | Jombang Community

Terima Kasih sudah berkunjung di Blog saya Please Klik Tombol Suka/Like Di Atas Ini,Thanks