How to Customize Blockquotes in Blogger, Adding Rich Style to Blockquotes

Socialize It

Tweet

Blockquotes or quotes are very important in blogging, Whenever you are quoting or highlighting something very important you need them, especially when i am blogging about tips and tricks or blogging about widgets codes it helps me and my readers a lot to grab codes quickly from quotes.

The typical or default blogger quote style are there but you can make it more attractive and beautiful by adding just few simple codes to your blog template.

Now let's quickly jump to doing it

And here's how you do it!
First of all you need is

1. Go to Templates > Backup & Restore  Make a backup
2. Now Click Edit HTML > Expand Widgets
3. Press Ctrl + F, search for .post blockquote  or .entry blockquote, you will have code like this:

.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

Below is Best Blog Tricks' (BBT) blockquote style [Example]

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

If you want to have blockquote style like BBT just copy the code below and paste it before

]]></b:skin> or paste it instead of the above code in step 3 (Remove code found  in step 3 and paste the following code)

blockquote {
background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuzRm2xgR0nc5D-qLoxt0Nq6vLFZyBXP8VLn_Uy6XkkiTGsxll2OPh3pzJgLBy5VIXI7xE2GZ2pE465HAArLxX_CUCr4ZoDuiUSob0u6lMVN7mJyFZE9IwH6An6h8OvsYdhLz-W6wFXEY/s1600/block-qoute1.png)bottom left repeat-x;
margin: 0 20px;
padding: 7px 20px 50px 50px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
font: 14px normal  sans-serif,Tahoma;
overflow:hidden;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}

Replace  image with your own

Here is another custom blocquote style with code

Style)

Code

.post blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
.post blockquote p {
margin: 0; }