azizal's blog - Info info unik dan menarik

Info info unik dan menarik , artikel unik

Cara membuat buku tamu melayang


Halo sobat blogger pada kali ini saya akan membuat tutorial cara membuat buku tamu melayang . Buku Tamu melayang adalah suatu widget di mana kalau kita klik gambarnya akan tertampil buku tamu yang melayang tu kayak punya blog saya yang tulisannya Guest book / buku tamu . Yuk mari langsung ke tkp

1. Loginlah dulu di 
Blogger Sobat lalu pilih  Rancangan > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..

2.  Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url(
http://th618.photobucket.com/albums/tt264/hfahfa/th_GuestBook.gif) no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FFFFFF;
background:#FAFD03;
padding: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">

Paste kode buku tamu di sini seperti SHOUTMIX ATAU CBOX

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


Keterangan :
Tulisan warna biru : gantilah dengan url gambar buku tamu anda yang akan di tampilkan
Tulisan warna biru = Gantilah dengan kode Scripts Widget Buku Tamu yang akan kamu tampilkan kayak Shoutmix atau Cbox

4. Simpan


5 Komentar untuk "Cara membuat buku tamu melayang"

Situsnya bagu. artikel buku tamunya sangat menarik..

Thnks bgt uda share cara membuat buku tamu melayang.

Senang bisa berkunjung ke situsnya mas Azizal.. Bisa dapat ilmu baru mengenai buku tamu. Terimakasih

Wah, mas Azizal gak pernah update lagi ya.. Tapi infonya masih bermanfaat kok.. :)

Tetap semangat mas,, artikel membuat buku tamunya keren !!

Followers

 
Copyright © 2014 - All Rights Reserved
Template By. Catatan Info