I had just created my own Quote symbol as a background to the Blockquote tag. So today, I'll be showing you how to make your own Quote symbol background! :D
The code I'm using is originally from
TechnoJuice, so be sure to head there to know how to apply the code.
Okay.. let's start with the tutorial!
Step 1BTW I'm using Macromedia Fireworks. First, open a new document and set the width, the height and the canvas color. I'm using W = 80, H = 64, Canvas Color = Transparent.
Step 2Select the Text Tool from the toolbar and select Wingdings as your font. You can use any other font, but I think that Wingdings Quote symbol looks the best.
Step 3Now u need to find the Quote symbol in Wingdings. To find it, you need the Character Map (Start > Accessories > System Tools > Character Map). Copy the Quote symbol and paste it in your document. Resize the font (I use font size 150). Change the font colour to suit your blog. In my case I chose light green. Make it transparent by changing its opacity (50-80% opacity). Note that the Quote symbol will be place behind some text, so you need to make sure the colour you're using is lighter than the text colour.

^
copy-paste the Quote symbol from the Character Map
Step 4Align your Quote symbol to make it center. In Fireworks, you can right click and select Convert to Paths. This will eliminate the font spacing and change it into an Object. Duplicate your Quote symbol before converting it to paths (in case u screw up!). Now you can align-center by creating a rectangle (same size as the document resolution 80x64). Then, Ctrl+A (select all) to select both and Align it to Center Vertical and Center Horizontal. When you have successfully centered the Quote Symbol, delete the rectangle.
Step 5Save it as a .gif or .png.
Step 6Upload it at
Imageshack or any other image hosting site.
Step 7Place the code in your Blogger Template (Template > Edit HTML).
The code I'm using:-
.post blockquote {
margin:1em 0px;
font-style: normal;
padding-left: 30px;
padding-top: 15px;
background-repeat: no-repeat;
background-position: left top;
background-image:url('quote.gif');
}Step 8Now you can test how it looks like on your blog. You can do that by simply selecting the text you want to format as a quote and then click on the Blockquote button on the toolbar on the Blogger editor.
Here is the demo:
Here is how the blockquote looks after the changes have been made.
The font style can be change to best suite your blog.
The text is padded to give prominence to the quote.
The quote looks subtle in light green.
Labels: Tutorials