Customize Blockquote In Your BlogSpot Blogs

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
Customize Blockquote In Your BlogSpot Blogs
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:
Customize Blockquote In Your BlogSpot Blogs
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(https://i41.tinypic.com/3162czl.jpg);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote span {
display: block;
background-image: url(https://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

Leave a Reply

20 Comments on "Customize Blockquote In Your BlogSpot Blogs"

Notify of
avatar
Sort by:   newest | oldest | most voted
Blogger Make Money
Guest

Thanks! I really need it for my blogs!

View Comment
Ms Hetal Patil
Guest

Sai Ramji Divya,

Please guide me to change font colour in blockquote.

Thanks in advance 🙂

View Comment
Divya Sai
Guest

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>

View Comment
Ms Hetal Patil
Guest

Sai Ram Divya,

Thanks a lot

View Comment
Manish
Guest
Sinar Hairan Edisi Timur
Guest

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

View Comment
Ernesto M.
Guest

Thank u!

View Comment
Anup@ Hack Tutors
Guest

i am trying to customize blockquotes with best colors:)

View Comment
Sai @ Blogger Help
Guest

Good luck for that 😉

View Comment
Anup @ Hack Tutors
Guest

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

View Comment
Nimo
Guest

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!

View Comment
Divya Sai
Guest

Hey there,

Which is the blog, you are working on?

View Comment
Chaudie
Guest

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?

View Comment
Divya Sai
Guest

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>

View Comment
Tips Trik Blogging
Guest

I will immediately to try it

View Comment
Salaria
Guest

nice post . thanx

View Comment
eagles513
Guest

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

View Comment
Manz Dasilva
Guest

thanks gan

View Comment
Lineon
Guest

Thanks a lot for those great blockquotes

View Comment
mohdakhed
Guest

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.

View Comment
wpDiscuz