Pasang Buku Tamu Melayang

Tulisan terdahulu telah dibahas cara daftar dan buat buku tamu yang belum baca klik di sini lanjut.. tulisan kali ini akan di kupas habis cara pasang buku tamu melayang, penasaran...! lihat aja nanti hasilnya ..wkwkwkwk

Langsung sajah yach!!!

1. Siapkan dulu kode script buku tamunya..belum punya daftar dulu di sini
2. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
3. Lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...


<style type="text/css">
#gb{
position:fixed;
top:60px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i142.photobucket.com/albums/r81/gusdiwanto/tab.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#610B0B;
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">

Copy kode Shoutmix / buku tamu anda disini

<br />
luankan waktu anda?<br />
<blink&gt;titip pesan disini&lt;/blink>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script><br /><br />



Keterangan :

Merah = Gantilah dengan kode Scripts Widget yang akan kamu tampilkan Misalnya kode Scripts Widget Shoutmix..
Biru = Gantilah dengan URL Gambar Tab kamu (atau pakai saja url gambar tab diatas tdi) ..
Hijau = Ganti dengan kata-kata kamu sendiri,
Gambarnya bisa kamu buat dengan Program seperti Photoshop.. lalu kamu Upload/simpan gambar tsb di Photobucket ..baru kamu bisa mendapat kode url Direct Link gambar tdi..

5. Simpanlah dan Selesai dech^_^... namun sebaiknya posisi widgetnya di Bagian Tata letak di letakan paling bawah lalu klik simpan.. Untuk melihat hasilnya silahkan Refresh blog kamu.. Mudahkan.. ;-)

Selamat Mencoba
jangan bosan belajar
belajar untuk masa depan

0 komentar:

jangan lupa komentar

Silahkan tinggalkan komentar untuk postingan ini. Untuk komentar yang tidak mendidik akan segera didelete. No SPAM, NO SARA! Terimakasih