Pernah tidak melihat sebuah blog yang di samping kanan atas ada tulisan Buku Tamu, yang kalau diklik akan keluar form isian yang menanyakan Nama, Website dan Message. Buku Tamu tersebut melayang artinya tidak terpengaruh oleh scroll mouse, walaupun mouse digulir ke bawah Buku Tamu tersebut tetap nampak. Mau tahu caranya?
Sebelumya pasti kalian akab bertanya-tanya "apa sih manfaatnya dibuat melayang gitu??".awalnya ane juga seperti kalian :p. tapi sebenarnya dengan melayangnya buku tamu tersebut ( mulai lebay :D ) kita mendapatkan beberapa keuntungan, diantaranya yaitu dengan menyembunyikan buku tamu, kita dapat menghemat ruang widget sidebar, dan dengan melayangkan buku tamu tersebut, pengunjung dapat tertarik 2 kali lipat dibanding jika ditaruh pada widget sidebar (lebay :D).
Tak perlu berlama-lama lagi berikut ini cara meramunya :D
cekidoootttt gannn...
- Sign in ke blogger dan silahkan Login dengan Account Anda
- Pilih Layout/Tata Letak
- Pilih Page Elemen/Elemen Halaman
- Klik Add a Gadget/Tambah Gadget
- Lalu pilih "HTML/JavaScript" Kemudian Copy-Paste kode di bawah 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNQBuPtISzp0waTUuxP70k7PsO1fFvkVjEn8wjIHqxY5FQfTLn5tFkHBv1qza4r5u7K4QQR1YsU_5o6wBdVeZs0Uwm5QOCu1UoK0BM8X-1H8kJyxazhbOaiBA2fAWS9foce_HyJ4gyu-zP/') 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">
Isi Dengan Kode Buku Tamu anda
<br/>
Anda berminat buat Buku Tamu seperti ini?<br/>
Klik di
<a href="http://houseofafree.blogspot.com/2011/04/cara-membuat-buku-tamu-melayang.html">
sini </a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
#gb{
position:fixed;
top:50px;
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/AVvXsEjNQBuPtISzp0waTUuxP70k7PsO1fFvkVjEn8wjIHqxY5FQfTLn5tFkHBv1qza4r5u7K4QQR1YsU_5o6wBdVeZs0Uwm5QOCu1UoK0BM8X-1H8kJyxazhbOaiBA2fAWS9foce_HyJ4gyu-zP/') 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">
Isi Dengan Kode Buku Tamu anda
<br/>
Anda berminat buat Buku Tamu seperti ini?<br/>
Klik di
<a href="http://houseofafree.blogspot.com/2011/04/cara-membuat-buku-tamu-melayang.html">
sini </a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Selamat Mencoba :D
0 komentar:
Posting Komentar