Monday, June 22, 2009

Membuat Top View Widget

Dah lama aku carik coding ni akhirnya terjumpa jugak. Kali ni aku nak share dengan kawan² bagaimana nak buat Top View Widget yang berada kat tepi blog (tak kira tepi mana pun) sentiasa berada di situ walaupun kita dah scroll ke bawah(Seperti gambar di atas). Sebenarnya bukan sahaja gambar yang boleh kita letakkan di situ, apa pun boleh termasuk widget yang kita letakkan dalam gadget di sidebar seperti jam, shoutmix, dan lain-lain.

Jika yang ingin dipaparkan adalah sebuah gambar seperti model dibawah ini. (heuheuheu) Ciptakan satu gambar dengan menggunakan Photoshop atau software yang lain dan upload dimana² image hosting seperti photobucket, geocities, imageshacke dan lain².


Berikut adalah cara² macam mana nak buat Top View Widget.

1. Login ke ID Blogger atau terus ke Dashboard.

2. Pilih Layout kemudian ke menu tab Edit HTML.


3. Copy coding dibawah ini
dan Paste tepat di atas code ]]></b:skin>

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



4. Jika inginkan kedudukkan widget berada di atas tukarkan bottom kepada top dan jika inginkan widget di sebelah kanan tukarkan left kepada right.

5. Kemudian copy coding berikutnya dan paste sebelum code <body>

<div id="top-image">
<a href="http://ady.via.my">
<img src="http://sites.google.com/site/adystor/Home/wazzzzz.png" border="0" /></a>
</div>

6. Tukarkan tulisan merah http://ady.via.my kepada URL Blog anda dan http://sites.google.com/site/adystor/Home/home.png URL gambar kesukaan anda seperti model tadi di atas tadi .

7. Akhir sekali SAVE TEMPLATE!


Tambahan.

1. Langkah ke 5 anda boleh paste kan coding tersebut atas pada </body> jika ingin ianya dipaparkan selepas isi blog atau bawah pada <body> untuk dipaparkan terlebih dahulu sebelum isi blog.

2. Untuk langkah ke 6 anda boleh meletakkan coding widget seperti jam, hit counter, shoutbox dan lain² dengan menggantikan URL gambar.

Selamat Mencuba .

9 comments:

Eyna's said...

Thanks ye...
lama dah akak tercari2 cara guane diorang buat mcm ni...

Ada masa nanti akak try k...

.:fArAh nAdiAh:. said...

urm... asal x jmpu pun code2 tu kat HTML template kte,, mcm ne ni..??

Ady Syam said...

farah ikut step 1,2 dan 3 mesti boleh jumpa punya code tersebut, di bahagian Layout > Edit HTML. Selamat Mencuba!

Saichou said...

erm menarik...nnti leh cuba :) tq

ikiqzana said...

ady dh dapt buat.. cantik2 sgt zana suker..

terima kasih ye ady...

yatie chomeyl said...

berjayaaaaa..yippeeeee

kakyong said...

terima kasih.. berjaya juga akhirnya... yaayyyy!!

saichou said...

ak dh buat ikut tutorial ni, jd....tq so much :)

jari jemari yang berjoget said...

blog jadi berat x