Cara Membuat Fixed Floating Image

Mina-san, Konnichiwa!

Kalian tau fixed floating image? Kalau belum ane kasih tau apa itu fixed floating image, kalian tau gambar perempuan yang di pojok kanan bawah? Itu yang disebut fixed floating image.

Nah, kalau kalian penasaran bagaimana membuatnya, begini caranya:

• Buka HTML blog, caranya buka desain di dashboard blog lalu klik edit HTML.
• Di HTML, cari kode (gunakan ctrl+f untuk memudahkan):

]]></b:skin>

• Copy dan paste kode berikut diatas/sebelum ]]></b:skin>:

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

Kalian bisa mengganti kode bottom;left untuk mengganti posisi gambar dengan kode-kode berikut:

top left
top right
bottom left
bottom right

• Cari kode berikut di HTML:

</body>

• Copy dan paste kode berikut diatas/sebelum </body>

<div id="float_corner">
<a href="Masukkan URL target">
<img src="Masukkan URL gambar" border="0" /></a>
</div>

 Penting! Kalian harus mengganti:

Masukkan URL target : Ganti dengan URL yang akan dikunjungi jika gambar di klik, contoh:
https://www.facebook.com/cucumbahdulah

Masukkan URL gambar : Masukkan URL gambar yang akan digunakan, contoh:

https://lh3.googleusercontent.com/-mkpiUdKWLKk/UWuOdJcHUnI/AAAAAAAAARI/Mb6smVFDi_k/w497-h373/FB+Connect.png

catatan : Sebaiknya menggunakan gambar berformat .png

Menambahkan gambar lainnya

Jika ingin menambah gambar lainnya, kalian harus menentukan sudut lainnya untuk gambar baru, lalu ada beberapa perubahan di kodenya. Di tahap 3 dan 5 ganti float_corner menjadi float_corner1 untuk gambar ke dua kau bisa menggunakan float_corner2 dan selanjutnya. Untuk lebih detilnya, tunggu artikel selanjutnya.

Ja, Mata ne.

Sumber referensi : http://www.spiceupyourblog.com/2009/10/how-to-add-fixed-floating-image-to-your.html