How to Style Up Your Quotes in Blogger?

There are so many tricks and examples to make them like this quote, The options I use for my quoted text on my personal blog TechComet are as follows, Now To add One of these amazing and unique blockquotes to your blogs, do the following,

blockquote {
margin:1em 20px;
background: #dfdfdf;
padding: 8px 8px 8px 8px;
font-style: italic;
}

 This produces the following effect when I select text to quote:

The text is slightly indented, it is italicised and there is a soft grey background. These changes really make the quoted text more striking and it is easy to differentiate it from the main body of the article.
There are a number of different options you can add to your quoted text and I will discuss them below.

Margin
First, you will want to indent your text so that it is not in the same line as the rest of your article. You can do this by adjusting the number of pixels that the margin is from the rest of the text. I have set mine to 20px. Adjust this value as you see fit.

margin:1em 20px

Next you can change the background colour by adjusting the “background” tag. I have chosen a light grey colour. The colours in HTML code are represented by six “hexdigits”. You can obtain a list of colours and their corresponding hexdigit from here.

background: #dfdfdf

Padding
The amount of “padding” you use determines the distance that the quoted text is from the edge of the box created by the background colour. The smaller the number of pixels, the closer the text will be to the edge of the box.
The first figure is the distance (in pixels) from the top of the quote text box to the start of the text, the second figure is the right indent, the third figure is the bottom indent and the fourth figure is the left indent (In short, the 4 figures start from the top and go in a clockwise direction).

padding: 8px 8px 8px 8px;

Font Style
You can also bold or italicise the quoted text to really make it look different from the rest of your article.

font-style: italic, bold;

Borders
I have not chosen to add a border to my quoted text, however, if you wish you can do this by using the “border” tag. You must chose the thickness, style and colour of your border.

border: 2px solid #dfdfdf

or

border: 2px dotted #dfdfdf 

Conclusion

In most modern blogs there are often sections that are quoted from other websites and blogs. To make your blog stand out and to add a “professional” touch to it, I would recommend spending some time and customising the look of your quoted text. Let us know how text is quoted in your articles!