Blogger Tutorial - Apply a stylish background to your blockquotes

If you're a book blogger, like me, you use blockquotes to separate and highlight a book's synopsis from the rest of your post. No matter what type of blogger you are, I'm pretty sure you'll have a use for blockquotes some time or another.

And after this simple tutorial, you'll want to use it for every post!
Blockquotes can be applied to a block of text using the quotes-shaped icon in your Blogger post toolbar. It looks like this:




By default, the text will simply be fit into an invisible box that doesn't stand out other than the fact that its indented on all sides. But I've got a way for you to jazz up that plain ole box. If you want to add a solid background with a color of your choice, see this post.

But you'll have to read on if you want to add a background that looks like this:



Or, this:



You'll have to include a code that will define the design for the blockquote. Here's how:
1. Go to your Template Designer
2. Click on Advanced
3. Scroll all the way down to Add CSS
4. Add this code:

blockquote {
   width: 490px;
   color: #fff;
   background: url(http://bit.ly/wsP32l) repeat;
   padding: 20px 20px 20px 20px;
}

-The text in red sets the width of your blockquote - if you have a skinnier blog, shorten the width, if your blog is wider, increase the width. Play around with it if you have to.
-The text in green sets the color of your blockquote text - if your background is dark, set it to white (#FFF), if your background is light, set it to black (#000).
-The text in blue is what will give you a background of your choice. Replace the URL (in purple) with the URL to the image you want to use as a background.

Where am I going to find an image to use, you ask? Luckily for you, I've got some freebies for you.
Just copy the code and apply it using the instructions I've provided above.

blockquote { width: 490px; color: #000; background: url(http://3.bp.blogspot.com/-HlNCRKb-d7g/T045kw6CiKI/AAAAAAAAClM/xFDhco-2dgk/s1600/blockquote-gold.jpg) repeat; padding: 20px 20px 20px 20px; }	blockquote { width: 490px; color: #000; background: url(http://4.bp.blogspot.com/-neNHiBaU_aI/T045lj78gDI/AAAAAAAAClc/bLcmROwfe8c/s1600/blockquote-purple.jpg) repeat; padding: 20px 20px 20px 20px; }	blockquote { width: 490px; color: #000; background: url(http://2.bp.blogspot.com/-LlnfVEdn-Zk/T045mLGytNI/AAAAAAAAClk/x2vw30Pc5Cs/s1600/blue-stripes.jpg) repeat; padding: 20px 20px 20px 20px; }	blockquote { width: 490px; color: #000; background: url(http://3.bp.blogspot.com/-xqDZ63YeOIU/T045mUVz2yI/AAAAAAAACls/g0LhhwSmcek/s1600/pink-dots.jpg) repeat; padding: 20px 20px 20px 20px; }

So what do you think? Leave me a link in the comments if you tried the tutorial and/or used one of the freebies!