TERIMA KASIH SUDAH MAMPIR DI BLOG SAYA INI
Program Affiliate Indowebmaker Program Affiliate Indowebmaker

Sabtu, 13 November 2010

Membuat Buku Tamu Melayang

Buzz This
Pada tutorial kali ini saya akan membahas artikel tentang bagaimana caranya membuat buku tamu yang melayang di sisi monitor komputer.

Sebenarnya sudah lama saya menyimpan artikel ini dalam draft saya, karena dulu salah seorang sobat PC pernah bertanya kepada saya bagaimana caranya membuat buku tamu seperti itu. namun kelihatannya dia sudah menemukan caranya dengan bertanya kepada si mbah google. hehee....

Tapi karena saya bingung ingin membahas apa pada tutorial kali ini, maka saya berfikir untuk menerbitkanya.

Baik, langsung saja ini dia step by stepnya/



  1. Login ke akun Blogger anda 
  2. Klik Tata Letak
  3. Elemen Halaman 
  4. Tambah Gadget
  5. HTML/Java Script.
  6. Copy-paste code dibawah ini




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

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i493.photobucket.com/albums/rr292/marcel_freezer/GuestBook2.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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">

Masukkan code atau script shoutmix anda disini

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

7. Save

catatan:
Link yang berwarna hijau adalah URL gambar, ganti dengan gambar yang anda suka.
Script yang berwarna merah adalah tempat anad memasang script chatbox anda, anda juga dapat memasang widget lain yang anda suka.

Selamat mencoba...





0 komentar: