Kesan Khas Pada Gambar Apabila Dilalukan Cursor

Satu kemestian bagi sesebuah blog mempunyai gambar di dalamnya. Tidak kira dalam entri atau di bahagian lain. Dan lebih menarik jika gambar yang anda letakkan memberikan sedikit kesan khas apabila anda lalukan cursor padanya.



Anda boleh lihat kesannya secara real di test blog ini.:)


Tutorial untuk membuat kesan khas pada gambar ini adalah seperti berikut.


1. Dari dashboard > design > edit html
(backup template untuk langkah berjaga²)

2. Dengan menggunakan fungsi find (ctrl + F), cari kod a img {

3. Delete kod selepas a img {, dan gantikan kod di bawah.

-webkit-transition-duration:.4s;}

img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}




Contoh:
Sebelum



Selepas


4. Save dan lihat hasilnya..:)

UPDATE:
Bagi yang tidak jumpa kod a img {,
copy kod di bawah, dan paste SEBELUM /* Headings atau /* Header


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



Note:
Anda boleh mengubah warna hover effect. Default warna pink (warna kegemaran perempuan ni.:).
Kalau hendak tukar warna lain, tukarkan FF66CC dalam kod di atas dengan kod warna yang anda suka. (kod warna lain boleh rujuk di sini)

192 comments:

  1. ohh maii ! . sngt bestt ! .. twnggs fer the tuto ! ,like it babe ~~

    ReplyDelete
  2. Xesha Xessi ,
    klu x de, copy semua code ni, letakkan sebelum /* Header

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

    ReplyDelete
  3. saya da guna .. :D cantek sgt2.. :D
    follow my blog :)
    http://rohana97.blogspot.com/

    ReplyDelete
  4. da buat da . ta jumpe p0wn . carik k0de yg sec0nd p0wn ta jumpe .

    ReplyDelete
  5. kalo nak buat gambar tu bercorak gerak2 masa lalukan cursor macam mane?? time kasih.. :D

    ReplyDelete
  6. tak dapat pun..need some help here ?

    ReplyDelete
  7. ahaaa! apsal x jmpe pun kod a img } tuuuuu~

    ReplyDelete
  8. Shiesha SamLovers, FaHMiSYaH

    Kalau tak de a img {, paste code sblm
    /* Headings atau /* Header

    ReplyDelete
  9. nice sharing da lama dok cari ::)

    ReplyDelete
  10. nape x jdi? dia x nmpak mcm border pon. gmbar tu yg tukar wne. keliling tu xde pon. tolong !!

    ReplyDelete
  11. hahaha..tq !!!!!!!!!!!

    sayang tuan empunya blog huhu..

    <3

    ReplyDelete
  12. boleh tolong ajar x nak wat cursor nama sendiri 2k blog?hehe

    ReplyDelete
  13. klaw klik pic jadi cerah da x?? kira mcm terbalik kn la.... da x?

    ReplyDelete
  14. yang tak jadi tuh, korang tengok korang cari macam mana, kalau berpandukan copy ikut langkah 2 tuh, mungki dapat buat..tapi yang tak dapat buat, korang carik ikut langkah yang guna header tuh then, copy langkah 3 dan tambah yang
    a mig {
    (code seterusnya...)
    admin- saya cuma nak bantu orang yang tak dapat...sori..tumpang lalu ya..

    ReplyDelete
  15. sy x phm la dgn mksd ltakn sblm /*header 2 mksd die cne?? hehe. can xplain to me plisss.... :)

    ReplyDelete
  16. salam sorry xd kaitan ngan entry but since u r quite expert bout this blogger things huhu...nk MINTA TOLONG!! ><

    adoihhhhhhhhhhhhhhhhh...sy rse awk je y le TOLONG sy skg..huhu sy xle login gmail acc a.k.a blogger acc sy?!!! da sminggu dh! adekah kaitan ngan hacking nih! adoihhh..TOLONG i need to update my blog..warghhhh SEDIH GLER..xtau nk wat camner dh..ni email sy klu awk tau cane nk settlekn prob sy ni er OR ANYBODY WHO READ MY COMMENT here....(T__T)

    my email
    suzai_smkj3@yahoo.com

    my blog
    sizzlingsuzai.blogspot.com

    ReplyDelete
  17. maaf, saya x faham mksd sebelum/header tu

    ReplyDelete
  18. code untuk "a img {" tak dapat dikesan... XP

    ReplyDelete
  19. npe x jadi pon...sy buat step no 4 tu tp x jadi jgk..

    ReplyDelete
  20. tak paham sebelum/header.. apa tu??? plez explain... thank you!!!! <3

    ReplyDelete
  21. Nor Khaleeda: Find header/heading pastu paste ja kat atas dia.. save and view blog.. hehehe

    haru ;lepas buat dan jadi.. THANX tuan tanah..

    ReplyDelete
  22. x boleyh jugakkkkk...
    da tension da buat....
    x paham betowl lahhhh...

    ReplyDelete
  23. da test wt bnyk kli . x pi x boleh . knape agk nyer ??

    ReplyDelete
  24. wehh...tak jadi ah..tak paham sebelum header tu ape.dlam code tu jugak ke?sy jumpe both header ngn heading..ayoo.please reply..begging you guys..tak paham..tak paham..

    ReplyDelete
  25. pew maksud header or heading 2...x paham la..

    ReplyDelete
  26. nice..
    sedikit penerangan untuk korang...

    a img { coding } <-- ini di panggil css ( cascading style sheet.. ) antara salah 1 fungsi css ni utk mengelakkan coding source jd berterabur

    1. ok. sy bagi contoh utk css..

    CSS :

    a img {float:left;list-style:none;margin:0 0 0 0;padding:0 }

    PADA HTML pula :

    <(div id='img'>image<9/div> ( buang tanda ( selepas < .. sbb komen x leh allow tag DIV

    id='img' tersebut merujuk pada setting pada CSS diatas ..

    boleh buat float..align..margin..fixed.. dan byk lagi.. boleh rujuk en.google..


    2. setiap pembukaan coding mesti ada penutup dia.. contoh <-a>contoh<9/a> ( <(/a> << penutup.. kalo x.. coding xboleh dibaca.. ( buang - lps < kalo x dia jd link .. )


    bagi yang x paham header tu, saya betulkan ek bagi pihak tuan blog ni.. bkn setiap templates mempunyai marking /*head

    CSS ni boleh cari sblm <(/head>

    http://myicteducation.blogspot.com/

    ReplyDelete
  27. thanks:))
    at 1st x dpt..then try lg n lg n lg~~~bru berjaya..hihi:)

    ReplyDelete
  28. ?Mcm ane nak kecilkan Pulak halaman ni . ?

    ReplyDelete
  29. i need s0me help..
    budak kechik mahukan pert0longan..
    kite cari code header/heading x jumpe...

    ReplyDelete
  30. da try wt, xdpt cri a img { tu, then try post sblm headings, tp xley jgk

    ReplyDelete
  31. tak boleh juga ,, TOlONG :( kepada yang jadi tolong ajarkan .. macam mana kamu buat :)

    ReplyDelete
  32. da save sebelum /*header but still tak menjadi .. macam mana sebenarnya ? please reply !

    ReplyDelete
  33. tengs . jdik la . comell :D

    ReplyDelete
  34. find je header..
    pastu paste code atas dye....
    jadik... tQ

    ReplyDelete
  35. cmner lak law kita nk pic kita jd bsaar law touch?blh ajar kn...

    ReplyDelete
  36. Huh ?
    Ta dapat2 !
    tolong lha aar betol2 :((

    ReplyDelete
  37. kenapa yang aina x jd ? sedihnyer.. :(

    ReplyDelete
  38. aduhh,, xleh laa .. tolong ajar leh x ?
    spe2 tolong ajar nadd ...~~~~

    ReplyDelete
  39. can't :( "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The content of elements must consist of well-formed character data or markup."

    ReplyDelete
  40. ta dpat la .. cbe bg code biar jelas ...

    ReplyDelete
  41. tak paham lahhh , ajar kan :( or tolong buad kan bole ? :'(

    ReplyDelete
  42. duh ssh lah...ssh btul..sape2 tolong ajar x.....

    ReplyDelete
  43. headings or header tu nak cari kt bahagian mana?

    ReplyDelete
  44. tak jadik pon :( dah banyak kali cuba :(

    ReplyDelete
  45. thanyou , dah jadi dah :)) thanks sangat !

    ReplyDelete
  46. jgn lupe follow me k.., hohoho~

    ReplyDelete
  47. huk8.... npew rara uat xjd.. xcntik da.. pix rara p ke tepi npew???? xskew2.... tlg2..

    ReplyDelete
  48. hahaha... da ciap... thnx yg da kongsi niey..

    ReplyDelete
  49. kenape sye pun jadi camni
    "Lebih daripada satu widget ditemui dengan id: HTML21. ID Widget perlulah unik."
    Blur dah ni...,

    ReplyDelete
  50. thanks . .da lame sy crik tutorial nip , .. hehehe last2 dpt jgak . .

    ReplyDelete
  51. amende tah. penat dah try. tak dapat2 gak. haiih-..-

    ReplyDelete
  52. tak jadi ah..and tak fham mksd */ ni ape dia???

    ReplyDelete
  53. ok tuan2 dan puan2 sudah jadi lol..tq2 sudah faham :)

    ReplyDelete
  54. waaa..x paham la yang heading header nih..nak cari kat mana?x jumpaa n x paham..pliss help me!!

    ReplyDelete
  55. nape sy wk xjadi pon..dh byk kali dh wk..

    ReplyDelete
  56. find header dan paste kod di beri mcm bawah ni sebelum /*


    kalau x boleh jugak copy kod bawah ni jer paste sebelum header /*


    a img {
    -webkit-transition-duration:.4s;}

    img:hover {filter: alpha(opacity=60);
    opacity: .6;
    border-radius:20px;
    border: 1px #FF66CC;
    -webkit-box-shadow: 0px 0px 20px #FF66CC;
    -moz-box-shadow: 0px 0px 20px #FF66CC;
    }

    ReplyDelete
  57. asal benda nie susah sangat nk buat hadoiii~

    ReplyDelete
  58. salam saya perlu bantuan awak,,,awak tolong buatkan yg tu untuk saya... sya dh cuba banyak kali dah... plzz help me

    ReplyDelete
  59. dapat ! dapat ! alhamdulillah .. masa tengah buat tuh . takut juga . takut silap kang . tah apa yang jadi nanti kan . tapi alhamdulillah . betul . betul - betul ikut step apa yang tulis .. thankyou so much yea !

    ReplyDelete
  60. thax. dah jd da pon blog super duper pinky sy. hehe ^^

    ReplyDelete
  61. jadi pun..dah lama cari benda nie..thanks.. :)

    ReplyDelete
  62. x jdi lha . sebelum header ? x phm ?

    ReplyDelete
  63. hurm , nk kne paste kt mne erk ? n header? kt mne????

    ReplyDelete
  64. thanks..banyak giler membantu ;)

    ReplyDelete
  65. -Yes jumpa , aku nan nani jumpa . Thanks ;)

    ReplyDelete
  66. tak boleh tak boleh tak boleh tak jadi tak jadi




    hellpppp me



    jap jap lau guna template designer mmng tak jadi eh?

    ReplyDelete
  67. tolong saya boleh tak?? sya da puas carik bende nie..pless...

    ReplyDelete
  68. takkk jadiiii adminnnn tolong lahhh kite

    ReplyDelete
  69. aduish,,xmnjdy lha,
    xphm inform nyewp,help2..

    ReplyDelete
  70. hadoi , macam mana ni ? saya pnya tak berapa nak jadi laa , kat siderbar ada gambar , jadi tau lengkung tu , tapi kat POST , tak jadi pulak , aisshh , kat blog lagi satu bole je , >< tolong aaa

    ReplyDelete
  71. pening!sumpah xjupe sume tu...a img {...sob sob

    ReplyDelete
  72. terima kasih...berjaya sekali lagi.td buat scroll kt achive..hehehehe

    ReplyDelete
  73. nk tnye mcm mne law ite lalu kn consur 2 at header ke atau at mne2 image dew akn kelua colour rainbow uhh..yg 2 menarik ..

    ReplyDelete
  74. thanks. firstly preview x ada effect tp lepas save alhamdulillah menjadi, terima kasih.

    ReplyDelete
  75. tak paham and tak jadik . iolong plishhh :(

    ReplyDelete
  76. camne nak wat yg camni gak tapi nak wat facebook or twitter???

    ReplyDelete
  77. na uad cnne nih ? ta paam !
    ajaq pleaz!

    ReplyDelete
  78. dah jadi...thanx sangat2.. (^__^)

    ReplyDelete
  79. Jutaan terima kasih kpd anda.Dengan tutorial anda, traffic sy semakin bertambah.Sila lawati blog sy bila kelapangan.

    ReplyDelete
  80. x de la kot a img { 2..
    so cm ne ni..

    ReplyDelete
  81. thank admin ia menjadi sngt first buat tk jadi byk kali smpai nk fedap denga kesabrn yg ad akhirnya phm jugk huhu


    bg korng yg tk phm mcm nie emma nk aja ewah!!!
    bnde nie korng kene ltk kad ats die

    /* Headings atau /* Header

    contoh

    -webkit-transition-duration:.4s;}

    img:hover {filter: alpha(opacity=60);
    opacity: .6;
    border-radius:20px;
    border: 1px #FF66CC;
    -webkit-box-shadow: 0px 0px 20px #FF66CC;
    -moz-box-shadow: 0px 0px 20px #FF66CC;
    }

    /* Headings

    pastu save insyaallah jadi

    ReplyDelete
  82. awat blog saia tade a img } tuhh :(
    sedihhh

    ReplyDelete
  83. kta nak buat . tapi tak reti la . hurm ~

    ReplyDelete
  84. done..thnks ye :)..bgus tutor ni..

    ReplyDelete
  85. saye nyer xdpat nak uat tol tutor nie....sedih jea...cam neq yea??? help me please... :( :(

    ReplyDelete
  86. tpi mcm mna nak cri A IMG tuh .?? kod pnjng sngat la .!

    ReplyDelete
  87. -KHAS UNTUK YANG TAK JUMPA code 'a img'-

    Bg yang still tak fhm ape tu header . Cam ni . Mule2 Design - Edit Html - Pastu dekat edit tempelate tu ada banyak code kan ? scroll pelan pelan sampai jumpa :

    /* Header
    ----------------------------------------------- */

    copy code ni sebelum header tu :

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

    then save tempelate . InsyaALLAH menjadi .

    ReplyDelete
  88. * maaf . pembetulan . copy dan paste code ni sebelum header tu :

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

    then save tempelate . InsyaALLAH menjadi .

    ReplyDelete
  89. da try byk kali die cakp Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor

    Error 500

    ReplyDelete
  90. plss help :( Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor

    ReplyDelete
  91. tak boleh laa...
    lepas tekan save templates terus keluar blank page... camne ni?

    ReplyDelete
  92. yea2!! jd la.. suke sgt..
    tq sharing..:)

    ReplyDelete
  93. thnks admin sebb sharing ALL the tutorial . ahaks :) best sngt2 for NEWBIE mcm sy .

    ReplyDelete
  94. success, pi tgk kat
    http://keringmenawan.blogspot.com/

    ReplyDelete
  95. "Lebih daripada satu widget ditemui dengan id: HTML6. ID Widget perlulah unik."

    pebende ni ?? T___T
    SEDIH NYE !

    ReplyDelete
  96. Alhamdulillah akhirnya jadik jgk :)

    ReplyDelete
  97. terbaek..senang nk paham
    http://online-perfume.blogspot.com/

    ReplyDelete
  98. Wah, nice tricks..simple tapi mudah diterapkan.

    ReplyDelete
  99. aq bukak Dari dashboard > design > edit html..pastu mane keluar ape code??aq try copy paste yg ada header tu ..but aq review dekat blog aq ada tulisan template tu..plssss help me ..

    ReplyDelete
  100. thanx a lot tutorial..dah cuba.dah jadi =)

    ReplyDelete
  101. thanks . cantek ! saye pun tak jumpe sume2 kod uh sameade a img , /*header uh pun tak jumpe . bud saye try cari perkataan header . and , try paste kat ats kod header yg sy cari tadi , then berjaye . so , try jelaa . kesiann admin . :)

    ReplyDelete
  102. haha , ain daa jmpe daa :) btw , thx yea :)

    ReplyDelete
  103. dapat buat tapi xde warna pn..knp ye??anyone can help me??

    View my blog.
    syahidatulfyda.blogspot.com

    ReplyDelete
  104. Macam mana nak buat , kalau kita tulis post orang tuh bagi reactions kepada post tuh , macam suka ( ? ) tak suka ( ? ) Terlampau suka ( ? )

    ReplyDelete
  105. PENING KEPALA MACAM MANA NAK BUAT NI?
    PERTAKAAN header LANGSUNG TAK JUMPA. NAK BUAT CAM NE? SOMEBODY PLEASE HELP ME!!

    ReplyDelete
  106. OK SEKARANG, ADA CARANYA..
    MULA-MULA MEMANG SUSAH NAK BUAT TAPI..
    sebenarnya mudah jer.

    First~Yang susah nya admin blog ni guna yang lama so korang kena tukar dulu ke version lama.. Kalau nak lebih mudah ikut cara http://tutorialuntukblog.blogspot.com/2010/02/letak-icon-pada-url-blog.html sambil tu ikut scroll pelan pelan sampai jumpa :

    /* Header
    ----------------------------------------------- */

    copy code ni sebelum header tu :

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

    then save tempelate . InsyaALLAH menjadi .

    Rasanya menjadi. sebab saya buat menjadi..
    Kalau yang dah menjadi tu tolong-tolonglah follow blog saya bleh kan? http://hopinginmylive.blogspot.com/

    ReplyDelete
  107. terima kasih saya telah mendapatkan ilmu dari blog anda ..
    sekalian perkenalkan blog saya http://usahaku-halal.blogspot.com

    ReplyDelete
  108. kalau boleh buat totorial dalam video la lagi best huhu

    ReplyDelete
  109. like2! hebat2 ;P thanks tau!

    ReplyDelete
  110. like2! hebat2 ;P thanks tau!

    ReplyDelete
  111. what if.. kita nak certain gambar je yg ade effect tu. contohnya nak gambar kt post je yg ade effect tu tp kat sidebar taknak. cemana ye ? please tolong yer admin :)

    ReplyDelete
  112. Hehe tq dah dapat, kena tukar pergi version lama baru senang nak cari img tuh..

    ReplyDelete
  113. wuuuu,,, sedihnye.. semua x jadi.. kecuali kelopak bunga jer... la.. sedih lah.. nk buat bubble cursor.. waaa. :(

    ReplyDelete