Membuat Buku Tamu yang Buka Tutup

Kali ini rasanya saya membuat judul yang unik dech :D Membuat Buku Tamu yang Buka Tutup Namanya juga buku ya bisa dibuka dan ditutup donk. Yang sudah berkunjung mengisi buku tamu menuliskan namanya, alamatnya dan pesannya. Buku tamu ini dipasang di blog kita. Buku tamu ini lebih populer dengan sebutan shoutbox

Yang banyak diguanakan untuk buku tamu yang kita buat ini akan bisa di buka dan ditutup, jadi terus tampil di halaman blog secara tidak utuh, jika ingin buka tinggal ngeklik dan jika ingin tutup buku tamunya juga diklik aja. Ada tulisan BUKU TAMU yang nempel dipinggir halaman dan tinggal klik untuk buka tutupnya. Untuk membuat buku tamu yang bisa buka tutup ini, silahkan Anda buat widget shoutbox yang bisa didapatkan di shoutmix atau cbox. Di sana kita registrasi dan buat widgetnya lalu ambil kodenya.

Cara Membuat Buku Tamu yang Buka Tutup
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode script berikut ini:

<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3ZS8R9_A20bCeoJ84TYXoNsty9I4r8nxeLATFsU2tF3DNDbRFyMXwwCzRP-PeR5EQvdpkEhWMtjG5-yLtjtP9vThhS-4hbIxxCxGsS3ltX_13M-jArZW85KFEaYWWmqYBLrjiq98Umb1/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:2px;
}
</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">

TARUH KODE WIDGET SHOUTOXMU DI SINI

</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

 

 

5.  Simpan

 

Keterangan : ganti yg bertulisan: TARUH KODE WIDGET SHOUTOXMU DI SINI diganti dengan     
                           KODE WIDGET SHOUTOXMU

Tolong dibaca nih gan !

Kamu sedang membaca artikel tentang Membuat Buku Tamu yang Buka Tutup dan kamu bisa menemukan artikel Membuat Buku Tamu yang Buka Tutup ini dengan url http://zackybee7.blogspot.com/2012/04/membuat-buku-tamu-yang-buka-tutup.html, kamu boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Buku Tamu yang Buka Tutup ini sangat bermanfaat bagi banyak orang, namun jangan lupa untuk meletakkan link Membuat Buku Tamu yang Buka Tutup sebagai sumbernya.

Artikel terkait :