Rabu, 13 Juli 2011

Membuat Buku Tamu (Shoutbox) Buka Tutup/Hide Di Blog

| Rabu, 13 Juli 2011 | 0 komentar


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

Membuat Buku Tamu yang Buka Tutup

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('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') 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>


Kita taruh kode yang sudah peroleh dari shoutmix atau cbox ditempatnya (TARUH KODE WIDGET SHOUTOXMU DI SINI). Dan Simpan jika sudah selesai. 

Silahkan Share yah sob! :
Anda sedang membaca artikel tentang Membuat Buku Tamu (Shoutbox) Buka Tutup/Hide Di Blog dan anda bisa menemukan artikel Membuat Buku Tamu (Shoutbox) Buka Tutup/Hide Di Blog ini dengan url http://zidiyuto.blogspot.com/2011/07/membuat-buku-tamu-shoutbox-yang-buka.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Buku Tamu (Shoutbox) Buka Tutup/Hide Di Blog ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Membuat Buku Tamu (Shoutbox) Buka Tutup/Hide Di Blog sumbernya.

0 komentar:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Poskan Komentar

Silahkan berkomentar kepada sobat blogger semua. Diharapkan komentar yang berkaitan dengan isi dari blog ini. Terima Kasih.



TULISKAN KOMENTAR DI BAWAH!!!

Related Posts Plugin for WordPress, Blogger...
 

Sobat Blogger

About Me

Foto Saya
Saya adalah seseorang yang senang berbagi. Oleh karena itu mari kita saling berbagi informasi di dunia maya ini.

My Status

© Copyright 2012. zidiyuto.blogspot.com . All rights reserved | zidiyuto.blogspot.com is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com