Membuat Gambar Diatas Skrin (Gambar Melayang)

Assalamualaikum.

Sedar tak sedar dah hampir seminggu kita berpuasa.... Alhamdulillah Ramdhan kali ini rezekiku mencurah-curah, syukur pada Allah.

O.K.lah jom kita lihat tips kali ini. Tajuknya aku rasa pelik sikit dan mungkin anda semua pun tak berapa nak paham...huhuhu... Tak tahu nak bagi nama tajuk apa.
Tapi apa-apapun camni lah..... kali ni aku nak tunjuk cara nak buat gambar macam melayang atas skrin...ala macam widget yang ada kat adi widget tu. contohnya lihat dibbawah disebelah kanan blog ini. Nampak tak... haaa macam tu la. bila kita scroll gambarnya tetap di situ juga maca gambar tu kat atas skrin, kan macam melayang tu. Kalau anda ada nama tajuk yg lebih sesuai bolehlah kemukakan. nanti aku lanje aiskrim.

Aku tau apa yg korang pikirkan tu... "Kalau ambik jer widget dari adiwidget kan senang" betul tak? Memang lah betul ambik jer dari adiwidget tapi gambarnya korang tak boleh la nak design ikut citarasa sendiri. Melainkan korang tu member baik atau sedara adi tu.

Ha!! ni aku bagi satu trik untuk buat widget yg sama boleh ikut citarasa korang sendiri. Nak letak gambar apa pun boleh, macam gambar korang sendiri ke, kereta kesayangan korang, gambar bik mama korang ker, gambar skandel korangker atau apa-apa jer lah.

Tanpa melengahkan masa mari kita cuba trik ini:

1. Login ke blogger dan klik Layout -->> Edit HTML

2. Cari kod ini ]]></b:skin> copy kod CSS di bawah dan pastekan kod CSS tadi di atasnya.

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

3. Text/tulisan yang berkedip adalah posisinya, jika ingin ganti posisinya disebelah kiri text/tulisan "right" diganti dengan "left". Begitu juga text/tulisan "bottom", diganti dengan "top" jika ingin meletakkan posisinya di atas.

4. Langkah seterusnya cari kod</body> dan lakukan seperti tadi, copy dan pastekan kod HTML di bawah di atasnya/sebelumnya

<div id="gambar_atas">
<a href="http://muraisenja.blogspot.com">
<img src="http://img387.imageshack.us/img387/953/jihad2009.png" border="0" /></a>
</div>

5. Gantikan link "http://muraisenja.blogspot.com" dengan link anda sendiri dan gantikan juga lokasi gambar "http://img387.imageshack.us/img387/953/jihad2009.png" dengan lokasi gambar anda (kalau nak guna lokasi gambar saya ni pun boleh gak).

6. Jika ingin objek lain selain gambar seperti jam, kalendar, hit counter atau widget-widget yg lain, cuma ganti text link dan lokasi dengan script widget-widget tersebut ajer.

7. Akhir sekali simpan dan lihat hasilnya.