Friday, August 5, 2011

Cara Membuat Sesuatu Melayang Di Blog

Mungkin masih ada yang belum paham dengan Cara Membuat Sesuatu Melayang Di Blog. nah kali ini saya akan berbagi cara atau trik tersebuat. Di dalam kode ini sobat blogger semua dapat menyisipkan gambar, banner, script atau kode apapun. Nah pastinya keren donk bila blog sobat bisa seperti itu. Blog sobat akan kelihatan lebih menawan dan indah. Tapi jangan terlalu rame ya, ntar nutupin halaman blog semuanya lagi. Gambar melayang ini akan mengikuti kemanapun scroll ditarik gambar akan tetap pada posisi semula jadi akan terus kelihatan sobat. Baiklah gak usah terlalu lama bicaranya ya, langsung saja kita praktekin yuck :

Langsung saja kita kasih tau cara membuatnya yach. Ikuti saja langkah berikut ini sobat :

1. Sebelum memulai mengedit saya sarankan buat menyimpan template punya sobat dulu yach.
2. Login ke Blogger , pergi ke Tata Letak -> Edit HTML
dan tandai kotak centang " Expand Template Widget ".
3. Sekarang cari (CTRL + F) kode ini ]]></b:skin> di template dan masukkan kode berikut ini sebelum kode tadi atau di atas kode tadi :

*   Jika ingin memasang gambar/banner di posisi kanan atas blog.

#registrasi {
top:5px;
right:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

*   Jika ingin memasang gambar/banner di posisi kanan bawah blog.

#registrasi {
bottom:5px;
right:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

*   Jika ingin memasang gambar/banner di posisi kiri atas blog

#registrasi {
top:5px;
left:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

*   Jika ingin memasang gambar/banner di posisi kiri bawah blog.

#registrasi {
bottom:5px;
left:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

4.   Selanjutnya Copy-paste kode di bawah ini setelah </body>

<div id='registrasi'>
<a href='http://namablogsobat.blogspot.com/'>
<img border='0' src='http://gambar.gif'/></a>
</div>

Catatan :

*   Untuk text yang berwarna orange sobat ganti dengan alamat blog sobat.
*   Untuk text yang berwarna pink sobat ganti dengan apa saja yang sobat mau.

5.   Simpan template dan lihat hasilnya sobat.

Semoga sukses dan berhasil ya sobat

No comments:

Post a Comment