Customize "block quotes" in your blog

Most of you are probably familiar what "block quotes" are and how to use them, however, not all know how to customize them.

Block quote is a quotation in a written document, set off from the main text as a distinct paragraph or block.The blockquote element is used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form. - wikipedia

Using block quotes is easy. You can use them when you want to put some texts in your post in quotes. Every template have different block quotes styles and when you install a new template, sometimes, you are not satisfied with its look when viewed.
When using block quote in your new post, highlight the texts you want to post in quotes then click the "blockquote" button.

or enclose your texts in
<blockquote>YOUR TEXT HERE </blockquote>

How to customize your block quote? here are some tips:

1. Log in to your Blogger account, go to Layout-Edit HTML.
2. Always remember to backup your template before doing any changes. To backup: click Download Full Tempate and Save.

3. Look for this code in your layout:

blockquote {
margin:1em 20px;
}

- or this code -

.post blockquote {

- and you'll get a code like this: -

.post blockquote {
margin:.8em ;
padding: 5px 5px 5px 37px;
border: 0px solid #99CC66 ;
background: #ff00ff;
font: 110% Georgia;
font-weight: normal;
font-style: italic;
color: #336600;
}

The ".post" added before the "blockquote" will define how the block quote will look in your post, however, if you plan on using styled block quotations in other parts of your layout such as header/footer/sidebars, it may be a good idea to delete the ".post" so that all block quotes will appear in the same style in your layout.

4.Take note of the texts in bold [from the code above], those are the variables we can change in customizing the block quote.

• Margin: you can adjust it from .8em to 1em or keep it as it is

• Padding: is the distance between the border and the texts, you can adjust it depending how far you want the distance to be.

• Border: you can experiment with the settings such as style [solid, dashed, double, dotted]; thickness [1px, 2px or thicker]; color [any color you can choose]; border position [right, left, top, bottom, all sides]

• Background: if you want a color as the background, just put the html color code of your choice; you can as well put an image as the background like what I did with mine; instead of putting the html color code you put the url of the photo.

example:

color background:

background: #ff00ff;

image background:

background: url(http://i185.photobucket.com/albums/x83/txel/pics/q1.png)
top left no-repeat;

Note: if you want an image with transparent background [like mine] it should be in .PNG format.

• Font: you can change the font settings - font size and font family; font-weight [bold, normal]; font-style [italic, normal]; font color [put the html color code]

5. Before saving your template preview it first, when satisfied, click SAVE.

I hope that helps :] Enjoy blogging!