-->

26.4.12

Rounded Image hover effect. (Efek gambar melengkung)

Maafkan saya, sebab lama tak update. Tapi terima kasih, korang still singgah sini. =')

Sekarang nak buat tutorial Rounded Image hover effect atau efek gambar lengkung (main tibai je name benda alah ni. haha. ;p). Ramai sangat dah mintak, sila lempang nadd sekarang sebab lambat sangat buat tutorial ni. T______T


Ni lah contoh efek gambar tu bile cursor di halakan ke gambar. =)

*sorry tau lambat. =_______=" *

Untuk minima template & classic template (Temp.Designer kat bwh.)
  1. Pergi Dashboard >> Design >> Edit HTML
  2. Then, tekan kat keyboard : "Ctrl + f" (tekan Ctrl dgn f serentak), akan keluar satu kotak find.
  3. cari code ni : a img {
  4. Pastu, copy code bawah ni pulak : 
    -webkit-transition-duration:.4s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FA58AC; -moz-box-shadow: 0px 0px 20px #FA58AC; -webkit-border-top-right-radius:20; -webkit-border-top-left-radius:20; -webkit-border-bottom-right-radius:20; -webkit-border-bottom-left-radius:20;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px dashed #FA58AC; border-radius: 30px; -moz-border-radius: 30px;}
    *noted: tulisan berwarna boleh ubah. #FA58AC boleh tuka color lain kat SINIdashed boleh tukar jadi: solid/dotted/inset/outset/double (test sendiri)

  5. Paste kan di sebelah a img { tadi. =)
  6. SIAP!
Untuk Template Designer
  1. Pergi Dashboard >> Design >> Edit HTML >> pilih Template Designer *sebelah Edit HTML*
  2. cari :
  3. Then cari, Add CSS. Copy and paste code ni kat situ. (tengok gamba)

a img {
-webkit-transition-duration:.4s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FA58AC; -moz-box-shadow: 0px 0px 20px #FA58AC; -webkit-border-top-right-radius:20; -webkit-border-top-left-radius:20; -webkit-border-bottom-right-radius:20; -webkit-border-bottom-left-radius:20;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px dashed #FA58AC; border-radius: 30px; -moz-border-radius: 30px;}

Last: SAVE je. SIAP! =)
ok.BaiBai. <3
p/s: AWAY untuk 3 HARI.
pergi BERCUTI. yay! :D


UPDATED!

Tutorial ni maybe dah tak support format blog baru skrg,
sbb tu ramai yang buat tak jadi.
Cubalah byk kali, tapi if still tak jadi..

tak dapek den nak nolong.
Sorry T___T



65 orang doa saya kawen cepat. =p :

nabilameera said... Reply To This Comment

hee , tenkiu2 <3

nabilameera said... Reply To This Comment

eh tp knp meera dh tkn apply tp knp xjd eh ? meera pkai tmplate designer

Estrellaoki said... Reply To This Comment

awak awak , knp kita buat tak jadi . tak da effect pun .awak tolong say tau . hehe

Anonymous said... Reply To This Comment

Thank you for the great information! I would not have discovered this otherwise!

juicy junkies said... Reply To This Comment

http://juicyjunkieswardrobe.blogspot.com/

check out this blogshop and follow us, happy shopping! :)

Nina.sweet! said... Reply To This Comment

akak,
tak jadilah..
dah save and dah buat banyak kali,
but still tak jadi gak..

Nina.sweet! said... Reply To This Comment

akhirnya !
dah berjaya !
hehe..
thanks for the tuto, kak ! ^^

Nadd said... Reply To This Comment

@juicy junkies okeyyy. :)

Nadd said... Reply To This Comment

@Nina.sweet!
try lagi utk temlate designer tu.

Nadd said... Reply To This Comment

@Nina.sweet!
kan dh jadi.
welkam. :)

Nadd said... Reply To This Comment

@nabilameera
hehe. ok. :)
same same.

Nadd said... Reply To This Comment

@nabilameera
try lg mst boleh pny!

Nadd said... Reply To This Comment

@Estrellaoki
np xjd? klu temp.degsigner, ikut tuto temp.designer kay?

cahaya said... Reply To This Comment

dah jadi! comel je.
time kaceh!

Nurujunior said... Reply To This Comment

comel lak menatang ni. huhu.. ^^

Nadd said... Reply To This Comment

@cahaya
came cameee~ =)

Nadd said... Reply To This Comment

@Nurujunior
mmg comel mcm sy. KAHKAHKAH. :D

Nurin Hannani said... Reply To This Comment

Kak Nadd ! Thanks ! Lame dh cari benda ni :)

Maisarah_Cy said... Reply To This Comment

