Buku tamu di Blogger

Buku tamu merupakan komponen yang tidak harus ada di sebuah Blog pribadi. Keberadaannya hanya sebagai fasilitas paling cepat dan gampang dilihat untuk meninggalkan pesan. 
Buku tamu bisa diletakkan dimana-mana, misal di widget atau dibuat melayang. 
Berikut ini contoh buka tamu yang melayang dan muncul-sembunyi. 
Kodenya bisa dilihat di bawah ini:

<style type="text/css">
#gb{
position:fixed; 
top:50px; 

z-index:+1000; 
} 

* html #gb{position:relative;} 

.gbtab{ 
height:150px; 
width:30px; 
float:left; 
cursor:pointer; 
background:url('http://2.bp.blogspot.com/-mrsZX_-WDkk/Te5tiGXpqNI/AAAAAAAAAZg/hDLjMWDN6_U/s1600/bukutamu.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"> 
<!-- KONTEN --> 
Buku tamu disini, bisa berupa link atau embed buku tamu seperti cbox.ws
<!-- KONTEN --> 
</div> 
</div> 

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

Tidak ada komentar

Diberdayakan oleh Blogger.