Membuat buku tamu di sisi browser

He he he. Bingung amat sich. Kalau menurut saya keren banget. Bahkan ada sebagian blogger yang membuat variasi dengan tampilan buku tamu yang miring-miring kayak menara visa. Tapi dalam contoh saya berikan yang seperti di bawah ini :

Bagaimana cara membuatnya?

Gampang banget. Tapi maaf tutorial blog kali khusus pemilik blog blogsot. Untuk blog WordPress seperti muktiblog ini saya coba tidak bisa. Malah kacau.

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/AVvXsEirgNVJx-P9UUN7S2fWIJZ26m1Xwu0t_w54wxcHzGcax0X5A_otnQLRvJ4wSTWno5uZdIHyJMOr55qBrXdYIzV7n0-viFdoVUfPFbDq-YNZJFRC8_bKHemys_xo0H6f5469_80yQ87kLc8x/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