Blogger Hacks: Making a header image for your blog

*Finding the width of the header
Before creating a header image, we need to know the width of the header section in the existing Blogger template. This prevents the header image from being clipped or malformed when it appears in the completed design. To find the width the header image should be, go to Layout>Edit HTML in your Blogger dashboard, and look for the following line:

#header -wrapper {
Just below this line, you should see the CSS statement for the overall width
of the header. In the default Minima template, this appears as follows:
#header -wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

From this information, I know I need to make my header image 660 pixels wide. This may differ for your own template, so be sure to check the width of the header wrapper in your template code to be sure you have the correct width. The height of your completed header image does not matter. You can make this as tall or as short as you like, though I would advise that header images taller than 300px to ensure you can still see some content “above the fold”.

*Making your header image

Those of you who are experienced with image creation and editing may now be racing off to create their very own unique header image using their header dimensions. For those of you who are not so familiar with CorelDraw or Photoshop, an alternative would be to use a free header banner and adapt this to your needs. In the example above, I downloaded a free vector header from BittBox3 and resized this to

660px wide using GiMP (a free image program similar to Photoshop, but without the price tag!). Here is the resulting image:

For this "cheats' guide", I would advise you to add your blog's title or logo into your header image. This is because there may be problems when using your image as a background behind the title and description which require more customization than can be explained in a simple guide.

Again using GiMP, I added some text to my header image6. Here is the finished result, which I had saved in GIF format:

*Adding your header image to your blog

This quick method of creating a blog header is the simplest one of all. Just go to Template>Page Elements in your Blogger dashboard, and click on the Header widget near the top of the page.

On the popup screen, you will see options for using your own header image. Select the radio button to upload an image from your computer and locate this using the "browse" button. Then check the radio selection which says "Use instead of title and description. Finally save your settings. Using this method, your image will be hosted by Blogger, and will appear instead of your regular title and description, like this:

Note: in the Minima Template there is a glitch in the CSS which can make the header appear slightly misaligned. This is easily solved by changing the margin of the #header statement from this:

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color: $pagetitlecolor;

}

to this

#header {
margin: 0;
border: 1px solid $bordercolor;
text-align: center;
color: $pagetitlecolor;
}

Source:Ebook-Guide to blogging by Amanda Fazani(www.bloggerbuster.com)

Related Posts by Categories

Widget by Hoctro | Jack Book