Tutorial: Gambar ada kesan magikal.

Dengan izin nama Allah, Al-Aziz :)


Bismillahirrahmanirrahim. Seperti biasa kalau blog rin ada aplikasi tutorial baru, dengan bermurah hatinya rin nak share. Baik tak titeewww? *ok.abaikan* Harap anda suka dan dapat aplikasi dalam blog masing-II. Kalau nak copy tutorial ni, silakan tapi jangan lupa kredit dekat blog ni. Kalau ada masalah, boleh sediakan soalan di ruangan komentar.


Sebelum tu, mari rin terangkan tutorial apa yg rin maksudkan. "Gambar ada kesan magikal" ? Tajuk tak boleh power lagi ke bro? Hihihi. Nak spesifikasi kan lagi pemahaman anda, meh rin explain :

Maksudnya: Kesan Khas Pada Gambar Dalam Blog Pabila Cursor melalui Gambar Tersebut.    :)

Nak bagi faham lagi, meh rin share gambar. See! Baiknya aku semata-mata nak kasi korang faham ^^V

Sebelum.


 Selepas.


Kalau korang lalukan cursor dekat gambar tu, gambar akan bertukar menjadi kuasa magikal. Magikal tak? :P hewhew. Tak magikal mana pun, tapi nampak unik dan menarik macam dalam gambar contoh atas ni.  Ok lets we start. Mesti tak sabar-II nak tahu kan. C:

Step1:
Dashboard > cari Template





Step 2:

Template > Edit HTML




Step 3:

Untuk langkah berjaga-II , pastikan anda buat dahulu BACKUP TEMPLATE .Jangan lupa ok! Mana nak tahu kalau tak menjadi, menangis tak berlagu nanti. Jangan salahkan saya T.T


Kemudian, Copy kod bawah ni dan paste kod tersebut 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 #FF62B0;
-moz-box-shadow: 0px 0px 20px #FF62B0;
}

Contoh:
(Klik untuk tumbesaran yg lebih sihat)



Sebelum terlupa, anda juga boleh edit ikut pilihan warna feveret masing-II. Macam rin guna ni, rin ambil warna pink ,dah terang tang tang warna faveret rin. Huiii, Takkan lelaki pun nak pink kan? Jadi, rin sediakan link untuk anda pilih warna lain. (KLIK) Tukarkan kod FF62B0 di atas ni dengan kod warna pilihan anda.


Penting!

Mungkin ada kekeliruan disini. Macam mana nk jumpa /* Headings atau /*Header kan? Sebenarnya korang kena cari sendiri dalam Edit Html tu. Tak susah pun cari. Saya jumpa tak sampai 2 minit pun :) 



Ini yg terbaik saya dapat kongsikan dan Semoga anda dapat lakukan yg terbaik :)


KALAU SUKA, KLIK LIKE.

6 comments:

farhana said...

nice one to share :)

~uǝǝʇɐɟ said...

yeah :) thanks

Anonymous said...

wahhh bagusnya kak fatin .
dah dapat buat tutorial bagai :)

#sebut tutorial , tringat kat matrik !

~uǝǝʇɐɟ said...

bagus kan? :P haha ni tutorial ke-3 :)

#alamak, tutorial math tak siap lagi ^^" hehe dulu-II ~

cr said...

nak tgk gambar lagi magikal. jemput singgah ;p

~uǝǝʇɐɟ said...

dah singgah! :) nice tumbler~