Membuat Buku Tamu Melayang

Buku tamu merupakan salah satu hal yang penting juga di dunia blog karena dengan adanya buku tamu pengunjung blog kita dapat menyampaikan keluh kesah, kritik dan saran dan lainnya tentang blog kita jadi antara pengunjung dan pengelola blog ada interaksi. Akan tetapi kalo buku tamu kita letakkan di sembarang tempat kadang juga mengganggu pemandangan nah kalo di letakkan di pinggir sisi kanan atau kiri kayaknya itu lebih memperindah ya..... hehe.. ini menurut saya lo ya....
Cara Membuat Buku Tamu Melayang Diblog, okey yang berminat silahkan baca sampai selesai dan praktekkan di blog sobat masing-masing... jangan lupa komentar ya.. makasih sebelumya....

Baiklah mari kita mulai Membuat Buku Tamu Melayang, silahkan sahabat lakukan langkah langkah dibawah ini :

1. Login ke Blogger

2. Pilih Tata Letak

3. Lalu tambahkan Gadget baru atau Widget Baru "Add Gadget"

4. Setelah itu pilih HTML/Javascript

5. Copy kode dibawah ini dan letakan kedalam Widget yang telah sahabat buat.

 <style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:142px;
width:60px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhTH3S-OGrYu7NOT1wvhqJYyQReTupCru4pAirJTDwkf5yyYiRRddMtawWStZJFFh8vXL4avGboSBIu8wYbhOlm6T8ZrG4sd7RKYm6W6qxZcIYr2K8CH2llZUid_NygtuwCCR5C4dZTZ4/s1600/chat+customer+service.png ') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #ff8000;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 60-w) : moveGB(50-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 KODE BUKU TAMU SAHABAT DISINI

<div style="text-align:right">
<a href="http://bit.ly/Ktz2ZT">BelajarMendesainBlog</a>><a href="javascript:showHideGB()">(BUKA)</a>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan :
Silahkan sahabat ganti MASUKAN KODE BUKU TAMU SAHABAT DISINI dengan kode Buku Tamu milik sahabat.

6. Pratinjau

7. Kalo sudah Mantab Simpan Template dan lihatlah hasilnya.