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 :(