Thursday, March 10, 2011

Cara Membuat Buku Tamu Tersemubnyi

Sebenarnya ini info jadul tapi dari pada gak ada kerjaan mening posting,, hhe
Buku Tamu berguna untuk meninggalkan jejak pengunjung antar sesama blogger, baik itu tujuannya untuk bersilaturrahmi, atau hanya sekedar meninggalkan pesan, atau lainnya. sekarang kita akan membuat buku tamu yang sedikit berbeda, karena keberadaannya yang tersembunyi.
 maksudnya tersembunyi disini adalah tidak benar-benar tersembunyi tetapi terlihat sebagian saja, yaitu tombol untuk menampilkan Buku Tamu tersebut. berarti sistem ini tidak beda dengan tombol hide/show. contohnya bisa dilihat di blog ini, dengan cara mengklik gambar atau tombol seperti pada gambar di atas.

Bagai mana cara Membuatnya?? cekidot

1. Buka Blogger anda
2. Klik rancangan
3. Tambah gadget
4. Pilih "HTML/Java Scrip"
5. COPAS text di bawah ini

<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://1.bp.blogspot.com/_UOG1B5PS4L8/TUQuPlCjlbI/AAAAAAAAATE/NOObkC3QzwU/s1600/cebox.gif
') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
background:#999999;
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">
KODE BUKU TAMU ANDA DI SINI
<font size="2">
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</font></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Keterangan
Tulisan Warna Biru Bisa di ganti dengan alamat gambar sesuka anda
Tulisan warna Merah adalah kode warnabackground nya bisa di ganti sesuai keinginan anda
Tulisan Warna Kuning ganti dengan kode buku tamu anda

6. klik Simpan

Selesai....
Maka jadinya akan seperti ini

No comments:

Post a Comment

Powered by Blogger.