How To Add Different Style Blockquote In Blogger

A block quotation (also known as a long quotation or extract) is a quotation in a written document that is set off from the main text like a paragraph or block of text and typically distinguished visually using indentation and a different typeface or smaller size font. This is in contrast to setting it off with quotation marks in a run-in quote. Block quotations are used for long quotations. The Chicago Manual of Style recommends using a block quotation when extracted text is 100 words or more, or approximately six to eight lines in a typical manuscript Wikipedia. Today in this post I am going to share with you guys how to add different style block-quote in blogger. Follow the steps below

1. Go to blogger Dashboard -----> Template -----> Edit HTML.
2. Click anywhere in HTML area and press Ctrl+F (A Search Box will appear).
3. Search for this code  ]]></b:skin>

Now choose your favourite block-quote style code and paste this code just above ]]></b: skin>

Style 1:

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 #ea5c35;

;
border-bottom: 5px solid #ea5c35;
-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 2:

Source Code:

.post blockquote { margin : 0 20px;
padding: 15px 30px 30px 20px;
background : #FFFAF8;

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

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:#ea5c35;
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: #ea5c35;
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; }

Save your template and view blog.

That's it you done your work and if you have any problem please comment below.