Cara membuat buku tamu show/dari atas




Cara membuatnya :
Login blogger
Rancangan, Tambah Gadget,  Html/Java Script
Dan Simpan kode berikut :

<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.gbcontent{
float:left;
border:2px solid  #0F0;
background:#ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!--  Script Chatbox nya disini -->

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

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

<a class="west" href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_EpebXzyX_RRVUJmatndmzBXlrOhqCPw5gzl3g3W47Obv-6BsSJLKU4HZhvj4qFTRnBqGww_ZY5lOqQvjaJRnQLcl7iBQdhviucdcc4VWmJoDoyPQsugUSWKFVvpkLFNWfNTF2li_-I/s1600/Guestbook.png" border="0" /></a>

4. Simpan dan lihat hasilnya

Pertama melihat menu ini ada pada blog  http://ozaena.blogspot.com/ kayanya bagus jadi saya tertarik membuat Buku tamu showhide ini, sangat menarik dan kreatif, dan cari tahu cara membuatnya dan ternyata bisa dengan edit-edit script menu shoutbox showhide lainnya. Selamat mencoba

Tidak ada komentar:

Posting Komentar

-Music-

 

Welcome In Kode Blogger

Contoh Sliding Login Dengan JQuery

Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member

Tutorial Blog

Untuk membuatnya Silahkan : Klik Disini

Member Login

Lost your password?

Not a member yet? Sign Up!

http://www.blogger.com/img/blank.gif