Tuesday, May 29, 2012

Stylish CSS Blockquotes for Blogger

Are you bored with your old standard blockquote? If you do, then follow this step on how to create stylish blockquote to make your blog beautiful. And also this blockquote added with scroll-er to shorten the length size of your quote.

This blocquote can also be use as a place to put your parse code so it would look neat. 

Check out this picture bellow.


Do you like it? the follow these steps bellow

Steps How To Create Stylish Blockquote

1. Go to Dashboard
2. Design
3. Edit HTML
4. Find this code bellow and delete it all along with the occurrence

.post-body blockquote {or.post blockquote{ 

5. Then find this code ]]></b:skin>
6. Copy and paste the code bellow just before the code on step 5

blockquote {
margin: 0 20px;padding: 10px 20px 10px 45px;width:400px;
font-family:"Consolas","Courier New",Courier,mono,seri;padding: 10px 20px 10px 20px; border-top: 1px solid #DDD;border-right: 1px solid #3B3C3E;
border-left: 1px solid #DDD;
border-bottom: 1px solid #3B3C3E;
font-size: 0.9em;background-position: top left;background: #D4DBE7:url(http://i619.photobucket.com/albums/tt279/aurenfl/quotes.gif) repeat-y;}.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
7. Save the template
8. The stylish quote will only appear after you create new post.

Steps how to put blockquote tag with scroll in post


1. Go to Posting
2. New post
3. Click Edit HTML
4. Place this tag between the quote or the code as follow;


<div style="height: 250px; overflow-y: auto; overflow: -moz-scrollbars-vertical; width: 500px;"><blockquote><div>Place your quote or code here </div></blockquote></div>

No comments:

Post a Comment

Confused? Feel free to ask

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.

Note:
Please do not spam Spam comments will be deleted immediately upon my review.