Membuat Buku Tamu Buka Tutup

Buku Tamu atau Guest Book merupakan content sebuah web yang cukup diperlukan. Berbagai bentuk dan tampilan banyak disajikan dalam berbagai macam blog, salah satunya seperti yang terdapat dalam blog sahabat saya yang disembunyikan. Seperti apa tampilan buku tamu tersebut ? silahkan sobat lihat dalam blog sahabat saya http://wikilead.blogspot.com.
Untuk membuat Buku Tamu Buka Tutup seperti dalam blog sahabat saya (tersembunyi), berikut adalah langkah-langkahnya:

• Copy script di bawah ini:

<!-- Mulai GuestBook Buka/Tutup --> <style type="text/css"> #gb{ position:fixed; top:10px; /*jarak dari atas*/ z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:none; } .gbcontent{ float:left; border:2px solid #000000; /*warna bingkai*/ background:#FFFFFF; /*warna latar*/ padding:5px 10px 0px 10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 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+")", 10);} }

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"></div>

<div class="gbcontent"> <div style="text-align:center;"><a href="javascript:showHideGB()" title="Close/Tutup"><img style="border:0px; width:100px; height:auto;" alt="Guestbook" src="http://i655.photobucket.com/albums/uu275/kanzenk/wikilead/wikiguest.gif" /></a></div>

Kode Shoutbox atau Buku Tamu

<script type="text/javascript" src="http://kanzenkfilehost.googlecode.com/files/guestbook-open-close.js"></script>

</div></div>

<!-- Selesai GuestBook Buka/Tutup -->

• Ubahlah ukuran jarak dari atas, warna bingkai, warna latar, dan judul sesuai keinginan sobat.
• Ubah link gambar/judul yang berwarna biru sesuai keinginan sobat/sesuai link gambar sobat.
• Untuk menaruh Script/code tadi (yg sudah sobat sesuaikan), ada 2 metode penaruhan.

METODE PERTAMA :

• Login kedalam Dashboard akun blogger sobat, pilih Tata Letak - Elemen Halaman.
• Kemudian klik Tambah Gadget dan pilih HTML/Javascript.
• Paste script Buku Tamu Buka Tutup tadi dan jangan diberi judul (title).

METODE KEDUA :

• Login kedalam Dashboard akun blogger sobat, pilih Tata Letak - Edit HTML, jangan lupa centang Expand Template Widget.
• Cari kode </head> pada script HTML template blog sobat.
• Paste script Buku Tamu Buka Tutup tadi di bawah kode </head>.
• Setelah itu save

Setelah itu buatlah sebuah link untuk menampilkan Buku Tamu Buka Tutup, seperti berikut :

<a href="javascript:showHideGB()"><img src="http://i655.photobucket.com/albums/uu275/kanzenk/wikilead/wikiguest.gif/> / BUKU TAMU</a>

Ubah tulisan yang berwarna BIRU dengan alamat URL Gambar sobat, untuk link kedalam Buku Tamu atau dapat sobat masukan berupa TEXT (warna MERAH)dalam menu.

Begitu mudahnya pembuatan Buku Tamu/GuestBook Buka Tutup ini kan sobat. Selamat mencoba.

[+/-]  read more... »»