Centering the Header
Removing Navigation bar
Remove HTML title
Changing Background Color
Adding Background Image
Remove Border Lines

When you first create your blogger template you'll notice a couple things. First, the header may not be centered correctly, and there may be border lines surrounding your site. Also, you may have to change your background color. So there are a few tweaks you'll have to take care of before your blog goes live.
If you look below, I just added my Flash header (or JPEG image) and I notice a few things that have to be tweaked. First, I don't want the navigation bar at the top; second, I want to remove the border lines, third, I want to remove the title, and fourth, I need to change the background color which is white:

Changing the Background Color

First, let's change the background color. Since the background color of my Flash header is black, then I'll make the blog background the same color. Click on the Fonts and Colors link:


Next, click on Page Background Color:


Select the color you would like for your background color. On my blog, I chose black:

Next, click on SAVE CHANGES:

Removing the Border Lines

Now your blog's background color will be updated. Next, let's get rid of the border lines. Click on the Edit HTML link:

If you're working on a new blog (which I recommend so you can experiment all you want) then you don't have to worry about backing up your template. If you're working on an existing template you should back it up first. Click on Download Full Template:


Save your template to your hard drive. Next, click on Expand Widget Template:


Now, scroll down until you see this piece of code (Ctrl + F will bring up the search window. Copy and paste the code below into the search window):
#header-wrapper

You should now see the code that we'll have to tweak:


Change the border pixel to 0 in both sets of code:

Centering the Header

If you Preview your template the border lines should now be gone. Keep the HTML window open for now. Next, we're going to center the Flash header. The first thing we'll do is find the width of your header. The header I uploaded is 991 px wide. I'm going to change the #header-wrapper width to 991 (you'll enter whatever the width of your header is):


Scroll down until you see #outer-wrapper. Change the width to 991 (or whatever your header width is):

Save your Template:

Removing the Navbar

Your Flash header should now be centered. Now, let's remove thenavbar at the top. In the HTML window scroll down until you see ]]>:


Add this code right before ]]>:
#navbar { display: none; }

The new code should look like this:

Remove the Title

Preview your template to make sure the navbar is completely gone. On my blog everything looks good except I need to remove the title:


You can either make the title the same color as the background, which in this case is black, or you can upload an image to replace the title; this image would be extremely small so the user wouldn't see it. Let's do that now. Click on the Layout button:


You should now be in the Layout settings window:


Click on the Edit link of the Header section:


The Configure Header window should now be open. Click on Instead of title and description:


Next, create an image that is 2 x 2 pixels. Make it the same color as your background color, or make it the same color as the background image (which we'll add next). Click on Browse and select this image. The Configure Header window should now look like this:

Adding a Background Image

Click on SAVE. If you view your blog now, the title should be gone. Finally, we'll add our background image. If you're going to add a background image you want to make it at least 2000 px wide. If you have your own hosting account you simply need to upload your JPEG image to the server. If you don't have your own server then you can click here. At this link you'll find plenty of free servers where you can upload your background picture.
After you upload your background picture, take note of it's location address. For instance, if I uploaded a JPEG named blogger_background.jp to my nongeekbooks.com server. The web location for this JPEG is:
http://www.adobe-flash-tutorials.info/blogger_background.jpg

So now I need to make this image my Blogger background. We do that by clicking on the Edit HTML link:


Next, click on Expand Widget Templates:


Scroll down until you see the body tag:


We're now going to add a snippet of code to this tag. Copy the code below:
background-image:url("http://www.adobe-flash-tutorials.info/blogger_background.jpg"); background-repeat:no-repeat;

Next, click inside the code after the $bgcolor; code and hit Return. There should now be an extra line space after this code:


Paste in the JPEG code from above, into this new space:


When you're done save your template. View your blog. You should now be seeing the background image. Remember, if you're not seing the background image make sure the web location is correct. Here is my final version with the background:


Your blog should now have an exciting header! 

If you are interested in creating all sorts of Flash files, from headers to video games (without writing any code at all!) then go to our E-Book page.  Thousands of illustrations make learning Flash a breeze.