Cara Buat Buku Tamu Melayang
Sobat Blogger Semua, Apakah pernah melihat buku tamu yang berada di sisi kanan? yang akan muncul jika di klik. nah, Kali ini saya akan menjelaskan tentang bagaimana caranya membuat buku tamu yang melayang. Maksud melayang di sini bukang berarti buku tamunya terbang, tapi tidak dalam posisi widget yang sebenarnya. Caranya memang agak rumit tapi saya sudah membuat se simpel mungkin. Langkahnya
1. Masuk ke blogger
2. Masuk ke tab Rancangan
3. Jika belum punya buku tamu silahkan kunjungi www.shoutmix.com , bagi yang sudah punya tinggal edit buku tamunya
4. Jangan dulu dihapus kode buku tamu yang sudah anda punya
5. Copykan kode di bawah ini dan letakan di atasnya (kode buku tamu yang lama)
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2s9X9bnq-D-7HYUulujFVKa4deWiXr3ocvBPnETfTC5KQJH-DxHxBC4hg7flJjnWZcqGlhtzKcvN1T6vY1KdkkonAF2mD67HxBclRfrUZ1f6fyA7oaFpf4YlQ4nIAZ97SuAF_E_rA_MZx/') 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">
<p> Jangan Lupa Isi Buku Tamunya </p>
<!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="rexpectz" src="http://www5.shoutmix.com/?rexpectz" width="100%" height="460" frameborder="0" scrolling="auto"><a href="http://www5.shoutmix.com/?rexpectz">View shoutbox</a></iframe><br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br /><!-- End ShoutMix -->
<br/>
Anda berminat buat Buku Tamu seperti ini?<br/>
Klik di
<a href="http://www.fikriblaze.co.cc/2010/12/cara-buat-buku-tamu-melayang.html">
sini </a>
<div style="text-align:right">
<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>
6. Ganti kode yang berwarna merah dengan kode buku tamu yang sudah anda punya.
7. Lihat hasilnya
Selamat Mencoba
Posting Komentar