'An eye for eye only ends up making the whole world blind.'--Mahatma Gandhi
The block quotation above was formatted using the <blockquote> tags. If you cannot view the styles that I have applied in the quotation above, switch to Mozilla Firefox browser. This browser is far much better than other browsers in terms of displaying CSS formats and in terms of being user-friendly. The Blogger/Blogspot default settings simply format blockquotes as indented. If you want to add decorative quotation marks and background color, you have to do some tweaking with the CSS codes. You can easily create blockquotes by higlighting the selected texts and clicking the "quote icon" found on the upper frame of the text editor as shown in the illustration below.
The format of the quotation above should look something like the one shown in the illustration below -- without the red oval, of course!
I have used the CSS codes shown below to achieve the effects that you see. Simply copy-paste these codes onto the style sheet of your template and save. Every time you make a block quotation, it will be formatted accordingly. You may also adjust some attributes to suit your preference. You can change the size of the decorative quotation marks and their colors; the height, width, and background of the blockquote; and the text formatting.
Codes:
BLOCKQUOTE {
color: blue;
display: block;
background: #FFF380;
padding: 0 60px;
width: 350px;
}
blockquote:before, blockquote:after {
color: #69c;
display: block;
font-size: 700%;
width: 50px;
}
blockquote:before {
content: open-quote;
height: 0;
margin-left: -0.55em;
}
blockquote:after {
content: close-quote;
height: 50px;
margin-top: -70px;
margin-left: 360px;
}
