Customize Blockquote In Your BlogSpot Blogs

First of all, if you don't know what a <blockquote> tag is, then edit any of your previous posts and add this code to it (anywhere in the post):
<blockquote>I am learning about blockquotes</blockquote>
Save the post, and check it out.
You will see that the text "I am learning about blockquotes" is separated from your regular content. At BloggerStop, you would have seen these blockquotes a number of times as gray text boxes, just like the one above.

These boxes are mainly used to quote some text/part of content from other webpage. You can easily modify your blog's template, to change their look.

Log in to Blogger -> Layout -> Edit HTML and find (CTRL+F) something like this:
blockquote {
...
...
... }
or this
.post-body blockquote {
margin: 1em 3em;
padding: .5em;
background-color: #f6ebc1;
}

Now you just have to change the code inside those curly brackets {....}

So to display your blockquote like this:

Style 1

use this code:
blockquote {
font: 14px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

Style 2
And for blockquote like this:

CODE:
blockquote {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(http://i41.tinypic.com/3162czl.jpg);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;

}
blockquote span {
display: block;
background-image: url(http://i41.tinypic.com/3162czl.jpg);
background-repeat: no-repeat;
background-position: bottom right;

}
For this blockquote, you need to modify the way you use blockquote tags, like this
<blockquote><span>YOUR TEXT HERE</span></blockquote>

You can yourself play more with these blockuotes, by adjusting the various elements in it, like border width, style (dotted etc.), background color etc.

NOTE: Blockquotes are defined for your entire blog, and therefore in all your blog posts they will appear exactly the same (although you can use different classes for different styles, but this is not recommended as it will affect your blog's loading time).
But if you want to show different colored text-boxes in different posts, then you may read this post, on how to use colored text boxes in blogger blogs.

This post is suggested by Sangwoo from All About MyLot

Credits: Css-Tricks
Image credits: WebX0

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

20 comments

Write comments
May 31, 2009 11:08 PM delete

Thanks! I really need it for my blogs!

Reply
avatar
July 29, 2009 9:48 AM delete

Sai Ramji Divya,

Please guide me to change font colour in blockquote.

Thanks in advance :)

Reply
avatar
July 29, 2009 10:29 AM delete

Sai Ram Hetal,

Although you can do it in the CSS, but I will suggest you to this while writing the post itself, using span tags.

Through CSS, you have to do this like this (simply add a "color" variable to the above code):

For Style 1

blockquote {
color: red;
font: 14px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

But I suggest you to change color only while writing posts, as it will give you more options. You have to then use this code while writing your post:

<blockquote>
<span style="color: red;">
YOUR TEXT HERE
</span>
</blockquote>

Reply
avatar
August 30, 2009 6:36 PM delete

Dear Sai, you are "The Real Trouble Shooter"..

To begin with I don't even know what the H blockquote is until you ask to try in the post.

Heck all I can is "now I know" hell, it keeps my blog looks even BETTER. Plus I've got a shock with the new improved done by blogger in the post editing panel. Look very exclusive and more organised.

Syukriah, Gracias, YQ, and Terima Kasih in my own native lingo. Brianpedro

Reply
avatar
January 01, 2010 11:10 PM delete

i am trying to customize blockquotes with best colors:)

Reply
avatar
February 19, 2010 11:55 PM delete

Now I known that block quotes play important role to make blog attractive...;)

Reply
avatar
March 05, 2010 7:10 PM delete

Hi,
i wonder if you can help me. I'm using the minima stretch template, so no matter hich code i use for block quotes in my style sheet, the {quote marks/line) come out double. I have tried various codes from various tutorials and all have the same effect.
I appreciate your help,
thanks!

Reply
avatar
March 07, 2010 4:58 PM delete

Hey there,

Which is the blog, you are working on?

Reply
avatar
June 19, 2010 11:36 PM delete

My Personal Blog's layout doesn't seem to have the blockquote area enabled. It's http://chaudalyn.blogspot.com/, is there anything I can do?

Reply
avatar
June 20, 2010 5:06 AM delete

Well you can add this tag yourself to your blog, if it's not there already.
Just find the closing head tag;

</head>

And immediately ABOVE it, paste this code:


<style type='text/css'>
blockquote {
...
...
... }
</style>


Of course instead of those dots, you have to use any of those codes listed above. Now, you can try blockquote in your blog:

<blockquote>I am learning about blockquotes</blockquote>

Reply
avatar
November 09, 2011 2:44 AM delete

I was looking at you wbsite,Michael Vick Jersey which is wonderful, and noticed that you have a postcard published by my cousin, Mathew Gardner. I am currently researching our family history and wondered if you had Authentic NFL Jerseys Cheap the original postcard and any other information whih has not been published on your website.

I have some information which I would be happy to furnish if you wish to get in touch.Cheap Steelers JerseysLooking forward to hearing from you.
Maurkice Pouncey Jersey
Mel Blount Jersey
Merril Hodge Jersey
Mewelde Moore Jersey
Mike Wallace Jersey

Mike Webster Jersey
Pink Lady Jersey
President Obama Jersey
Rashard Mendenhall Jersey
Rocky Bleier Jersey

Reply
avatar
March 11, 2012 3:02 PM delete

Thanks a lot for those great blockquotes

Reply
avatar
June 22, 2012 1:50 AM delete

Thank you for the article. It is really usefull. Such a hard subject to
talk about but so many women have this problem. I definitely wil do the excersise.

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon