Mula-mula ternampak widget ini di Cybernatics.com tapi bila tanya Acapz, dia lupa. Jadi tanpa melengahkan masa, saya pun tengok je lah source code template dia. Hehe. Ok, ini contoh widget yang di highlight kan dengan warna merah, screenshot dari blog Cybernatics.com:
Antara kelebihan widget ini ialah nampak lebih kemas dan dapat menarik perhatian terutamanya bagi yang sudah ada hidden shoutbox di bahagian kanan.
1. Mula-mula, Add Widget > HTML/JavaSript dan paste kod di bawah:
<!– Cute Profile –>
<div style=”display:scroll; position:fixed; top:150px; right:0px;”> <a class=”linkopacity” href=”http://www.blogger.com/profile/13414369733773263510″ target=”_blank” rel=”nofollow” title=”Contact” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://dl.dropbox.com/u/1024578/Template/contact.png” /></a><br /> <a class=”linkopacity” href=”http://www.facebook.com/#!/yusdi.namaku” target=”_blank” rel=”nofollow” title=”Facebook” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://dl.dropbox.com/u/1024578/Template/facebook.png” /></a><br /><a class=”linkopacity” href=”http://www.flickr.com/photos/dakulala/” target=”_blank” rel=”nofollow” title=”Flickr” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://dl.dropbox.com/u/1024578/Template/Flickr-32.png” /></a><br /><a class=”linkopacity” href=”http://www.flickr.com/photos/dakulala/” target=”_blank” rel=”nofollow” title=”Flickr” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://dl.dropbox.com/u/1024578/Template/Flickr-32.png” /></a><br /></div>
- Sila tukar link selepas href= diatas dengan link website yang dikehendaki.
- Sila tukar link selepas src= diatas dengan url gambar yang dikehendaki.
- Untuk meletakkan gambar yang menarik seperti facebook, flickr, twitter dsb, boleh cari di Iconpedia. Contoh:
- Sila hostkan gambar tersebut dalam photobucket dan seumpamanya. Kalau tiada hosting atau tak tau, saya boleh hosting kan 🙂
- Sila tukar top:150px; untuk adjust kedudukan widget.
2. Kemudian, cari </body> (Sila gunakan CTRL+F dan type </body> untuk memudahkan proses mencari) dan letakkan kod di berikut SEBELUM kod </body> tadi:
<!– Cute Profile –> <style type=’text/css’> a.linkopacity img {filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;-khtml-opacity: 0.5;}a.linkopacity:hover img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;-khtml-opacity: 1.0; }</style>
Syafiq
good try la brother..
klau nak nmpk advance just tukar container name. mcm tukar class name ke ape2 la yg ko rase leh tukar.. hehee.. ;P
Affan Ruslan
Thanks.
Aku bljr basic2 je programming ni.
Container name? cmne tu. hehe. noob gle
Izan Ishak
thanks for the tuto ye affan~
selama ni pun tak tertanya camna nak buat floating nav widget ni. mmg nmpk kemas blog kalau buat camni~
Affan Ruslan
Ok, senang je kot nak pasang.
Kalau tak tau boleh tanya. Ni pun cuba2.
kalau tak tau langsung nk buat blh email kt contact me atas tu. blh buatkan.
etomyam
tutorial yang steady.. :D, dapat ilmu baru hari ni
Affan Ruslan
Terima kasih.
*ingatkan ramai org dah tau. hehe
Munix™
mmg cun hehe
Affan Ruslan
Hehe.
Kemas lah kan.
Cik Nad
wahaha~ cara ni mcm lg mudah dr tutorial len yang lbey kurang camni.. insyaallah nk try. thnx!
Affan Ruslan
@Cik Nad: eh ye ke?
owh tak tau pulak.
ayat dah ar berterabur je tu. hentam he ah hehe
ASSOYFINGER67
computer aku tak leh on ler huhu
bellar0ssa
wah menarik2…huhu tp malas betul nak buat.. nak tukar template pon hari tu bro nescafe offer nk tlg.. huhu tgh tggulah pertolongan bro nes ni.
ejum
thnx for the tutorial..sngt berguna 🙂
FarHa
salam nak buat gak tp tak faham yang photopuket tu..huhu
Affan Ruslan
Terima kasih semua. Owh, ada org tak faham ke?
sori2. heheee.
btw, kalau nak saya tlg buatkan, sila email link akaun. contoh, link ke akaun facebook anda, link ke akaun flickr, GengBlogger etca anda.
cybernetic88
haha. nice tutorial. pndai ko mngodek ye ;P
Affan Ruslan
biasa2 je, try2
tmukmkd
alang2 dah guna untuk -moz- dan -khtml- masukkan la sekali -o- dan -webkit- hehe 😀
ieQa sWetLuv
nice info.. tp siyes ika x reti nak bikin icon tu..nak buat jugak hurmm =(
PencariCinta
Wah tutorial yang menarik(^_^), untuk wordpress pun boleh gunakan juga kan?
amzah ian
dulu penah jgk buat presentation psl nano technology ni.. byk bende sebenarnye
Affan Ruslan
@PencariCinta: blh jugak rasanya, tanyalah org yg guna WP, saya guna blogspot je. huhu
@amzah ian: silap tempat ni. hehe
nor_anifa
salam..mcm mana ye..sy buat tak menjadi laa..mana nk dpt code tu ye 🙂
Affan Ruslan
@nor_anifa : code apa ye? meh saya tlg buatkan jap blh.
nor_anifa
blh juga..mcm mana ye nk minta tlg saudara buatkan ? 🙂
hafidh
info yg menarik om…saya coba ya…
syukron…
syahrilhafiz
ini yang ku cari,,
thank yer..
Affan Ruslan
aku pun tension cari binatang ni.
macam takde pulak.
bila dah buat tutor baru perasan ada org dah buat.
takpelah, sharing is caring.
caring but still not gay. Eyh?!