7 Januari 2011

Membuat Buku Tamu Tersembunyi

Hallo sobat blogger , Gimana kabarnya ? Sehat kan 
Kali ini saya akan menerangkan cara Membuat Buku Tamu Tersembunyi !!!
Tahu kan maksudnya ?? kalo ga tau liat di sidebar aku terlihat di pojok kanan ada widget Buku tamu jika anda klik tab warna hijau tersebut,maka Buku Tamunya akan tertarik keluar. Berikut ScreenShootnya


Udah ga usah basa-basi lagi mari kita langsung ke pokok materi . Sebenarnya mudah kok membuat hal seperti itu agar ada di blog anda , mari ikuti langkah-langkah berikut :

  1. Login ke Blogger atau langsung klik di sini
  2. Klik menu Rancangan
  3. Klik Elemen Laman
  4. Klik Tambah Gadget (terserah dimana saja)
  5. Pilih HTML/JavaScript
  6. Copas kode berikut
<style type="text/css">
#gb{
position:fixed;
top:20px;
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: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">

< Ganti Kode Ini Dengan Kode ShoutBox Anda>
<div style="text-align:right">
<a href="http://ilmupengetahuaninternet.blogspot.com/2011/01/membuat-buku-tamu-tersembunyi.html">
[Ilmu Pengetahuaninternet.blogspot.com]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>



<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
Ganti kode top dengan angka sesuka anda (semakin kecil maka shoutbox akan semakin naik)

Jika langkah tersebut sudah anda lakukan,anda dapat melihat hasilnya pada blog anda masing-masing

Jika ada pertanyaan,Silahkan tanyakan pada komentar Blog ini

2 komentar:

  1. Hello !

    Aku buat buku tamu tersembunyi dengan code yang sesuai dengan blog ini kok gak muncul shoutmix atau shoutbox, dan cuma muncul tulisan ilmu pengetahuan padahal sudah saya ganti tulisannya sesuai anjuran...... kalau bisa code yang langsung bisa dipake.....thank's friend.

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

Berilah sedikit komentar, demi kemajuan blog ini
NOTE : Komentar jangan pedes-pedes