Sunday, January 22, 2012

blockquote II

ook nampak tak blockquote kt bawah ni... minat giler aq dengan blockquote ni  ... so let's try it ...

sebelum

 selepas


first:\
Dashboard > Design > Edit HTML > tick Expand Widget Templates > ctrl F dan cari kod .post blockquote {

second:/
kalau ad kod kat bawah .post blockquote { so korang kena buang dulu ye

third:/
copy code bawah ni >
background-image:url(URL korang);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 800ms;
border:1px dashed #FCAFD9;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
padding: 10px;
}
fourth:/
paste code atas ni di bawah code .post blockquote { yang korang cari tadi
sekarang untuk hover blockquote pulak...

fifth:/
copy code ni >

.post blockquote:hover {
background-color: #F6CEED;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 300ms;
-moz-border-radius: 35px;
border-radius: 35px;
border-top:3px solid #EC75BA;
border-bottom:3px solid #EC75BA;
padding: 10px;
color: #6B0B6B;
}

sixth:/
paste dekat bawah code di step third:/ ook

seventh:/
preview dulu ...kalau dah puas hati dan menjadi baru save ... nanti tak pasal2 frust tergolek-golek ... :P
selamat mencuba !!


CODE :
URL background yang korang suka
ketebalan border korang, makin kecik nombor makin nipis boder
ni tukar kepada dashed or dotted or solid
warna untuk boder
jenis border ...korang boleh tukar
ni sebenarnya tak de fungsi pon..takkan tukar warna pun 
warna tulisan akan bertukar selepas hover






pastu korang pandai2 la edit balik apa yang diwarnakan ... tanya kalau tak paham... bye !

2 comments:

fara said...

awak...saye nak tawu la...kat mne nak crik url tuh... hahahaha =P
bagitawu la~...
nanti saye bgi lolipop...hik3

#gedik tak ayat aku...!

kechix said...

cari dekat photobucket.com jerk