How To Style Up BlockQuote With Extra CSS For BlogSpot?

What Is A BlockQuote?

In HTML and XHTML, the blockquote element defines "a section [within a document] that is quoted from another source".The syntax is <blockquote><p>blockquoted text goes here</p></blockquote>.
The blockquote element is used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form, but this may be overridden by Cascading Style Sheets (CSS)
The non-semantic use of the blockquote element purely to indent text is deprecated by the W3C (World Wide Web Consortium) in the current (1999) HTML 4.01 Specification,which is also the basis for XHTML 1.0. The preferred approach is the use of CSS.

(By WikiPedia)

Now officially if you are using simple <blockquote>, then it will move your text to middle with a huge padding, but if you will add some extra CSS to it, then you can change the color for the blockquotes, increasing or decreasing the size for the same and changing the background color. It’s pretty self explanatory. Just play with the values defined for color/font-size attributes in the CSS mentioned above and you’ll be able to understand the same.

In blogger, there is also an official option to add <blockquote> to your post with one click only, so we can use it to showing some eye catching words into it. It will also garb the visitor eyes to have a view on them. First see the demo below and read about Hoe to add <blockquote> in blogger, aafter that just add hte CSS with your desire to style it up.

This Is A DEMO BlockQuote, The Below Provided CSS Code Will Bring Up This Box In Your BlockQuotes.

Features:

1.) It Is Used To Show An Important Text Like Quotation Or HTML Codes.
2.) Adding CSS Will Make It More Beatifull.
3.) Fully Customizable.
4.) Garb The Visitor Eyes As Well.
5.) Better For SEO.

How To Add <BlockQuote> In Blogspot Post?

1.) Go To www.blogger.com
2.) Open Your Desire Blog.
3.) Go To "New Post".
4.) Add Your Text/Code/Quotation.
5.) Now Highlight That All And Click "Double Comma" Icon In Your Text Tab(As Shown In Fig).

How To Add CSS To <BlockQuote> In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To "Template".
4.) Click "Edit HTML".
5.) And Click "CTRL+F" To Search ]]></b:skin>.
6.) Now Copy The Below Code And Paste It Before It.
7.) Click Save, Now You Are Done.

.post-body blockquote {background: #FFFFCC;padding: 10px;width: 80%;height: auto;border: 2px dotted #FFCC66;text-align: left;font-style:italic;color: #6e6e6e;-moz-box-shadow: 0px 5px 15px #ccc;-webkit-box-shadow: 0px 5px 15px #ccc;box-shadow: 0px 5px 15px #ccc;-moz-border-radius: 15px;border-radius: 15px;}

Customization:

1.) You Are Free To Change CSS Code In Black Bold Text.
2.) Save And Done.