Create quote/pullquote in your blog !

Now here is quick way to create blockquote or Pullquote in blog. A blockquote is used when you are quoting someone else or when you want to display a code or when you are showing an example !





The basic plan is to create a Quote symbol as a image and set that as a background to the Blockquote tag. To do this we will be adding the CSS attributes in the HTML of the template. You can even modify this code and use it on platforms other than blogger.

1) Go to the Edit Html section in your Blogger Template (not classic) Template > Edit HTML

2) Now in the Html code go to the blockquote attribute section (Just seach for blockquote by Find tool Ctrl + F)

3) This is the section which would determine how your blockquote tag appears. The settings i have choose are

• Font to be italic
• The text has 30px padding on the left and 15px padding on the top
  
• The block has a quote image on the background

The code I replace is:-

.post blockquote {
margin:1em 0px;
font-style: italic;
padding-left: 30px;
padding-top: 15px;
background-repeat: no-repeat;
background-position: left top;
background-image:url('http://i197.photobucket.com/albums/aa309/technojuiceblog/quote.gif');
}

How to customize ?
You can customize the above code to best suite you blog. You can input your quote image by replace the image path in the background-image:url('yourimagepath.jpg')

You can even add border to your blockquote by the code
border: 1px solid #111111;

For more customization such as color of the text, font you can add style attribute. Check out W3school for more info on CSS.


How to use it ?

To use it simple select the text you want to format as a quote and then click on the Blockquote button on the toolbar on the Blogger editor.

By changing the style sheet all the blockquote you have entered till now on your previous posts also gets revamped automatically. No sweat !

Here is the demo:

Here is how the quote block
looks after the changes have been made
The font is italic
The text is padded to give prominence to the quote
The quote looks subtle in light gray

Check out more Blogspot mods and hacks >