Tutorial Header Hover Part 1
 |
| search from Pak Cik Google :P |
Selamat pagi semua..
You all dah breakfast belum? Bagi yang belum breakfast tu tak payah breakfast dulu, apa kata korang cuci mata tengok tutorial kali ini, ekekeke.Ramai yang request suruh D'ya buatkan tutorial tapi oleh kerana D'ya baru je habis exam, InsyaAllah D'ya akan selalu update dan penuhkan ruangan tutorial.Bak kata pepatah ' sharing is caring ' kan kan ? Nampak tak header hover seperti dalam gambar rajah di atas? Header hover part 1 kali ini berfungsi apabila cursor dihalakan, dia akan berubah menjadi senget.Comel kan? Rasanya dah ramai tahu fungsi ini, let's tutorial ;)
Firstly you all pergi ke dashboard > design > edit HTML
Then tekan ctrl+f dan F3 untuk search code ini - h1.title {
Dah jumpa? Okay good sekarang ni copy code di bawah ini dan pastekan di ATAS code tadi.Ingat paste di ATAS ok ?#header:hover{-webkit-transition-duration: 1s;-moz-transform: rotate(4deg);-webkit-transform: rotate(4deg);}
Step berikutnya ialah preview dulu sebelum save.Kalau tak jumpa code tadi, cuba korang try search code #header { dan letakkan code yang sama di BAWAH code tadi.
Akhir sekali, save laju-laju :)
Nota kaki:
MERAH - kalau nak lajukan masanya, boleh tukar mengikut kesesuaian blog. Contoh kalau nak tukar 0.5 dan lambatkan boleh tukar ke 2 atau 3. BIRU - Code yang diberi ialah hover headernya ke bawah.Kalau korang berminat nak buat hover header ke atas, just tukar number tulisan bewarna biru.Number boleh ditukar sesuka hati, barulah kreatif namanya ? Kan?p/s: kalau menjadi tutorial ni sila la comment, nak tengok gak header blog korang? Hehe
4 marshmallow komen