Membuat Buku Tamu Yang Unik

Nih aku punya caranya gimana biar tampilan buku tamu kamu menjadi beda dari pada yang laen. Masih jarang mempunyai buku tamu seperti ini! Bisa dibuat tersembunyi, keluar hanya pada saat tulisan "Buku Tamu" di klik! Untuk CARANYA!!!

Masukkan script di bawah ini pada Java Script:

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

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

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

<div class="gbcontent">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe scrolling="auto" width="175" frameborder="0" src="http://www6.shoutmix.com/?yobiimel" height="400" title="yobiimel">
<a href="http://www6.shoutmix.com/?yobiimel">View shoutbox</a>
</iframe>
<br/><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!"^gt;ShoutMix chat widget</a><br/>
<!-- End ShoutMix -->

<a href="javascript:showHideGB()">
</a>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Pada teks yang berwarna Biru, teman-teman bisa menggantinya dengan ShoutMix atau apalah dengan milik teman-teman sendiri!

Selamat mencoba!!!

ARTIKEL TERKAIT: