"Dressing Up Your Blog"

A whole bunch of people have asked me recently how I “dressed up” my blog and personalized it, so I wanted to give a little bit of instruction on how I did it. Now, I don’t know code and do not profess to be even close to an expert, so hopefully this will make sense. I’ll just tell you what I did. Warning, this is a LONG post and it might be boring. And kinda nerdy.

Since I use Blogger, I will share what worked for me. I have no idea if any of this works for other blog providers!!

First off, I knew that I wanted a 3 column blog, so I did a search for a 3 column blogger template and downloaded one for free. I don’t have the website that I got mine from, it got lost in the shuffle somehow. You can customize one of the templates that are on blogger, however, but the instructions may not be exactly the same.

Once you find the template you like (this is if you are starting from the beginning like I did) you go to the “Template” tab in the blogger dashboard, then choose “Edit HTML”. To load your new template, if you choose to do so, choose the “Upload” button and then it will let you browse your computer until you find it. Voila. If you are just working from the template you already have, you can skip this step.

ADDING CUSTOMIZED BACKGROUNDS

In order to add, say, a digital scrapbooking paper to your blog background, you will first need to set up an account (for free) with a site such as http://www.photobucket.com/ where your paper will be stored and will have its own URL. You upload whatever papers or photos or whatever you want onto Photobucket and then you’ll plug in the URL at specific places in the template, which we’ll talk about in a minute. So I uploaded a paper and this is part of the URL for it, for example: http://i56.photobucket.com/albums/SP_OliviaCollection_Paper_VanillaLi.jpg

Now onto the blogger template tweaking.

If you are keeping your original template, make sure to save a copy of it before you make any changes so that you can revert back to it in case anything goes wrong or you hate your new design. Also, be sure to check the box that says “Expand Widget Templates.”

If you scroll down the template code you will see a lot of mumbojumbo with pockets of words that you’ll recognize. (At least if you’re me!) For my particular template, I scrolled down until I found this:
(under all of the “variables” list)
*/body
{ background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small “Trebuchet MS”, Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center; }

The “BODY” is the main background of the blog. To add my paper I pasted this into the template HTML, the red being the “new” info plugged in. Notice the “http” address is my URL from Photobucket.

body
{ background:$bgcolor;
background-image:url(http://i56.photobucket.com/albums/SP_OliviaCollection_Paper_OliveSwir.jpg);
background-repeat:repeat-x repeat-y;
background-position:120% 10%;
background-attachment: scroll;
margin:0;
color:$textcolor;
font: x-small “Trebuchet MS”, Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center; }

This should add the paper to your body. You can hit the “preview” button to see what it looks like before saving.

Then you move on to the “main wrapper” which for me is the middle column where my posts are. I have a different paper here. I scrolled down further to find this:

/* Outer-Wrapper———————————————–
*/#outer-wrapper
{ width: 960px;
margin: 0 auto;
padding: 10px 0px;
text-align: left;
font: $bodyfont;

}#main-wrapper
{ width: 458px;
margin-left: 10px; }

Then I added my new info, the same as with the “body”, except I change the URL to be the new paper’s URL from Photobucket.

#main-wrapper
{ width: 458px;
margin-left: 10px;
background-image:url( http://i56.photobucket.com/albums/SP_OliviaCollection_Paper_VanillaLi.jpg);
background-repeat:repeat-x repeat-y;
background-attachment: scroll;
}

Do the same for your sidebar(s).
#leftsidebar-wrapper, #rightsidebar-wrapper
{ width: 208px;
background-image:url(http://i56.photobucket.com/albums/SP_OliviaCollection_Paper_Buttercup.jpg);
background-repeat:repeat-x repeat-y;
background-attachment: scroll;
}

So you see that you’re basically adding the same code in different parts of the template, just changing the URL for the different papers you want. Kind of like cutting and pasting. When you’re happy with what you’ve done, just hit “Save Template.”

ADDING A NEW HEADER

You can also add your own personalized header if you want. I’m not really going to go into HOW to design your header, just how to add it to your blog. If you’re into digital scrapbooking, you just make a scrapbook layout, basically. Just make sure you make the header the right size–my template width is 960 pixels, so I made sure my header wasn’t bigger than 960 pixels.

I made my header in Photoshop Elements 4.0, 960 pixels by 300 pixels. I made the resolution 72, which is standard for web viewing.

This is where I learned how to add my own header:
http://shiveredsky.blogspot.com/2006/09/how-to-make-custom-header-in-blogger.html
They have screenshots and everything. But here’s an added step–BEFORE you go to customize your layout or template in blogger, you need to tweak your HTML a tiny bit:

Go to ‘Edit HTML’ and look for this line of text: (between brackets)
b:widget id=’Header1′ locked=’true’ title=’Your Title (Header)’ type=’Header’/and then change ‘true’ for ‘false’. Save the template and go to ‘Page Elements’, now the button ‘Remove Page Element’ in Header should appear.

Follow the directions and you should have a new pretty header!! I did have to go into “Edit HTML” again and get rid of some of the margin lines after I added my header, and it was kind of a trial and error type of thing.

****If you need more help let me know and I will try to help you! It’s a little bit tedious and a bit technical but once you figure it out, it allows you to really customize your blog.

Here are a few resources that have good tips on customizing blogs, specifically Blogger:
http://betabloggerfordummies.blogspot.com/
http://testing-blogger-beta.blogspot.com/
Here is one for adding a second sidebar if you only have one: http://beautifulbeta.blogspot.com/2006/10/adding-second-sidebar-to-your-blog-part.html
http://beautifulbeta.blogspot.com/
Here is a guide for HTML tags and codes, just FYI: http://www.web-source.net/html_codes_chart.htm
Oh, here’s one for 3 column templates, even working with templates other than minima, which is the style mine is in:
http://hackosphere.blogspot.com/3006/09/3-column-templates-for-blogger-beta_01.html