How to make you own header

This post will tell you how to insert your own header in the Minima template on blogger. This blog uses the Minima template with the default, text based header. Here is an example of another one of my blogs that does us a custom graphical header. To start off, if you look in the CSS and HTML for the template, there is a is a div with an id called header (which is where the header lives). It is 660 pixels wide. I suppose you could make a header wide than that, but I have not tried it with this template. For the sake of simplicity, cobble something together in Photoshop that is 660 pixels wide. The height does not have to be anything specific, the div will expand to whatever you put in it. Save is as a jpg or gif using Save For Web. Its good to keep the file size under 50k if possible.

Now go into the template for the blog in blogger. You don't have to change any of the CSS. In the HTML, look for a div tag with the attribute id="header"

You could delete everything inside, but its probably better just to comment out the parts you don't want. Inside the <div id="header"> tag, put <!-- above or in front of everything in there and put --> after it, just before the closing div tag that looks like this: </div>

That should comment out the contents of the header div. Its still there, but it won't show up in the page or effect it.

To put the header in, you need an image tag. I'm assuming you have the header image hosted somewhere. You can upload it to flickr or to your server if you have one. You can even upload it by putting it in a blog post if you have nowhere else to put it. In any case, you will need the url (http:// etc.) of the image. You put that in the source attribute of the image tag like so:

<img src="http://www.someplace.com/header.jpg" />

You will want to give the img tag an alt attribute (sometime referred to as an alt tag even though it is not a tag). This is so there will be some text in case your image fails to appear. You should make this the title of your blog, but you coud put anything in there. Your image with an alt tag will look like this:

<img src="http://www.someplace.com/header.jpg" alt="Your Blog Title" />

You will want to make the header hot, so that if someone clicks it, it will take them back to the main page of the blog. A normal link tag looks like this:

<a href="http://www.somehost.com/somepage.html">Click this text to use link</a>

Instead of the http://... (url), we are going to use a tag inside the source attribute. This is a tag that works in blogger templates to link to the main page of a blog. The tag is <$BlogUrl$>

So the whole thing looks like this:

<a href="<$BlogUrl$>"><img src="http://www.someplace.com/header.jpg" alt="Your Blog Title" /></a>

You may want to also add some tags to control the borders of the image. Some browsers put an ugly blue border around images that are inside of links (hot or clickable images). So, add the border attribute to the img tag:

<img src="http://www.someplace.com/header.jpg" alt="Your Blog Title" border="0" />

The last thing to do is to remove the border that the Minima template adds to images. There are a couple of ways to do this, but since I have already told you how to put attributes like alt and border in the image tag, we'll do it there. We will add the style attribute and use the border:none; style in it, like so:

<img src="http://www.someplace.com/header.jpg" alt="Your Blog Title" border="0" style="border:none;" />

make sure there is a space before the /> which is the closing part of the image tag.

And that should do it. If you have any questions, leave a comment and I'll respond in the comment.