A common thing you’ll find when you start blogging is that you’ll want to make changes to your template. If you use the Blogger blog system, it can be easy or extremely difficult depending upon what you want to do. This post will show you where to go to modify your header as well as some advice as to how to approach the issue of modifying your header image if you choose to do things yourself.

This post focuses on an aspect of the Google Blogger blog system. If you would like to learn more about Blogger, please check out the table of contents on a series of posts about using Blogger for more detailed explanations of the administration screens.

Why Modify Your Header?

Sometimes leaving well enough alone is the best approach, but if you’re like me, you like to play around with things and find out what makes them tick. A healthy curiosity is good, but it can also get you into trouble if you don’t know what you’re doing. Make sure you take the right approach, this post will lead you in that direction.

You might say a new header is like putting on a new Sunday hat. It tops off your blog and is the first thing people see when they visit. Having a nice looking, attractive header can give a great first impression as well as give a clue what type of blog they’re looking at.

Where to Modify Your Header

To start off, you can find the controls to modify your header under the Layout tab – Page Elements page. Clicking the layout tab should take you directly to the Page Elements page. From here, you’ll see the wire frame of your site with the header presumably on top.

Clicking the Edit link found inside the header area opens a window that looks just like the image here to the right.

From here, you can configure your header title and description. This is, as you might already know, the main header text you see on your homepage in the header area.

The Image section allows you to upload a photo or image from your computer. You could also refer to another image found on some other web site as well.

The placement section immediately below that let’s you specify how the image, if you choose to use one, will be placed. Do you want it to be behind the title and description? Or perhaps you want just the image and forgo to option to use the Title and Description fields.

Another way to look at this is that it controls whether the Title and Description shows or not. Image or not, you get the idea I’m sure.

Finally, the checkbox ‘Shrink to fit’ will shrink the image to the same value you have in the following CSS snippet:

body#layout #outer-wrapper {
  width: 800px;
}

This little CSS snippet that is found in the template code simply tells a browser that the width of the ‘outer-wrapper’ is 800 pixels wide. Your template may use a different name as well. Not everything is built equally the same. You might recall from my post on HTML Div Tags that your template is most likely constructed from many of these Div tags within Div tags.

The ‘outer-wrapper’ in my template is the outer-most div tag that basically encapsulates the header, sidebar and post area div’s.

If you modify your header and the sidebar and post area begin to skew, you are then stretching your outer-wrapper too much, and should probably reduce the width of the image unless you are able to trace down and correct the CSS issues you are creating.

Disclaimer: Of course, there could be a multitude of other issues impacting your design that I could never possibly cover. It takes you, the reader, to do your own investigation and determine what is wrong and fix it. Otherwise, if you are stuck, you can always ask me what’s up with it.

How to Modify Your Header

Where to modify your header is only one aspect of taking control of your header. You also need to consider a few other things to ensure that everything turns out like you plan.

For instance, let’s assume that you want to create an image and use it as the background in your header. The text that defines your Title and Blog Description need to be taken into account, right? Is the text going to look nice where it’s positioned now, or will I need to modify the position in the template code? Only you can answer that for your own blog.

I’m no whiz with graphics, I’ll be the first to admit that, but I can do the basics and perhaps some intermediate stuff if a gun is to my head and Google is nearby. There are certain skills however that will pay off big time and are easy to understand.

You should be able to do each of these to turn your header into all you want it to be.

• Cropping
• Resizing and understanding acceptable file sizes – This is an excellent tool for resizing by the way…
• Image Dimensions (pixels, width & height) How to find

I’m sure a number of people would want to add to that list, rightly so or not. But if you don’t understand the above, ask someone, you’ll be glad you did. I also left out blending images together and such. Graphic artistry is a discipline unto itself that I could not begin to speak to, besides, it’s outside the scope of what we’re really doing here.

Another consideration you’ll need to address is the width and height of the image to use. In case you missed it, there is also a small sentence in the image above that I barely touched on (you might have to click the image to see it or look at your own configuration). It says ‘Image will be shrunk to xxx pixels wide’ (insert your own value from your blog in xxx), this tells you the maximum width you could create as a “full banner header”. Meaning one that tops off your sidebar(s) and post area. Anything greater than that value will be shrunk if you choose the Shrink to fit option, and that could very well skew your image into something fuggly.

Anything greater than that value when the checkbox is not checked could possibly stretch the boundaries of the outer shell surrounding your blog, causing the sidebar and post area to layout incorrectly. Or, it could be all roses. It just depends on how your template is structured.

Completing Things

By now you should know the constraints you need to work with. You should know the number of pixels wide you want to make the header. The height of the image simply pushes everything else down under normal circumstances, so the consideration there is usually of a more personal nature. Width is the ‘gotcha!’ that you need to pay attention to when using an image in your header.

Creating the image is completely up to you. There are many graphic programs out there, and some that come with your operating system. Take stock of what tools you can use. Do they allow you to crop, resize and easily create an image with the dimensions you need? They should if they are worth the disk space they take up.

Now it’s Your Turn

Are you considering changing up your header? If so, this post hopefully gives you a further understanding of what is involved and some of the considerations you should be thinking about before doing anything.

Because there are so many variations to everyone’s templates, it would be darn near impossible to write something that will cover all the variances out there.

I know there are some that will have questions out there. I have a new Feedback page in place now, and I’d love to see some more questions placed in there. Anything goes. Ask me to elaborate more on this post or even something else entirely. It’s up to you to let me know what’s missing to help you build a better blog.

Help Me Help You

If you liked this post, please click the vote for me button to show your approval. It’s a new widget for me, and you might notice that I’ve been busy entering my blog into some directories lately. I’ll explain a little about why I’m doing this in another post soon.