Formatting and presenting quotes in Blogger

The automated quote formatting button in Blogger has the potential to be really useful. To use the tool just select the text and click the blockquote button on the toolbar:

Here is a very quick guide to how I format any quotes I use on this blog.

The default quote formatting is simply a little padding so that the quote is indented a little. But this doesn’t look as nice as I’d like. Handily, Blogger gives you a way to edit the default blockquote formatting. The blockquote button is actually very simple and all it does is dynamically put a pre-defined set of HTML around your text. It does this by using the blockquote class tag around your quote. This tag then looks at your blog’s template CSS file and formats the quote according to what is in the template. This is dynamic so any changes you make to the blog template CSS file will be reflected in any quote formatting in your blog even if the quote was made on older blog posts.

Note that in some instances, depending on the template you start with, there is no pre-defined quote formatting instruction in the template CSS. In this instance Blogger simply adds some padding to the quote to make it stand out a little.

Let’s edit the CSS template to customise our quotes by going to your blog’s template and clicking ‘Edit HTML’. If your blog already has a custom style for quotes defined you can get to it by searching (Ctrl+f) for .post bockquote

Look for the braces { … } directly following this term. This is what we want to change to match what you want. If you search and can’t find this term then your blog does not have it defined yet. In this case search for ]]></b:skin> – mine was around line 560. Then add a new blank line above this and add the following so that we can do our customising…

.post blockquote {
}

]]></b:skin>

There are some links to blogs in the sources section below which have great examples of formatting. The formatting can actually take the form of any HTML formatting tags so I am not going to describe in detail what you can do. There are hundreds of tutorials on HTML if you search Google. Some common options allow padding, borders, font colour, background colour, text size, add pictures, …

I have decided on this as my blockquote format for now but may amend in future:

.post blockquote {
border: 1px dashed #000000;
background: #f5f5f5;
padding: 10px;
color: #000000
}

And here is a quote from CS Lewis in my newly formatted blockquote style:

I pray because I can’t help myself. I pray because I’m helpless. I pray because the need flows out of me all the time, waking and sleeping. It doesn’t change God, it changes me.

Note that you WILL need to repeat this again if you change your blog template in the future.

Edit: Also, now that my blog is on WordPress, the post here is not so valid for me.

Useful sources
http://www.mybloggertricks.com/2009/11/14-amazing-ways-to-customize-blockquote.html
http://bdlab.blogspot.co.uk/2010/12/22-amazing-examples-to-customize.html
http://www.maketecheasier.com/style-up-quotes-in-blogger/
http://snapcreativity.com/customize-block-quotes-blogger/

Leave a Reply

(email optional)


Warning: Undefined array key "rerror" in /home/public/blog/wp-content/plugins/wp-recaptcha/recaptcha.php on line 291