membuat "buku tamu tersembunyi"

Trik ini cukup menarik juga untuk menghemat lahan di blog kamu, sekaligus untuk membuat blog kamu jadi lebih keren.

Ini membuat buku tamu kamu "tersembunyi", tapi akan terlihat kalau kamu mengklik tab-nya. Kamu bisa lihat contohnya di http://infotentangblog.blogspot.com/.

Caranya, copy-paste aja kode di bawah ini sebagai widget HTML/JavaScript Blog kamu:

Code:

<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">

<!-- Ganti ini dengan kode buku tamu kamu -->


<div style="text-align:right">
Widget by: <a href="http://infotentangblog.blogspot.com/2009/07/membuat-buku-tamu-tersembunyi.html">
Info Blog
</a> |
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

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

Jangan lupa, ganti

Code:

<!-- Ganti ini dengan kode buku tamu kamu -->

dengan kode buku tamu kamu.



by rumah blogger