Salam
kawan-kawan. Kali ini saya akan memberikan tips sederhana lagi. Tips
kali ini adalah bagaimana cara membuat buku tamu blog kita agar bisa
buka tutup. Biasanya buku tamu hanya di tempelkan saja di halaman blog.
Tapi dengan sedikit tambahan script, maka buku tamu kita akan kelihatan
lebih keren dan elegan. Script yang ada ini juga tidak hanya untuk buku
tamu saja, kawan-kawan juga dapat menggantinya dengan gadget yang lain
seperti gambar atau lainnya sesuai dengan keinginan kawan-kawan.
Biar
tidak kelamaan, langsung aja begini caranya. Seperti biasa ya kawan
login di blogger dengan ID yang kita punya dan menambahkan gadged
seperti biasa dengan cara:
* Klik menu Tata Letak atau Design setelah login
* Klik Elemen Halaman (Page Elements)
* Klik Tambah Gadged
* Klik HTML atau JavaScript
* Lalu Copy paste kode dibawah ini
* Klik Elemen Halaman (Page Elements)
* Klik Tambah Gadged
* Klik HTML atau JavaScript
* Lalu Copy paste kode dibawah 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://i1211.photobucket.com/albums/cc427/aerzrock/tabs.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #047df8;
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">
[MASUKAN SCRIPT KODE BUKU TAMU ANDA DISINI]
<br/>
Mau buku tamu seperti ini kawan?
<br/>
Klik ini
<a href="http://aftanet.blogspot.com/2011/06/membuat-buku-tamu-blog-buka-tutup.html">
sini
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
NB:
*URL gambar bisa kawan ganti dengan gamabar kawan sendiri yang lebih bagus. Kalau yang standart itu bikinan saya sendiri.
*Ganti [MASUKAN SCRIPT KODE BUKU TAMU ANDA DISINI] dengan script buku tamu yang kawan punya.
* Setelah yakin anda benar memasukkannya lalu klik Simpan
* Lihat hasilnya deh.....moga manfaat ya kawan2...
Sumber : aftanet.blogspot.com
0 komentar:
Posting Komentar