16 February 2014

Tutorial: Blockquote 3 (Border Shadow Apabila Disentuh Cursor)

16/2/2014
Assalamualaikum dan Salam blogger


Semalam godek2 blog.. ade orang request tutor ! Orang yang sama :) Kak Fatimah Azzahrah ^_^ hukhuks...akak ni memang suke req tutor :* 
Ni beloq dia: http://sitifatimahpunyablog.blogspot.com/ pinkish kan? Dah la~ jom tengok ape yg dia request xD *no picture


Macam mana pulak nak buat blockquote berubah bile kita letak cursor tu? Please...


Sample takdo T^T tenet selo :( Kalau nak tau...follow jealah tutor ni :P

1. Dashboard >> Teplate >> Edit HTML
2. CTRL+F and search kod .post blockquote {
3. Paste code ni d' bawah kod di num 2 tadi :)

background:url(URL BACKGROUND); 
border-top: 4px solid #33FFFF; 
border-left: 4px solid #33FFFF; 
border-right: 4px solid #33FFFF; 
border-bottom: 4px solid #33FFFF; 
border-radius: 5px; 
margin:1em 20px; 
padding: 5px;  
} 
.post blockquote:hover { 
background-image:url(URL BACKGROUND LEPAS DISENTUH); 
background-position:center; 
background-repeat:repeat; 
-moz-box-shadow: 0 0 10px #D568FD; 
-webkit-box-shadow: 0 0 18px #D568FD; 
}

NOTES! PASTIKAN TUKAR!

1: Url background 
2: kETEBALAN BORDER
3: BOLEH UBAH KE DOTTED OR DASHED 
4: Warna border before touch
5: URL Background after touch
6: Warna shadow

KOD WARNA SEARCH DI SINI

4. Save dan preview ;)
5. You're done! Cantik tak...cantik tak ?

Eden dok ingat eden amek tutor ni dr blog mana :P so eden xleh put credit :(

No comments:

Post a Comment