Blog Tips : Floating Image

Yup, kali ini saya akan membahas sedikit tentang tips blogging ala blogspot, berhubung juga kemarin ada yang nanya soal ini, jadi sekalian aja di post buat berbagi ilmu, ^^

Sesuai judul, kali ini saya akan membahas mengenai floating image atau gambar yang mengambang di blog kita. Contohnya seperti gambar yang ada di bagian bawah blog ini. Atau juga gambar facebook dan twitter di sisi kanan yang konsepnya juga sama.

Langsung aja, caranya gampang kok, pertama yang pasti masuk ke blogger.com terlebih dahulu, kemudian pilih blog yang mau di edit, lalu pilih submenu layout di bagian kiri.

Nah, disini kita baru mulai mengedit....

1. Bagi yang belum punya gadget HTML, klik add gadget trus pilih HTML/Javascript lalu klik tanda tambah, secara otomatis gadget akan masuk ke blog kita

2. Di gadget yang baru tadi, klik edit, abis itu copy dan paste source code di bawah ini,  :


<style type="text/css">
.bawah{position:fixed;bottom:-5px; left:0px;}
</style>
<div class='bawah'>
<img src='http://www1.picturepush.com/photo/a/7220094/img/7220094.png'/>
</div>


3. Sok atuh, ini udah 70% jadi mah, selanjutnya, tinggal di atur sesuai keinginan. Pada contoh ini, saya menggunakan posisi : bottom:-5px; left:0px. Artinya, posisi gambar kita berada sekitar -5 piksel dari batas bawah layar dan 0 piksel dari batas kiri layar.

4. Selanjutnya, link gambar yang ingin ditampilkan juga bisa di ubah. Pada contoh ini link gambar saya adalah http://www1.picturepush.com/photo/a/7220094/img/7220094.png . Disini saya rekomendasikan picturepush untuk meng-upload gambar dengan alasan, kita bisa upload tanpa perlu register dan jangka waktu kadaluarsa gambarnya juga cukup lama. Berikut linknya http://picturepush.com/upa . Jika sudah di upload, copy direct link nya, kemudian paste pada source code di atas. Kalo udah selesai tinggal di save dan lihat hasilnya, gampang bukaaannn???.

Untuk pengembangan selanjutnya, kita bisa menambah beberapa varian lain seperti gambar yang menjadi sedikit transparan ketika kita melakukan hover (memposisikan cursor pada gambar) seperti fitur link facebook dan twitter yang ada pada sisi kanan blog ini. Mungkin akan saya bahas di lain waktu, semoga tips ini bermanfaat :D