01 December 2011

Blog Coding 101: Blockquotes

Now here's something fun.  "Blockquotes" is a short code that automatically formats what you put in quotations by using that quote (") button in the editing bar when you're creating a post.  You can get really creative with blockquotes, even getting them to match your blog theme.


Blockquote codes can be written differently, with information added and deleted without effecting the overall look.  Here's the code I generally use:
blockquote{
font-family: times new roman; font-weight: none;
font-size: 11pt;    
font-style: italic;
color: #666;
margin: 1em 3em;
padding: .5em 1em;
border-right: 3px dashed #91c4bf;
}
Now here's what each part means and how you can change it to fit your blog.

Font-Family: This is the font that your quotations will change to.  It can be different from your blog page's set font.  Say you set your page font to be "Georgia".  Well, you can change your quotations to have a "Courier New" font instead.  There are multiple fonts to choose from that will work: georgia, palatino linotype, book antiqua, times new roman, arial, helvetica, comic sans ms, impact, tahoma, trebuchet ms, verdana, and lucida console.

Font-weight: This is to say if you want it bold or not.  So if you want your text bold, change "none" to "bold".

Font-size:  You can change the text size to match your layout or not.  Mess around with the numbers to see what works for you.

Font-style: Want it all italicized?  You can do that here.

Color:  Simple, right?  Very.  You can use any six digit color code that fits your blog.  You can even grab the color codes that you use in Template Designer so they'll look the same.  (If all six digits are the same, for example, #ffffff, you can just use the first three.  A simple and effective shortcut.)

Margin:  This is how far away the entire blockquote is away from everything else.  Mess around with the numbers to see what fits for you.

Padding:  This tells how far away the text is from any decoration you have outlining the blockquote.  Again, mess around, see what works.

Border:  This is a very flexible aspect.  You can have a fully bordered blockquote, or just have a line on one side--which is my style.  Let's pull this apart.

border-right: this tells it I want a line on the right side of my quote
3px:  this tells it how thick I want it
dashed: tells it I want a dashed line.  You can change this to "solid" "double" "dashed" or "dotted".
#: this is the color I want it

When you want to add more aspects...
Whenever you add something, create a new line for it, make sure you add a single dash (-) between words instead of a space and always have a semi-colon at the end of the line (;).  You'll know right away if you've done it right by watching the preview in your Template Designer window.

You can add:
Background: this will be a solid background behind the text.  You would code it like so:

background: #000;

More Borders: if you want borders around the entire thing, your code would look like this:

border: 3px solid #91c4bf;


Now you've got your code...
Where to put it?  In Blogger, navigate to your blog's "Design" page and enter the Blogger Template Designer. On the left sidebar, click "Advanced" and scroll to "Add CSS" and paste your code in there.  If there's a post with blockquotes visible on the main page of your blog, you can edit your blockquote with a live preview.