6 Stylish Blockquote Designs for Blogger

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

Source Code:

.post blockquote{ display:block;
background: #fff; padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 16px; line-height: 1.1; color: #666;
text-align: left;
border-left: 15px solid #c76c0c;
border-bottom: 5px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc; }
.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 a{ text-decoration: none;
background: #eee; cursor: pointer;
padding: 0 3px;
color: #c76c0c; }
.post blockquote a:hover{ color: #666; }
.post blockquote em{ font-style: italic; }

Style #5

Source Code:

blockquote { margin : 0 20px;
padding: 15px 7px 10px 15px;
background : #F1F8FE;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000;
border-top: 8px dashed #EAB555;
border-left: 8px dotted #EAB555; }
blockquote p { margin: 0; padding-top:8px; }

Style #6

Source Code:

.post blockquote { margin : 0 20px;
padding: 15px 30px 30px 20px;
background : #E7E5DC;
font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif;
color : #343434; border-left : 30px dotted #FF7802;
border-right : 30px dotted #FF7802;}
.post blockquote p { margin: 0; padding-top:5px; }

I hope you liked this post. Help us to spread our voice by sharing this to all your friends.

Share this post