Customizing Your Blog - Part 2 HTML Code

The long awaited second installment of how to customize your blog with ease is finally here. I could see you turning blue while you held your breath. :D Hopefully you've gathered your patterns, colors, etc. as explained in Customizing Your Blog - Part 1.

The next lesson is learning the basics of HTML code and how it works. Once you know the language you can make some pretty good guesses on how to change things around with your blog template.

If you want to skip this part and just get to the instructions of changing the background of your blog scroll down until you see Changing Your Blog Background in bold.

HTML Basics
First you need to know that your computer doesn't see things the way we do. When we see:

italics,
bold,
or strike through

our computer sees:

<i>italics</i>
<b>bold</b>
or <s>strike through</s>

Interesting, eh? We can learn most of what we need to just from these examples. Unlike our children, a computer will do exactly what you tell it to. It will start and stop just when you say. Whatever code is enclosed in the < > signs tells the computer when to start (see the green letters). Whatever is enclosed in the </> signs (the red letters) tell it when to stop. Did you notice the one difference in those? You need to use the forward slash key (/) so the computer knows you are stopping. The reason is you can use a lot of codes to make a word italic, bold and strike through. We see:

STRIKE THROUGH

The computer sees:


<i><b><s>STRIKE THROUGH</s></b></i>

Notice how it works. First we tell it to start being italic, then bold, then strike through. To tell it to stop you need to do it in reverse order. First we stop it being strike through, then bold, then italic. A "the first shall be last and the last shall be first" sort of thing.

That's the bare bone basics. Now you can kind of understand what you are reading when you look at your blog template in html form. If anything is enclosed in the < > signs your computer is being told to start something and if you scroll way down to the bottom I'm sure you'll eventually find the </> signs telling your computer to stop.

CHANGING YOUR BLOG BACKGROUND
Before going any further, as a disclaimer and to cover myself (because I don't want you messing up your blog and then blaming me for it) I highly recommend starting another private blog that you can practice on it. Believe me it is very worth it and oh, so helpful! I must also mention these instructions are for Blogger. Wordpress won't let you play around with your background unless you pay a fee, but why pay when Blogger lets you do it for free!

Now for changing the background of your blog. Open a new window, (you know so you can read and follow these instructions while you work on your blog template) and log in to your blog, go to "Layout", and click on "Edit HTML". Next make sure you click on the "Expand Widget Templates" option right above the html window.

Now scroll down the html template just a little way until you see
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

This tells your computer how you want the body of your blog to look. To change the background of your blog you need to change just a couple of things. Instead of

background:$bgcolor;

We want it to say

background-image: url(insert the web address for your image here);

The easiest way is just to copy the above code (highlight and hit Ctrl c), highlight the background:$bgcolor; in your template and then paste (Ctrl v). You do not have to hit delete after highlighting the background:$bgcolor;. Pasting replaces the code.

Now you need to obtain the web address for the background image you want to use and insert the address in the parentheses replacing the red text I have there. This is why I stressed having a Flickr account. Flickr provides the addresses. Open another new window and log in to your Flickr account. Click on the image you want to use for your background. Right above your image you'll see a button that says "All Sizes". Click on that. You'll see all the available sizes at the top. I find that the small and medium sizes work the best. Click on whatever size you want. Then scroll down below the photo until you see 2.Grab the photo's URL: The code you see right below that is the web address for your image. Copy it, go back to your blog template, and insert it between the parentheses. To see what you've done hit the PREVIEW button just below the html code window. A new window will pop up showing you what your blog will look like. If that's what you want then hit the save template. If you want to change the background, then insert a different url (web address) between the parentheses.

The steps are similar for changing the colors of the columns and header of your blog so they don't clash with the background.

For the header find the following code in your html template (about 1/8 of the way down):

#header-wrapper {

Right below that paste the following:

background-color: #color code;

Insert any one of the html color codes to replace the red color code text I have there.

Do the same thing for the main column (where your posts are). Scroll down just a little until you see:

#main-wrapper {

Paste the background-color:#color code; right below it.
And you can do the same for your sidebar pasting the code below

#sidebar-wrapper {

Hit preview to see if your blog is the way you want it. If it's not just insert new color codes until you get what you want. Make sure you save the template when you are done! After fiddling around you'll find it easier and easier to change the blog backgrounds because now you know what to look for in your html template.

If you want the background of your header to be a pattern or image (like I have on mine) you need to use the same background image code you did for your blog background instead of the background color code, inserting the correct url for the image you want.

If you run into problems, if my instructions aren't clear, or you have any questions, leave them in the comments and I'll try to answer them.

Next post in this series will be on changing the fonts in your sidebar and post titles.

Here's the other posts in this series:
Customizing your Blog - Part 1 Gathering Background Patterns and Colors
Customizing Your Blog - Part 3 Fonts