How To Customize Blockquote In Blogger

ADVERTISEMENTS

Ever wanted to change the look of blockquote ?? Do not know what is it ? Ok,let me tell you !!

Whenever you write a new post,there is an option to put your content in quotes,this is known as blockquote.See this screenshot :

The circled in red is known as blockquote.

Sometimes when you install a new template you are not happy with some of its features,and it can be blockquote also.So here I am going to tell you that how you can customize it in your own way.

So lets start :

Open Blogger.com and goto Layout>>Edit HTML.

First backup your template by downloading it.After that click on Expand Widget Templates and search for

.post blockquote {

You will get a code like this :

.post blockquote {
margin:1em 20px;
border:1px dashed #40a9c9;
background: #e7f9ff ;
padding: 8px 8px 8px 65px;
}
.post blockquote p {
margin:.75em 0;
}

To customize it you will have to change the following 3 things :

1) Margin : Tells how much size you want.

2) Border : Tells what kind of borders you want for blockquote i.e you want dotted borders,simple borders etc.

3) Background : Tells the background image you have set for blockquote.It can be 2 quotes like this .

You can customize all these very easily,so lets take it one by one.

Margin : To increase the size of blockquote you can increase the pixels i.e from 20px you can make it 25px or 30px

Borders : You can customize borders.You can make it dotted like I have done.To make it dotted just replace the border code with this one

border:1px dashed #40a9c9;

You can change the background colour to any colour you want.Just have a look at this HTML colour chart.

You can also make borders thick by increasing pixels.

Background : To change the background,you have to change the code to

background: #FFF098 url(your-image-url) no-repeat;

Background : You can use other images also.You can find alot of image in Google.Just search for blackquote in images.google.com

Facing any problem in customizing blockquote,please comment I will reply as soon as possible.

If you like this post, you will love these :

1. How To Customize Google Custom Search Engine Watermark Image And Search Button
2. How To Activate Emphasize < em > Tag In Your Blog : Blogger Tutorial
3. How To Add Different Meta Tags For Every Individual/Single Post In Blogger : Blogger Hack : Increase Traffic Part6
4. How To Show Next and Previous Post Below Comment Box
5. Some Tips On Selecting A Blogger Template : Must Read
6. How To Add Gravatar Beside Post Title In Blogger : Tutorial
7. How To Show Only Post Titles In Blog Archives : Blogger Hack