Our blogger site needs many CSS elements to display the special portion of texts to catch the readers attention. We use the bullet list or numbered list to make our post more attractive and beautiful. But when we publish the codes within our blogger posts we usually insert the blockquotes around the codes but sometimes we do not feel satisfied with the blockquote because some blockquote styles are looking annoying.

Check out: 4 Killer Horizontal Email Subscribe Widget For BlogSpot

Today, I am going to share some block-quote designs that will give a beautiful look to your blog posts. All you need to choose your preferred style and install this in your blogger template.

Pay Attenton: Beautiful Syntax Highlighter for Blogger

Adding Blockquote To Your Blogger Template

1. Choose your proffered style and copy the code
2. Go to your blogger Dashboard  > Template  > Edit HTML
3. Press Ctrl& + F and click anywhere inside the template editor
4. Type ]]></b:skin> in the search box and press Enter key
5. Now just above the ]]></b:skin> paste the code and click Save template.

Style #1

Source Code:

.post blockquote { background:#f9f9f9;
border-left:7px dashed #ccc; font-family: Georgia, serif;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019"; }
.post blockquote:before { color:#ccc;
content:open-quote;
font-family: cambria, Georgia;
font-size:4em; line-height:.1em;
margin-right:.25em;
vertical-align:-.4em; }
.post blockquote p { display:inline; }
.post blockquote cite { color: #999999;
font-size: 14px; display: block;
margin-top: 10px; }

Style #2

Source Code:

.post blockquote { @import url(http://fonts.googleapis.com/css?family=Muli); background:#fff; border-width:5px; border-style:dashed; 2px #ccc; color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px; }

Style #3

Source Code:

.post blockquote{ font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-width:5px;
    border-style:dotted solid; border-color:#f1ae28;
margin: 1em 0px; padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif; font-style: italic;
font-size: 1em; min-height: 60px; }
.post blockquote:before { display: block;
float: left; content: "\201C"; font-size: 100px;
margin-right: 10px; color: #fff;
background-color: #f1ae28;
padding: 15px 12px 5px 8px; width: 50px; height: 50px; line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; }
.post blockquote cite { position: relative; display: block; text-align: right;
margin-top: 5px; color: #999; }

Style #4