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

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts