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>
.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:
Thanks ye...
lama dah akak tercari2 cara guane diorang buat mcm ni...
Ada masa nanti akak try k...
urm... asal x jmpu pun code2 tu kat HTML template kte,, mcm ne ni..??
farah ikut step 1,2 dan 3 mesti boleh jumpa punya code tersebut, di bahagian Layout > Edit HTML. Selamat Mencuba!
erm menarik...nnti leh cuba :) tq
ady dh dapt buat.. cantik2 sgt zana suker..
terima kasih ye ady...
berjayaaaaa..yippeeeee
terima kasih.. berjaya juga akhirnya... yaayyyy!!
ak dh buat ikut tutorial ni, jd....tq so much :)
blog jadi berat x
Post a Comment