03 December 2011

Kesan Khas Pada Gambar Apabila Dilalukan Cursor







بِسْــــــــــــــــــمِ-اﷲِالرَّحْمَنِ-اارَّحِيم

السلام عليكم ورحمة الله وبركاته




Hari ni saya nak ajar anda buat kesan khas pada gambar dalam blog apabila dilalukan cursor / arrow click . Kalau tak faham , cer try lalukan cursor anda pada gambar di bawah .



Hah , cantikkan ? Ni tutorial dia :

1. Dashboard - Design - Edit html

2. Back up tempelate sebagai langkah berjaga jaga .

3. Tick pada 'Expand Widget Templates' .

4. Tekan ctrl + F , kemudian akan keluar kotak seperti ini :


5. Cari code a img { dengan cara menaip code itu dalam kotak tersebut .

6. Sebagai tanda anda telah menjumpai code a img { tersebut adalah code itu telah di-highlight .

7. Delete code selepas a img { seperti contoh di bawah :

8. Kemudian gantikan dengan code ini :

-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; }


8. Pastikan ia menjadi seperti ini :

9. Save dan lihat hasilnya ^__^

PERHATIAN !!

Kepada sesiapa yang tidak menjumpai code a img { , anda hanya perlu :

1. Seperti biasa , ctrl + F kemudian taipkan code /* Header ataupun code /* Headings .

2. Setelah jumpa , copy dan paste code di bawah pada SEBELUM /* Header ataupun /* Headings .


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; }



NOTA :

Anda boleh menukar warna hover effect dia . DC (default colour) dia ialah warna pink .
Untuk menukar hover effect colour dia , delete semua code warna FF66CC dan gantikan dengan code warna pilihan anda . Anda boleh rujuk code warna di sini .

Hmm . Mungkin agak sukar untuk buat ni bagi sesiapa yang newbie dalam dunia blog . Oleh yang demikian , sangat dialu alukan untuk bertanya . InsyaALLAH kalau saya boleh jawab , saya akan jawab (: Wallah'alam .


SELAMAT MENCUBA DAN BITTAUFIQ WANNAJAH !! (:

No comments: