HTML/Blogger Tutorial

First of all, you’ll need to locate or create your blockquote property in your blogger template.

Click “Edit HTML” on your blogger dashboard.

Before you make any adjustments, you need to back-up your current template. You can do this by downloading a copy to your computer hard-drive.

Next, we have to find the blockquote tag in the template body. The easiest way to do this is use your Edit/Find on Page property. This can be found in your browser’s menubar at the top. (File, Edit, View, etc.) Once you’ve brought up the window type “blockquote” and click “find next.” Make sure your cursor is inside the template window.

On my template, the only characteristic of a blockquote is a 20px margin. We have to make some new characteristics. To make a box, we are going to create “background”, “border” and “padding.” I threw in a “font-style” tag to demonstrate what you can do with these. To create a css property, you place the characteristic in between the two { } tags. .post blockquote shows what we are changing, then we open the tag with a {. Each property is followed by a colon, the value followed by a semi-colon.

Adding some new properties to the “.post blockquote” tag.

Now, we have to add values to these properties. For this quote box, I decided to make the border 3px wide, solid, and a dark gray (#666666). These values are separated by a simple space. You can make your quote box have a “dotted”, “dashed” or “double” border as well. Simply replace the word “solid” with one of these words. To adjust the thickness of the border, change the value of 3 to anything you wish. “1px” is the thinnest, you can have borders as thick as you’d like.

I made the background of this quotebox a lighter gray (#cccccc). (For more color codes, go here.) You can also make an image the background of your quote box. To do this, you’ll need to upload the image to an image hosting website, (http://www.tinypic.com/, http://www.photobucket.com/ for example) and instead of putting a color code, you add the direct link to your image, like so: url(http://www.linktoyourimage.com);

Padding is how much space is between the text in the quote box and the edge (border). I added 5px of padding.

The font-style tag tells the server to make all text used in a quote in italics. You can omit this if you would like.

Remember to end all of your values with a semi-colon.

All the properties and values in place.

Save your template and make a post using the blockquote property.

Here’s the quote box we’ve created! Quite lovely, eh?
I hope this tutorial was helpful to you! If you have any questions, feel free to leave a comment or email me. Have fun making some beautiful custom quote boxes!