Home / Blogging / how to add different style blockquote in blogger
how to add different style blockquote in blogger
how to add different style blockquote in blogger

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 as 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 set 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 chose your favorite 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;
font-family: cambria, Georgia;
font-size:4em; line-height:.1em;
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-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.

About admin

IT Expert, Web Designer & Developer, SEO Specialist, YouTuber. Studying BS (Software Engineering) From Middlesex University Lived in Islamabad, Pakistan

Check Also

Hwo to add an elegant author box in blogger

how to add an elegant author box in blogger

Are you looking for an Author Box for your blogger? If yes, I have one …

Leave a Reply

Your email address will not be published. Required fields are marked *