Monday, July 23, 2012

Tutorial : Blockquote Version 1


Tumblr_m7fu7eihcv1r780vfo1_500_large
Ok , hari tu ade requestion dari seseorang . she say , macam mana nak buat blockquote hover kanan ke kiri . i think she say like that LOL >< . i dont know lah . I can't remember >< . hmmm rasanya die maksudkan Blockquote bawah ni kot :

before:

 after:


dah faham? ok now cara nak buat pula:


For Blogskin
  
 Dashboard > Template > Edit HTML
 Tekan Ctrl + f serentak dan cari code blockquote { 
 Tukar code tu kepada code dekat bawah ni


blockquote{
background:url(BACKGROUND URL);
display:block;
padding:5px;
border-left:20px solid #A4A4A4;
border-right:0px solid #A4A4A4;
color:#9C9C9C;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

blockquote:hover{ 
display:block;
padding:5px;
border-left:0px solid #000;
border-right:20px solid #000;
color:#000000;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

 Paste di bawah blockquote { tadi
 Save


For Design 

 Dashboard > Designer > Edit HTML
 Tekan Ctrl + f serentak dan cari code /* Headings
 Copy code dekat bawah ni


blockquote{
background:url(BACKGROUND URL);
display:block;
padding:5px;
border-left:20px solid #A4A4A4;
border-right:0px solid #A4A4A4;
color:#9C9C9C;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

blockquote:hover{ 
display:block;
padding:5px;
border-left:0px solid #000;
border-right:20px solid #000;
color:#000000;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

Paste di bawah code /* Headings tadi
Save.


merah : warna border
biru : URL background

4 comments:

saidatul hazirah said...

thanks comell , dah lama cari benda niyhh .

Atin Tory said...

@saidatul : oh yeke? ok welcome ^^

Aimi Dyna ✰ said...

Tq, kak!

Zira Luv 2ne1 said...

tpi camane nk gne bende ni ._.