Cara Membuat Gambar Melayang Di Blog

Cara Membuat Gambar Melayang - Kali ini, kita akan belajar bersama, cara membuat gambar melayang di blog. Istilah lainnya adalah cara membuat Float Image. Sebenarnya, selain untuk menampilkan gambar, bisa juga untuk menampilkan objek lain, misal, banner ataupun iklan. Untuk melihat demonya.

Lihat ke pojok kiri blog. Gambar itu akan selalu ada walau halaman blog di scroll/gulung.

Mari kita buat bersama :

• Login ke : Dashboard--> Layout --> Edit HTML --> Proceed 
• Klik/centang "Expand Widget Templates"
• Scroll ke bawah dan cari kode :
  
  ]]></b:skin>

• Kemudian, taruh kode CSS di bawah ini, tepat di atasnya :

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

Note : "bottom", "left" adalah posisi gambar. Anda bisa mengubahnya dengan nilai "top", "bottom", "left", "right". Sesuaikan dengan keinginan Anda. Di mana gambar/banner ingin ditampilkan.

• Selanjutnya, cari kode : </body> 
• Taruh kode di bawah ini, SEBELUM kode </body>

<div id="float_corner">
<a href="http://ricdetop.blogspot.com/"><img src="http://masasha.net/wp-content/uploads/2012/11/mylee21-725x341.jpg" width="180" height="80" border="0" /></a>
</div>

Note :

1. Ganti "http://ricdetop.blogspot.com/" and "http://masasha.net/wp-content/uploads/2012/11/mylee21-725x341.jpg" width="180" height="80" border="0" / dengan alamat URL dan URL gambar Anda.
2. "http://masasha.net/wp-content/uploads/2012/11/mylee21-725x341.jpg" width="180" height="80" border="0" /" adalah URL gambar.
3. "http://ricdetop.blogspot.com/" adalah URL target dari gambar itu.

• Preview dahulu.
• Save template.