Membuat Buku Tamu Melayang Versi 2 (with Js Effect)

Pada artikel sebelumnya saya telah menjelaskan cara membuat buku tamu pada blog dan cara menyembunyikan buku tamu atau membuat buku tamu melayang. Sekarang saya akan menjelaskan cara membuat buku tamu melayang dengan tambahan Effect.

Apa perbedaan dengan versi sebelumnya...?

Pada buku tamu melayang versi pertama ketika kita klik hanya akan terbuka bergeser secara biasa, Namun pada versi yang kedua ini Ketika kita klik dia akan muncul dengan adanya effect samar (nilai opacity tampilan bekerja). Klik disini untuk melihat DEMO PREVIEWnya.

Menarik bukan...?




Untuk membuat buku tamu melayang versi 2 ini kalian harus login dulu ke blogger kalian. Jika sudah masuk silahkan ikuti tahapnya berikut ini:

1. Pilih Rancangan
2. Pilih ELEMEN halaman
3. Klik Tambah Gadget lalu pilih HTML/Java script
4. Simpan kode berikut didalamnya

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px; right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #e4b5c5;
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#FFFFFF;
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">[ Close ]</b></a></div>

<SIMPAN CODE BUKU TAMU KALIAN DISINI>

<br />
Mau punya buku tamu seperti ini?<br />
Klik
<a href="http://www.z33s.co.cc/2009/11/cara-membuat-shoutbox-shoutmix-buku.html">
DISINI
</a>

</td></tr></table>
</div>
<script src="http://z33s.googlecode.com/files/Shoutz33sEfect.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png" />

</a>
</div>

Keterangan :
== Ganti kode berwarna merah dengan script buku tamu kalian
== Ganti kode warna biru dengan gambar kalian
== Untuk posisi dan letak penyimpanan silahkan ganti kode berikut :

top:0px; ---> posisi diatas
right:0px; ---> sebelah kanan

== Ganti kata CloSE dengan kata2 kalian seperti TUTUP, kembali dan lain-lain
== Ganti kode warna ungu dengan warna sesuai template kalian, Untuk melihat HTML warna silahkan KLIK DISINI.
== Jika kalian tidak ingin garis pojok melengkung kalian bisa menghilangkan kode:

-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;

5. Jangan lupa di Simpan

Semoga bermanfaat dan jangan lupa komentarnya tentang cara membuat buku tamu melayang versi 2 ini.