Buku Tamu dengan Efek Fade Out

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Baru saja memposting Buku Tamu Sliding. 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/22738692/BukuTamuFadeOut/script.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://i890.photobucket.com/albums/ac110/arary/buku-tamu_03-1.gif" />
</a>
</div>

6. Klik Simpan

Anda bisa mengganti gambar dengan sesuka hati anda

demo

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

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait