May 31, 2009

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

20 comments:

Blogger Make Money said...

Thanks! I really need it for my blogs!

Ms Hetal Patil said...

Sai Ramji Divya,

Please guide me to change font colour in blockquote.

Thanks in advance :)

Divya Sai said...

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>

Ms Hetal Patil said...

Sai Ram Divya,

Thanks a lot

Manish said...

thanks

Sinar Hairan Edisi Timur said...

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

Ernesto M. said...

Thank u!

Anup@ Hack Tutors said...

i am trying to customize blockquotes with best colors:)

Sai @ Blogger Help said...

Good luck for that ;)

Anup @ Hack Tutors said...

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

Nimo said...

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!

Divya Sai said...

Hey there,

Which is the blog, you are working on?

Chaudie said...

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?

Divya Sai said...

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>

Tips Trik Blogging said...

I will immediately to try it

Salaria said...

nice post . thanx

eagles513 said...

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

Manz Dasilva said...

thanks gan

Lineon said...

Thanks a lot for those great blockquotes

mohdakhed said...

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.

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy