Cara Buat Buku Tamu GuestBook Unik

Patah Online - Mempercantik blog menjadi wajib untuk dilakukan guna untuk menambah minat dan kenyamanan pengunjung atau visitor. Berbagai cara dan upaya yang dilakukan oleh para blogger untuk menjadikan blognya menarik dan yang pasti desain yang baik yakni desain yang tidak terlalu memakan banyak memori atau bisa diartikan load blog yang cepat sebagai patokannya.

klik untuk memperbesar gambar

Nah disini saya coba membahas bagaimana cara membuat Buku tamu atau Guestbook yang unik guna menunjang penampilan blog kita. Tanpa perlu lama- lama lagi kita langsung menuju ke tutorial

1. Masuk ke Blogger => Rancangan => tambah gadget
2. Pilih HTML/ JavaScript => copy pastekan kode di bawah ini
kedalamnya

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px dotted #ff0000;
background: #222222 repeat-y center;
-webkit-border-bottom-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">

MASUKAN KODE CBOX/ BUKU TAMU DISINI

</div>
</div>
<br />
<div align="center"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i1188.photobucket.com/albums/z403/pattah121/exitcoment.png" alt="close" title="Click here to Close Cbox" /></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<br/>
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i1188.photobucket.com/albums/z403/pattah121/pattahsguestbook.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

3. Terakhir klik simpan. dan lihat hasilnya
NB:
- Ganti tulisan warna merah dengan kode cbox atau buku tamu sobat
- Ganti tulisan berwarna biru dengan gambar icon cbox atau buku tamu sobat

Cukup sekian postingan saya tentang Cara Buat Buku Tamu atau GuestBook Unik  semoga bisa membantu dan bermanfaat. Oh ya di tambah effect melayang pada widget follower dan facebook pasti desain blog anda makin oke dech :)

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest