Cara Mebuat Gambar Melayang ( Floating Image ) Lebih Dari Satu Pada Blog

Sebelumnya saya sudah menuliskan bagaimana cara mebuat gambar melayang ( Floating Image ) pada blog. Namun itu hanya berlaku untuk satu gambar. Bagaimana jika ingin memasanga lebih dari satu floating image? Caranya sebagai berikut

1. Log In akun Blogger.
2. Klik pada " Rancangan " pada menu
3. Klik "Edit HTML".
4. Copy kode dibawah ini diatas kode ]]></b:skin>

#Ridwan-side {
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); }

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

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

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

5.Setelah itu copy kode dibawah ini diatas kode </body>

<div id="Ridwan-side">
<a href="http://ridwan-side.blogspot.com">
<img src="http://img338.imageshack.us/img338/4702/bumi1.jpg" border="0" /></a>
</div>

<div id="Ridwan-side1">
<a href="http://ridwan-side.blogspot.com">
<img src="http://img338.imageshack.us/img338/4702/bumi1.jpg" border="0" /></a>
</div>

<div id="Ridwan-side2">
<a href="http://ridwan-side.blogspot.com">
<img src="http://img338.imageshack.us/img338/4702/bumi1.jpg" border="0" /></a>
</div>

<div id="Ridwan-side3">
<a href="http://ridwan-side.blogspot.com">
<img src="http://img338.imageshack.us/img338/4702/bumi1.jpg" border="0" /></a>
</div>

Cara meng-editnya sama dengan yang saya jelaskan di artikel sebelumnya yang berjudul Cara Mebuat Gambar Melayang ( Floating Image ) Pada Blog. Teks yang berwarna biru terletak di kiri bawah, teks yang berwarna merah terletak dikanan bawah, teks yang berwarna kuning terletak dikiri atas, dan teks yang berwarna hijau terletak di kanan atas. Anda hanya tinggal meilih kode mana yang anda inginkan.

Selamat mencoba dan semoga berhasil.

Share on Google Plus

About Ridwan Elza Putra