Jumat, 23 Maret 2012

Cara mudah Membuat Buku Tamu Buka Tutup di Sisi Browser.


cara membuat Buku Tamu Buka Tutup di Sisi Browser. . Kalau menurut saya keren banget. Bahkan ada sebagian blogger yang membuat variasi dengan tampilan buku tamu seperti ini dan unik. Tapi dalam contoh saya berikan yang seperti di bawah ini :
Bagaimana cara membuatnya?
Gampang banget. Tapi maaf tutorial blog kali khusus pemilik blog blogsot tidak bisa untuk Untuk blog WordPress ;

1. Login ke blogger.com
2. Klik Design atau Rancangan
3. Lalu klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukkan kode di bawah ini di area HTML/Java Script.
6. Jangan lupa masukkan kode Buku Tamu anda di tempat yang bertuliskan Kode Buku Tamu anda di sini. Ganti dengan kode buku tamu anda
Ini kodenya :
<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/AVvXsEgA7RyYrKIZE740d2BfZXP3_DVAm3MNKtynFqyN3F4PPrH3-e2maLweQ2Bcph0IOOu0O0ZEP_CB9r33ULPIO1X92D5-JB989eIuGJCZ70ft4yzMH0kqYopRbpk3zIimaVwt27mYmg37nhBU/s320/tabs.png’) no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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 onclick=”showHideGB()”> </div>
<div>
—-Kode Buku Tamu anda di sini—–
<div style=”text-align:right”>
<a href=”javascript:showHideGB()”>
[close/tutup]
</a>
</div>
</div>
</div>
<script type=”text/javascript”>
var gb = document.getElementById(“gb”);
gb.style.right = (30-gb.offsetWidth).toString() + “px”;
</script>
7. Terakhir klik Save atau Simpan. Lihat hasilnya.
Demikian saja artikel tentang Cara Membuat Buku Tamu Buka Tutup di Sisi Browser. Semoga sangat manfaat ya dan anda bisa puas dengan tampilan buku anda yang baru

Tidak ada komentar:

Posting Komentar