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)

189 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. thanks sgt2..da boleh ! :)

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

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

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

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

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

    ReplyDelete
  9. Shiesha SamLovers, FaHMiSYaH

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

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

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

    ReplyDelete
  12. hahaha..tq !!!!!!!!!!!

    sayang tuan empunya blog huhu..

    <3

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

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

    ReplyDelete
  15. 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
  16. sy x phm la dgn mksd ltakn sblm /*header 2 mksd die cne?? hehe. can xplain to me plisss.... :)

    ReplyDelete
  17. 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
  18. maaf, saya x faham mksd sebelum/header tu

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

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

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

    ReplyDelete
  22. 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
  23. x boleyh jugakkkkk...
    da tension da buat....
    x paham betowl lahhhh...

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

    ReplyDelete
  25. 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
  26. pew maksud header or heading 2...x paham la..

    ReplyDelete
  27. 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
  28. thanks:))
    at 1st x dpt..then try lg n lg n lg~~~bru berjaya..hihi:)

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

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

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

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

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

    ReplyDelete
  34. tengs . jdik la . comell :D

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

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

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

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

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

    ReplyDelete
  40. 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
  41. ta dpat la .. cbe bg code biar jelas ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  57. 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
  58. asal benda nie susah sangat nk buat hadoiii~

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

    ReplyDelete
  60. 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
  61. thax. dah jd da pon blog super duper pinky sy. hehe ^^

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

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

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

    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. ala nape takk boley nie ?

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

    ReplyDelete
  71. 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
  72. pening!sumpah xjupe sume tu...a img {...sob sob

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

    ReplyDelete
  74. 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
  75. thanks. firstly preview x ada effect tp lepas save alhamdulillah menjadi, terima kasih.

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

    ReplyDelete
  77. x jumpa a img { pun..

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

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

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

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

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

    ReplyDelete
  83. 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
  84. huhu ! thnks for the tutorial ! like it !

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

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

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

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

    ReplyDelete
  89. -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
  90. * 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
  91. da try byk kali die cakp Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor

    Error 500

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

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

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

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

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

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

    pebende ni ?? T___T
    SEDIH NYE !

    ReplyDelete
  98. Alhamdulillah akhirnya jadik jgk :)

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

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

    ReplyDelete
  101. 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
  102. thanx a lot tutorial..dah cuba.dah jadi =)

    ReplyDelete
  103. np taa jmpe pon kod nakk cary 2 ~

    ReplyDelete
  104. 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
  105. haha , ain daa jmpe daa :) btw , thx yea :)

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

    View my blog.
    syahidatulfyda.blogspot.com

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

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

    ReplyDelete
  109. 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
  110. terima kasih saya telah mendapatkan ilmu dari blog anda ..
    sekalian perkenalkan blog saya http://usahaku-halal.blogspot.com

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

    ReplyDelete
  112. Knapa x dak pun kode a img { tuh?

    ReplyDelete
  113. 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
  114. Hehe tq dah dapat, kena tukar pergi version lama baru senang nak cari img tuh..

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

    ReplyDelete