Sis, tak jd lah, dah try bnyk kli dah.. :(

Mrs.Syaz said... Reply To This Comment

tak dapat laa --' dah try banyak kali , tetap tak dapat :(

Nadd said... Reply To This Comment

@Nurin Hannani
u're welcome dear. ^^

Nadd said... Reply To This Comment

@Maisarah_Cy
refer yang template designer pny tuto.

Nadd said... Reply To This Comment

@Mrs.Syaz
refer yang template designer pny tuto.

Maisarah_Cy said... Reply To This Comment

yes!! Yes!! Dah jd. THANK!! :)

Filda Nur Khalis said... Reply To This Comment

yeah jadi, thanks :)

NurMariniNabila said... Reply To This Comment

nape saye buad tak jadi ?

NurMariniNabila said... Reply To This Comment

still tak bole , cane eak ?

Nadhirah said... Reply To This Comment

hye..thanx sgt2..mmg da lame cari...tq

Imah_ said... Reply To This Comment

Thx!Menjadi!Tapi sayer da tukar wane dier!Jadi wane oren cam blog sayer!Hehe ty!Suka la tuto blog nih!

Nadd said... Reply To This Comment

@Maisarah_Cy

@Filda Nur Khalis

You're welcome. =)

Nadd said... Reply To This Comment

@NurMariniNabila

try again. refer "Template Designer" tu. if still xjadi, xtau lah.
org lain buat jadi. =)

Nadd said... Reply To This Comment

@Nadhirah
hehehehe.. same nadhirah.
name same lah. =)

Nadd said... Reply To This Comment

@Imah_
hehe. dah tgk dah.
comel gak wrne oren.
thx sbb suka tuto blog ni. =)

scheyrare said... Reply To This Comment

x jd lha. saya gne template designer.. ble da apply kt add css tuh, x jd pun...

Muhammad Faris bin Yahya said... Reply To This Comment
This comment has been removed by the author.
αʏʋℓɛƨтαяι ♥ яʏαинαяιαитσ said... Reply To This Comment

kak nadd. mcm mne plak kalao kitaa nak buang hover pict melengkung niee?

meraa zamri said... Reply To This Comment

nad , dh refer byk kali .. try pon sama .. ttp tak jd ..

truely from me :) said... Reply To This Comment

hm , knpe sye wat tak jd ?

truely from me :) said... Reply To This Comment

kenape sye wat tak jd ?

Sunshine said... Reply To This Comment

maceh NADD :)daa jdy .

ila said... Reply To This Comment

sis time kasih sgt untuk tuto yg templete desingner tu..


sharing is caring :)

Shiety Myra Chubbyra ;P said... Reply To This Comment

thx ..
tapi nape...
kalau gamba yang besar sikit dy xjadi eh???
n kalau header mmg dy xkan jadi cm2 gak ker?

emy zulaiha said... Reply To This Comment

nad boleh tolong emy? emy search a img { tue xde pon. sobsob =(

Nadd said... Reply To This Comment

@Nurin Hannani sesame yunk. :)

Nadd said... Reply To This Comment

@Maisarah_Cy tkpe try lg. org len buat boley.. :)

Nadd said... Reply To This Comment

@Maisarah_Cy same2.^^

Nadd said... Reply To This Comment

@Filda Nur Khalis same2.^^

Nadd said... Reply To This Comment

@NurMariniNabila try lagi. :)

Nadd said... Reply To This Comment

@Nadhirah
same2.^^
buat jgn x wat.

Nadd said... Reply To This Comment

@Muhammad Faris bin Yahya ikut code wrne die.
try lah cari. huhuhu.. ^^

Nadd said... Reply To This Comment

@αʏʋℓɛƨтαяι ♥ яʏαинαяιαитσ buang je code tu balik. sng je..

Nadd said... Reply To This Comment

@meraa zamri

@truely from me :)

tak tahu lah np korng xley wat.
mmg nadd tau tuto ni je.
org lan ok pulak. try cri tuto lain pulak la ek. :)

Nadd said... Reply To This Comment

@Sunshine
you're welcome. :)

Nadd said... Reply To This Comment

@ila
yeah. sesame. ^^

Nadd said... Reply To This Comment

@Shiety Myra Chubbyra ;P
boleh je la.

Nadd said... Reply To This Comment

@emy zulaiha
ade. cube cri betol2..
try lg keyy.. :)

asyrah salleh said... Reply To This Comment

dah try buat byak kali,p tak jadi lah:'(

Nadd said... Reply To This Comment

@asyrah salleh

cube try lagi skali,
tp klu xley jugak,
maybeee format blog skrg dah baru,
so da xley gune.. T__T

Hanalicious said... Reply To This Comment

Hehe tenkiu!

sumcara said... Reply To This Comment

Disini kacang olong, terimkasih tutorial kacang my.

Nadd said... Reply To This Comment

@sumcara

sama-sama. :)

topSpot | Find your top spot here said... Reply To This Comment

Kern nih hover effect nya! Nice posting :)

Nadd said... Reply To This Comment

@topSpot | Find your top spot here
thx. :)

Lintang A Pramesti said... Reply To This Comment

jadi la. Thanks y!

Lintang A Pramesti said... Reply To This Comment

re tuto ye? credit :D