Buat buku tamu keren

Selamat malam semua nya. Akhir nya hari ini saya bisa posting lagi tentang tips blog. Sebenarnya sih tips ini saya copy dari teangga hehh tapi tidak semua nya saya ambil karena sudah saya edit kembali. Tips kali ini tentang Cara Membuat Buku Tamu Keren V.3. Ok deh karena saya tidak mahir menulis langsung saja ke cara membuatnya. Ikuti langkah berikut ini :

1. Login ke blogger
2. Pada Dasbor >> Rancangan >> Elemen Laman
3. Klik Tambah Gadget, kemudian pilih HTML/Javascript
4. Copy kode berikut ini


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
    $(".gbbtn").click(function(){
        $("#gbcontent").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>
<style>
/* ---------------
by  : Dadang Herdiana
edited by : Taufiq Azhari
---------------------------------- */
.gb {
position:fixed;
top: 0px; right:450px;
z-index:+1000;
}
#gbcontent {
    height: auto;
    background: #898787;
    width: auto;
    display: none;
    padding: 10px;
    border:4px solid  silver;
background:url(http://i51.tinypic.com/rcq4b7.gif) #000000 repeat-y center;
   -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
    padding:10px;
}
.gbbtn {
    position:fixed;_position:relative;top:50px; right:0px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight)
}
.active {
    background-position: right 12px;
}
</style>
<div class="gb">
<div id="gbcontent">
KODE CHATBOX KAMU
</div>


<div align="right">
<span style="font-size: x-small;"><a href="http://besttaufiqblog.blogspot.com/2012/01/cara-membuat-buku-tamu-keren-versi-3.html%20" target="_blank&quot;"></a></span>
<div style="color: black;">
<span style="font-size: x-small;"><a href="http://besttaufiqblog.blogspot.com/2012/01/cara-membuat-buku-tamu-keren-versi-3.html%20" target="_blank&quot;"><span style="font-size: x-small;">:: Get This Widget!! ::</span></a></span></div>
</div>
<div id="gbbtn">
<a class="gbbtn" href="http://www.blogger.com/post-edit.g?blogID=2426410677169085158&amp;postID=7859296511103977010#" title="Buku Tamu"><img alt="Buku Tamu" border="0" heigth="125" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" opacity:1;filter:alpha(opacity="100)&amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; quot;" src="http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png" /></a></div>
</div>


5. Paste di kolom HTML/Javascript tadi

• Ganti tulisan berwarna merah tadi dengan kode chatbox kamu

6. Simpan dan lihat perubahan di blog kamu

Selamat Mencoba :D

untuk code cbox
bisa daftar dulu di sini

hasil nya mungkin kurang lebih kayak gini..

Add caption