Cara Membuat Buku Tamu Keren Versi 3

Selamat malam semua nya. Akhir nya hari ini saya bisa posting lagi tentang tips blog. Sebenarnya sih tips ini saya copy dari Kang Dadang 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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></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>
<br />
<div align="right"><font size="2"><a href = "http://besttaufiqblog.blogspot.com/2012/01/cara-membuat-buku-tamu-keren-versi-3.html " target=_blank"><div style="color: #000;">
<span style="font-size: x-small;">:: Get This Widget!! ::</span></div></a></font></div>
<div id="gbbtn"><a href="#" class="gbbtn" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png" border="0"style="cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50"  /></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
Share 'Cara Membuat Buku Tamu Keren Versi 3' On ...

5 komentar untuk "Cara Membuat Buku Tamu Keren Versi 3"

  1. Nich dia yang ane cari" kawand..
    nice share..

    BalasHapus
  2. sangat membantu gan..... agungbelog.co.cc

    BalasHapus
  3. Mantaff ne ilmunya...
    makasie gan...
    lam knal..:) :-p

    BalasHapus
  4. Kunjungan pertama.. langsung dapat ilmu.. terimakasih sob. salam blogger

    BalasHapus

Terima kasih telah membaca artikel. Mohon luangkan waktu sobat untuk memberikan komentar pada artikel ini.