Tuesday's Tip #4

How to Customize Blockquotes in Blogger (pt 1)

I used to be so envious of the cool looking blockquotes on other blogs, so I decided to poke around to see if I could figure out how to add a little pizzazz to my blockquotes.

Most of the tutorials I found were either very technical or were geared to making the changes for all blockquotes. I wanted something that was easy to do in an individual post and that could change from post to post.

Since I was so impressed with myself for figuring out how to format these, I thought it would be fun to share my discoveries with you. Plus, it will be easier for me to reference in the future.

In this post, let's go over how to add borders and background color to your blockquotes. I'll share the coding for you to simply enter right into your post. Be sure you're on the HTML tab and not Compose tab. Then I'll go over how to customize the coding.

Adding a border

The coding:
<blockquote style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-radius: 15px; border-right: 1px solid #000000; border-top: 1px solid #000000; padding: 10px;">
Enter your blockquote text here.</blockquote>

This is what your blockquote will look like with a full border around it. You can customize the color and thickness of the border as well as the roundness of the corners. It's also easy to to remove borders, if you'd prefer only a left border or only top and/or bottom borders.

Customizing:
Change the color of the border by changing the 6-character color code. If you're not sure what the 6-character code is for your favorite color, here is a great resource for HTML Color Codes.

Ex. <blockquote style="border-bottom: 1px solid #EB1010;

Different colored border

Change the thickness of the border by changing the number of pixels.

Ex. <blockquote style="border-bottom: 5px solid #000000;

Thicker border

Change the solid border to a dashed by changing SOLID to DASHED.

Ex. <blockquote style="border-bottom: 1px dashed #000000;

Dashed border

NOTE: When making any of the above changes, be sure and make them to all sides of the border.

Additional customizations:
Change the roundness of the corners by changing the border-radius. Or make the corners pointed by deleting this attribute.
If you don't want a full box around your blockquote, simply delete out the borders you don't want.

Adding a background color

The coding:

<blockquote style="background-color: #f3cdb2; border-radius: 15px; padding: 10px;">Enter your blockquote text here.</blockquote>

This is what your blockquote will look like with a fancy new background color. Pretty neat, huh? You can customize the background color, the roundness of the corners, and the closeness of the border to the text.

Customizing:
background-color. Pretty obvious what this is. It's the color that will be behind your text. :) Enter the color code of your choice.

border-radius. This is what rounds the corners of the background. You can delete this attribute, if you want sharp corners or just adjust the pixels to make the corners more or less round.

padding. This determines how close your text is to the outside of the border.

Now, it's YOUR turn. Try it out the next time you want to use a blockquote in your post. Let me know you tried with a comment or a mention on Twitter or G+.

Tune in next week to learn how to add an image to your blockquote. It's a bit more complicated, so I'm giving it its own post.