22 April 2011

Buku Tamu Dengan Efek Fade Out

Kemarin baru saja memposting Cara Membuat Buku Tamu Show/Hide dari Atas. Dan tutorial kali ini saya akan membahas tentang Buku Tamu dengan Efek Fade Out. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP
  1. Seperti biasa, masuk ke akun blogger anda
  2. Setelah Log In, masuk ke Rancangan
  3. Kemudian Tambah Gadget
  4. Selanjutnya pilih HTML/Javascript
  5. Tidak perlu diberi judul, langsung saja copy kode di bawah ini dan letakkan pada kotak kontent
<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
left:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #004831;
background:#000000;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red"><right>Close [X]</right></b></a></div>

<!-- KODE BUKU TAMU -->

</td></tr></table>
</div>
<script src="http://dl.dropbox.com/u/24368183/buku%20tamu%20fade%20out.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://dl.dropbox.com/u/24368183/CHATBOX.png" />
</a>
</div>


  1. Klik Simpan

Anda bisa mengganti gambar dengan sesuka hati anda
Pilih yang menarik

http://i278.photobucket.com/albums/kk82/yudispa/buku-tamu.png


http://i890.photobucket.com/albums/ac103/triwardhana/buku.png


http://i890.photobucket.com/albums/ac110/arary/buku-tamu_03-1.gif


http://i387.photobucket.com/albums/oo318/cem_ply/tabs2.gif


http://i761.photobucket.com/albums/xx253/edoute/Bukutamufedoce.png


http://i581.photobucket.com/albums/ss252/muhibfaisal/tabs.gif

7 komentar: