Membuat image atau widget terapung (floating) pada blog dengan mudah

Untuk membuat image yang berformat jpg, gif atau png dan juga widget menjadi terapung (floating) di awang-awangan di setiap penjuru blog seperti yang boleh anda lihat contohnya di sini, anda hanya perlu menggunakan kod HTML yang sangat mudah dan terdapat satu lagi kelebihannya iaitu, anda boleh meletakkan URL anda sendiri pada image terapung (floating image) . Tidak perlu untuk anda menggunakan javascript seperti yang disediakan oleh beberapa sites kerana javascript yang disediakan itu telah di pasang dengan backlink.


Langkah 1

Salin dan edit kod yang berwarna biru dan merah di bawah ini pada notepad. Pilih pada bahagian mana yang ingin di float.

Kod:

Bahagian atas penjuru kiri.

<div style="position: fixed; top: 0px; left: 0px;"><a href="Gantikan teks ini dengan URL blog anda">Gantikan teks ini dengan kod image atau script widget</a></div>

Bahagian atas penjuru kanan.

<div style="position: fixed; top: 0px; right: 0px;"><a href="Gantikan teks ini dengan URL blog anda">Gantikan teks ini dengan kod image atau script widget</a></div>

Bahagian bawah penjuru kiri.

<div style="position: fixed; bottom: 0px; left: 0px;"><a href="Gantikan teks ini dengan URL blog anda">Gantikan teks ini dengan kod image atau script widget</a></div>

Bahagian bawah penjuru kanan.

<div style="position: fixed; bottom: 0px; right: 0px;"><a href="Gantikan teks ini dengan URL blog anda">Gantikan teks ini dengan kod image atau script widget</a></div>

Langkah 2

Bagi kod image, anda hanya perlu edit kod berwarna merah di bawah dengan memasukkan URL bagi image yang ingin di float. Salin kod yang telah siap di edit dan gantikan pada teks Gantikan teks ini dengan kod image atau script widget.(rujuk langkah 1).

 Kod image

<img src="masukkan URL image"/>

 Contoh:

<img src="http://efair.globecampus.ca/static/gmShow/WebUpload/Content/en_CA/Image/Twitter_FollowMe.png"/>

 Kod yang telah siap.

<div style="position: fixed; bottom: 0px; right: 0px;"><a href="http://larikudaku.blogspot.com"><img src="http://efair.globecampus.ca/static/gmShow/WebUpload/Content/en_CA/Image/Twitter_FollowMe.png"/></a></div>

-----------------------------------------------------------------------------------

Bagi kod widget pula, anda hanya perlu gantikan teks Gantikan teks ini dengan kod image atau script widget.(rujuk langkah 1) dengan script widget yang ingin di float.

Contoh script widget.

Widget jam.

<embed width="130" src="http://www.clocklink.com/clocks/0023-orange.swf?TimeZone=PST&amp;" wmode="transparent" height="130" type="application/x-shockwave-flash"></embed>

Kod yang telah siap

<div style="position: fixed; bottom: 0px; left: 0px;"><a href="http://larikudaku.blogspot.com"><embed width="130" src="http://www.clocklink.com/clocks/0023-orange.swf?TimeZone=PST&amp;" wmode="transparent" height="130" type="application/x-shockwave-flash"></embed></a></div>



Langkah 3

Log in blog => Dashboard => Layout => Add A Gadget. Klik pula pada HTML/Javascript. Seterusnya, salin kod yang telah siap di edit itu dan paste pada ruang Content HTML/Javascript.

Akhir sekali klik preview. Jika anda berpuas hati dengan hasilnya, klik saja Save.