Sebenarnya ini info jadul tapi dari pada gak ada kerjaan mening posting,, hhe

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQdDZCR1y5pUEpr6Y_hI5TOnQc5TMFZ0hguI9M3-oYNd3XC9druY1Yp3yfxyQQ1nRo5tYDBlYY8Y6tqqoZrFFWnGSg_vXhZpxuLD22zqNcVQfAhqfo-l03aOtuXiLD3R7FN8HZItGen1Y/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">Keterangan
<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>
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