Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Tuesday, November 27, 2012

How To Style Up BlockQuote With Extra CSS For BlogSpot?

This Article Was Live On: Tuesday, November 27, 2012 And Till Now Have11 comments.
How To Style Up BlockQuote With Extra CSS For BlogSpot?

What Is A BlockQuote?

In HTML and XHTML, the blockquote element defines "a section [within a document] that is quoted from another source".The syntax is <blockquote><p>blockquoted text goes here</p></blockquote>.
The blockquote element is used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form, but this may be overridden by Cascading Style Sheets (CSS)
The non-semantic use of the blockquote element purely to indent text is deprecated by the W3C (World Wide Web Consortium) in the current (1999) HTML 4.01 Specification,which is also the basis for XHTML 1.0. The preferred approach is the use of CSS.

Now officially if you are using simple <blockquote>, then it will move your text to middle with a huge padding, but if you will add some extra CSS to it, then you can change the color for the blockquotes, increasing or decreasing the size for the same and changing the background color. It’s pretty self explanatory. Just play with the values defined for color/font-size attributes in the CSS mentioned above and you’ll be able to understand the same.

In blogger, there is also an official option to add <blockquote> to your post with one click only, so we can use it to showing some eye catching words into it. It will also garb the visitor eyes to have a view on them. First see the demo below and read about Hoe to add <blockquote> in blogger, aafter that just add hte CSS with your desire to style it up.
This Is A DEMO BlockQuote, The Below Provided CSS Code Will Bring Up This Box In Your BlockQuotes.


1.) It Is Used To Show An Important Text Like Quotation Or HTML Codes.
2.) Adding CSS Will Make It More Beatifull.
3.) Fully Customizable.
4.) Garb The Visitor Eyes As Well.
5.) Better For SEO.

How To Add <BlockQuote> In Blogspot Post?

1.) Go To
2.) Open Your Desire Blog.
3.) Go To "New Post".
4.) Add Your Text/Code/Quotation.
5.) Now Highlight That All And Click "Double Comma" Icon In Your Text Tab(As Shown In Fig).

How To Add CSS To <BlockQuote> In Blogspot?

1.) Go To Your
2.) Open Your Desire Blog.
3.) Go To "Template".
4.) Click "Edit HTML".
5.) And Click "CTRL+F" To Search ]]></b:skin>.
6.) Now Copy The Below Code And Paste It Before It.
7.) Click Save, Now You Are Done.

.post-body blockquote {background: #FFFFCC;padding: 10px;width: 80%;height: auto;border: 2px dotted #FFCC66;text-align: left;font-style:italic;color: #6e6e6e;-moz-box-shadow: 0px 5px 15px #ccc;-webkit-box-shadow: 0px 5px 15px #ccc;box-shadow: 0px 5px 15px #ccc;-moz-border-radius: 15px;border-radius: 15px;}


1.) You Are Free To Change CSS Code In Black Bold Text.
2.) Save And Done.

You Like It, Please Share This Article Using...

Don't Forget To Read This Also...


  1. Just want to say thank you very much for the quick tip. I'm kind of new to Blogger and I haven't fully understood it yet. Again, many thanks.

  2. Great . see my recent post
    Get More Comments By Disqus Comment Box @ ProgrammingIn

    1. Thanks, Acctually I Am Not Using Any Third Party Plugin Becuase I Found The Blogger The Best.

  3. Very nice and useful for all bloggers,Thanks

    1. Yes, It's Officially Intregated By One Click One. Thanks For Visiting.

  4. Replies
    1. You should find the "Blockquote" then replace it by the code above!

    2. To @Imran Memon
      Article Is UpDated Now, Have A Look...

      To @Son Nguyen
      There Is No "BlockQuote" Text In The Template Officially, Have A Look On The Article Again.


Speak Your Mind:

Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.