Tutorial Cara Membuat Float Image

Assalamu'alikum..amri ingin berkongsi tutorial cara buat Float Image. Rasanya dah ramai yang tahu buat. Tapi,untuk kawan-kawan yang belum tahu tu, bolehla cuba buat float image berdasarkan tutorial ini ya.

Sebelum itu, buat yang belum tahu, apa ya float image tu? ok, float image atau pun image terapung yang kalau kawan-kawan perasan, banyak blog-blog yang meletakkan imej twitter,facebook dan sebagainya di sudut-sudut tertentu dalam blog. contohnya pada gambar di bawah ni.

Seperti gambar kat atas ni, floating image yang akan kita buat adalah pada
posisi Atas kanan, bawah kanan,Atas kiri dan bawah kiri.

Langkah-langkahnya:

1. Gambar yang kawan-kawan nak gunakan sebagai floating image tu terlebih dahulu kenalah upload di ImageShack atau pun di PhotoBucket. Tapi,kalau kawan-kawan pandai, kita juga sebenarnya boleh jugak upload di Blogger je. tapi,kalau kawan-kawan tak reti, just upload ke imageshack atau photobucket ya.

2. Login Blogspot.
~ Klik 'Layout' dan klik 'Edit HTML'.
~ Lepas itu, cari kod </body>
~ Pilih salah satu kod di bawah ni dan kemudian letakkan kod dibawah ini, dibawah kod </body> tadi.


Image Float Atas Kiri

<a href=' http://www.blogkorang.blogspot.com ' style='display:scroll;position: fixed; top:5px;left:5px;' title=' tajuk korang disini ' ><img src='URL gambar korang'/></a>

Image Float Bawah Kiri

<a href=' http://www.blogkorang.blogspot.com ' style='display:scroll;position: fixed; bottom:5px;left:5px;' title=' tajuk korang disini ' ><img src='URL gambar korang'/></a>

Image Float Atas Kanan

<a href=' http://www.blogkorang.blogspot.com ' style='display:scroll;position: fixed; top:5px;right:5px;' title=' tajuk korang disini ' ><img src='URL gambar korang'/></a>

Image Float Bawah Kanan

<a href=' http://www.blogkorang.blogspot.com ' style='display:scroll;position: fixed; bottom:5px;right:5px;' title=' tajuk korang disini ' ><img src='URL gambar korang'/></a>


3. Sila edit,

Merah: Gantikan dengan URL blog kawan-kawan.
Hijau: Gantikan dengan tajuk/ nama blog korang.
Ungu: Gantikan dengan URL gambar yang korang upload di ImageShack atau PhotoBucket tadi.

4.Dah siap semua, klik Save.
Selamat mencuba ya :-)

Kongsi