Blogger Tutorial: Adding a Background and a Header

Today I am going to tell you the EASY way to add a background to your Blogger blog. You don't even have to go into the "Edit HTML" to do it!! :) Here we go:

*Note* The BlogWare I make works best with the Minima 2 Column Template.

Adding a Background

1. Upload your background image to Photobucket or similar image sharing website. Be sure when you upload it, you upload at 1 Megabyte so it will fit your screen properly.
2. In another window, log onto your Blogger Account.
3. Click on the "Layout" tab.
4. Click on "Add a Gadget".
5. When the window pops up, click on "HTML/JavaScript".
6. In the Content box paste in the following code:


<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7B background-image %3A%20url%28%22http%3A(YOU'RE BACKGROUND DIRECT LINK HERE) %22%29%3B%20background-position%3A%20center%3B%20background-repeat%3A%20no-repeat%3B%20 background-attachment %3A%20fixed%3B%20%7D%0A%3C/style%3E%0A%3Cdiv%20id%3D%22tag%22%20 style%3D%22position%3Aabsolute %3B%20left%3A0px%3B%20top%3A30px%3B%20z-index%3A50%3B%20 width%3A150px%3B%20height%3A45px%3B%22%3E%0A%3Ca%20href%3D%22 http%3A%22%20target%3D%22_blank%22%3E%0A%3Cimg%20src %3D%22http%3A%22%20border%3D%220%22/ %3E%0A%3C/a%3E%3C/div%3E%20"));</script>

7. Go to your Photobucket account and copy the direct link code from your background and paste it into the section that says, (YOU'RE BACKGROUND DIRECT LINK HERE). Then delete off the http: and the parentheses. It should just have the // and NO parentheses around the code!

8. Click SAVE.

8. View your blog! You should have a beautiful new background!

Adding a Header

This one is easy. First of all, to edit my headers, you will need a photo editing program like Photoshop or Gimp. Once you have it like you want it, save it onto your computer in the BlogWare folder, but with a different name, so you don't overwrite the original.A

After your Header is ready, this is what you do:

1. Log onto your Blogger Account.
2. Click on "Layout".
3. You should see a Header section. Click on "Edit".
4. Click on browse and go to your saved header.
5. Click on open.
6. Select your placement, either instead of title and description or behind title and description and then click save.
7. View your blog with your beautiful background and header!!

Hope this has helped! I hope to add some pics to help you also, but that might be next week. We will see.