15 January 2010

Tutorial: Blockquote Like Mine


Assalamualaikum

So today ada orang request macam mana nak blockquote macam saya punya nih. Preview:


Blockquote macam ini. Credit to this awesome blog! :) Do visit.


Untuk Tempate Designer:
1. Dashboard > Design > Edit HTML > *tick Expand Widget Templates*
2. Tekan ctrl + f and search code ni : .post blockquote {
3. Pastekan code yang akan saya bagi nanti dekat bawah code tu.

Untuk Blogskins:
1. Dashboard > Template > Edit HTML
2. Pastekan code yang saya bagi sebelum code </style>

.post blockquote {
border:1px solid grey;
background:url(URL background);
color: #222;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
box-shadow: inset 20px 0 0px 0 grey;
padding: 10px 10px 10px 26px;
}

blockquote:hover{
-webkit-transition: 2.5s;
-moz-transition: 2.5s;
border:1px solid black;
background:url(url background);
box-shadow: inset 750px 0 0px 0 black;
color: white;
}

Yang grey dengan black tu, korang tukar dengan warna border korang sendiri sebelum dan selepas hover.
Untuk blogskins, code .post blockquote { tu tukar dengan blockquote { sahaja.

Kbye.


FROM:   -MUHD FADLIN-http://miserymakescars.blogspot.com

Related Posts Plugin for WordPress, Blogger...