Cara Membuat Buku Tamu Keren

Setelah kemarin telah di buat cara membuat cbox, kini aku akan membagikan tips bagaimana cara menyembunyikan cbox itu menjadi sebuah buku tamu yang keren. Mau tau cara nya? Yo langsung ke tips nya ^_^v

1. Login dahulu ke blogger kamu.

2. Pilih Rancangan >> klik Elemen Laman >> Tambah Gadget >> pilih HTML/Javascript.

3. Copy kode di bawah ini ke HTML/Javascript tadi.
<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIhq5GI0z6jlTP_l5dOFZHPl_rci6tBk7Auk8LyANqTlma-AXuZCjYiedz-fSpM9xwxvZKqoYr3oIQqDT1z-tSie4cQpfecAri3yeIfTVACgEHRPPnHa_fSzHFknq6mXsrtgZWauiYfuDm/s1600/api.gif) no-repeat bottom;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
<center>

Kode Cbox kamu

<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr />
<div style="text-align:right"> <font size="2"><a href="http://besttaufiqblog.blogspot.com/2011/04/cara-membuat-buku-tamu-keren.html"target=_blank"><div style="color: #ffffff;">
<span style="font-size: xx-small;">:: Get This Widget! ::</span></div></a></font></div>
</center>
</a>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script></div>

4. Simpan dan lihat hasil nya.

Selamat Mencoba
Share 'Cara Membuat Buku Tamu Keren' On ...

14 komentar untuk "Cara Membuat Buku Tamu Keren"

  1. Mkcih banyak ya info nya....:)
    sukses selalu.........

    BalasHapus
  2. gan klo buku tamu kayak punya elo bisa ga Copy kode HTML/Javascript.... :D :D :D B-) B-)
    B-) B-) B-) B-) B-) B-)

    BalasHapus
  3. gan kok tmpt ane ad tlzn close comment..?? :x :x

    BalasHapus
  4. Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

    BalasHapus
  5. Terimasih kawan :)
    kunjungi http://dopelselly.blogspot.com ya

    BalasHapus
  6. Nice tutor, mampirnyaa dong ke Indonesiaku Islam (http://www.indonesiakuislam.co/)

    BalasHapus
  7. Mantap gan ... kapan" ane coba deh ...
    Visit back http://novaibnu.blogspot.com/
    http://www.blogger.com/follow-blog.g?blogID=2122801475611439227

    BalasHapus
  8. Bermanfaat sekali gan ..
    Folback + commentback yaaaaaaaa !!! novaibnu.blogspot.com

    BalasHapus
  9. mantap gan....langsung di pakai..
    supaya ga berat ane ganti gambarnya gan.
    tks

    BalasHapus
  10. makasih atas infonya Gan :)

    BalasHapus

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