Cara Membuat Gambar Melayang di Blogspot

Gambar/Banner melayang sering juga dengan float image. Maksudnya adalah gambar yang selalu berada di halaman blog walaupun pengunjung blog telah menggulung layar, baik ke kiri, kanan, atas maupun bawah. Bahasa lebih gaul lagi adalah seperti gambar/banner dofollow pada blog saya yang berada di kanan bawah blog ini. Jelas terlihat kan penampakannya???

Gambar/banner yang kita pasang bisa bermacam-macam sesuai dengan yang kita inginkan. Menurut logika penulis, gambar/banner ini cukup memberi pengaruh terhadap promosi blog ataupun postingan.

Contoh kasus pertama, bagi blog dofollow.


Dengan adanya gambar atau banner akan lebih mempromosikan blog kita sebagai blog dofollow dibandingkan dengan hanya meletakkan gambar atau banner tersebut di sidebar blog. Seperti yang diketahui oleh banyak blogger mania, bahwa jika memberikan komentar di blog dofollow akan menambah jumlah backlink dari mesin pencari ke blog/postingan mereka. Harapan selanjutnya lagi adalah mereka akan membawa pasukan yang lebih banyak dilain waktu, sehingga traffik pengunjung akan meningkat dengan pesat.

Contoh kasus kedua, bagi blog yang sedang mengikuti kontes.
Tahun 2009 merupakan musimnya kontes SEO, begitulah yang dikatakan oleh banyak pendahulu kita. Menurut sepengetahuan penulis, sampai detik ini masih ada beberapa kontes yang masih berlansung yaitu : pertamina blog kontes, Kontes desain banner KlikSaya, Kontes SEO ala mbah gendeng, serta kampanye aku ngeblog kamu?

Seperti halnya pada kasus pertama, pada kasus ini kita bisa mengkondisikan banner tersebut sebagai tautan link ke postingan yang kita tuju. Karena biasanya sebuah kontes melombakan postingan bukan sebuah blog, maka bagi yang ikutan kontes dapat melakukan teknik memasang banner melayang ini sebagai salah satu kiat memenangkan kompetisi.

Let's begin the tutorial how to make floating image on blogspot...

• Login ke blogger, pilih menu tata letak/layout ==> Edit HTML

• Copy-paste salah satu kode kode di bawah ini sebelum ]]></b:skin>

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}

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

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

• Ubah yang http://referensiregistrasi.blogspot.com dengan alamat blog anda dan http://gambar.gif diganti dengan tempat gambar yang telah kita upload terlebih dahulu. Sebagai opsi tempat penyimpanan gambar, kita dapat menggunakan http://www.imagehosting.com/, http://photobucket.com, http://www.flickr.com/ serta masih banyak lagi tempat penyimpanan gambat yang tersedia di internet.
• Langkah terakhir adalah save template anda dan lihatlah hasilnya.

Posted in: Tips Blogger