Cara Buat Buku Tamu Show Hide Melayang

Saya Hanya Ingin share aja... 

Mungkin ada yang berminat silahkan ikuti langkah2 dibawah..
Langsung Saja
 
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya

<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(URL);
}
.atcontent{
float:left;
border:2px solid #7FFF00;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsTvprA8EjwpFWirexcFML4XciLF1IcOOXRQ7AVP7XOi_eCoBpO9LBOttYAByq9vCsN1Ce9QzDZ7Hkax7U6sc3ara3g-W5YteK5XoyxUjvHN1bQfP3tDa6CZ0PiKTNcC0NIeYaZ0AqM3pW/)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsTvprA8EjwpFWirexcFML4XciLF1IcOOXRQ7AVP7XOi_eCoBpO9LBOttYAByq9vCsN1Ce9QzDZ7Hkax7U6sc3ara3g-W5YteK5XoyxUjvHN1bQfP3tDa6CZ0PiKTNcC0NIeYaZ0AqM3pW/)#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.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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg35mQTvJpGdfL8jeHe-RYvpbH2Mti4C95DegtvlDYD5bElQeJz8y5cz0gQRW_Ym2QBg784uJJVUvS4_RStF3vAbqQiRzi_YjNs8fu2KK1EoZwPcrcRCmCVcBtzYFj3xqe4SpKvVLLS_9CN/) no-repeat;">


--> Kode Cbox Disini <--


</div>
</div>


<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg33yhbQS9xUcILr8JwnUMCV2HlGQcsSK0nj10Nf0YlY2TxYugCphEeFyLGPV0lhWgApnuX5wJhiEKYjwAU1XhunEKi_ab-Ge1rFl3E7b3IliB8Ravkv2Yhs8FnkLeoEwF_thwAgj5UE2kZ/" alt="close" title="Click here to Close Cbox" /></a></div>
<div align="left"><font size="2"><a href="http://www.uttafreak-987.co.cc/2011/04/cara-membuat-buku-tamu-blog-showhide-di.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By Fikry Arpendos</span></div></a></font></div>
</div></div>


<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_BcefHKSHgqaaIVJ1NvXxwYiC0vED1tAL6ofx7F_tmW74Klr2JgBt1C6-qoIBrLnNWVhzj4988YS1Pbkl-Otw5YW3Jd7A-amvutA51E91xxFfMeMuA3lNxsmiDKOIUkKkBPFm4FqLP9gN/" alt="cbox" title="Click here to open Guest Book" /></a></center>


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

5. Save...

Note ::

- Yang berwarna Hijau adalah URL background kembang api dan kode warna backgroundnya (*Background dapat diganti sesuai selera sobat)
- Yang Berwarna Biru adalah background cbox.
- Tang berwarna Merah ganti dengan kode Cbox.
- Dan yang berwarna Pink adalah URL icon tombol.
happy blogging....
selamat mencoba gan