Buku Tamu Tersembunyi di sayap kanan blog

Satu lagi trik untuk anda para blogger yaitu cara membuat widget buku tamu tersembunyi di sayap kanan blog anda, seperti contoh buku tamu saya ini. Dengan trik ini kita dapat menghemat tempat dan menambah keindahan blog kita.
Sebenarnya trik ini bukan hanya buku tamu yang dapat anda tampilkan, tapi bisa berupa image atau widget lainnya. Silahkan anda pilih mana yang menurut anda paling sesuai untuk ditampilkan.

oke para sobat berikut ini langkah2nya ;

# Masuk ke Blogger dengan ID anda.
# Pilih Tata Letak.
# Pilih Elemen Halaman.
# Klik Tambah Gadget.
# Klik tanda + pada HTML/JavaScript.
# Copy kode dibawah ini kemudian paste pada kolom yang tersedia.


<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://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">

MASUKAN kode buku tamu ANDA DISINI

<br />
Mau punya buku tamu seperti ini?<br />
Klik di
<a href="http://asmatking.blogspot.com/2010/10/buku-tamu-tersembunyi-di-sayap-kanan.html">
Sini
</a>

<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>

* Klik tombol Simpan.
* Lihat Pemapilan Blog anda sekarang.


Keterangan :

1. height:100px; merupakan tinggi dari widget, silahkan anda atur.
2. width:30px; merupkan lebar dari widget, silahkan anda atur.
3. border:2px solid #A5BD51; merupakan ketebalan dan warna garis/border, silahkan anda ganti.
4. background:#F5F5F5; merupakan latar belakang widget, silahkan anda ganti.
5.background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') dapat anda ganti dengan image hasil kreasi anda sendiri.
6. MASUKAN KODE BUKU TAMU DISINI merupakan tempat meletakan kode buku tamu maupun kode-kode lainnya yang ingin anda tampilkan.
7. [close] dapat anda ganti dengan kata tutup atau kata apa saja yang searti.



sumber : http://echabintangtimur.blogspot.com

Artikel yang berhubungan :