Adding a graphic to your blog header

Update 25 September 2008: The very nice graphic at Guide to Malaysia has been replaced by a leaderboard ad unit from Nuffnang. When there are no incoming ad, the ad unit is minimized to a tiny logo .

For an example of a Blogger Beta blog with a graphic above the header, surf to Cheap Airfares: Air Asia, Malaysia's success story and Testing Expandable Post Summary (close new windows to get back to this page). The difference between the two is that the image in the first example is clickable whereas the image in the second example is non-clickable. If you are in the archives or in an individual post page of the first example, clicking on the graphic will take you back to the main (home or index) page (or any other sites you choose, depending on what you want). Try clicking on the graphic in the first example and see where it takes you.

Adding a "Add a Page Element" (Page Element is now called Gadget) widget in the Blogger Beta Layout

This is how you can add a graphic to your header. Sign into Dashboard. For the blog you want to modify, click LAYOUT, then click EDIT HTML. Then look for this block of codes in the template:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Replacing Blog Header (Header)' type='Header'/>
</b:section>
</div>

Change maxwidgets='1' to maxwidgets='4'(or any other number greater than 1, or even leave a number out, then there is no maximum) and change showaddelement='no' to showaddelement='yes'. (you may also leave out the figure in maxwidgets='' in which case the number of widgets you can add to the header is unlimited). So the section should now be

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Replacing Blog Header (Header)' type='Header'/>
</b:section>
</div>

Click SAVE TEMPLATE. Then click PAGE ELEMENT tab to go back to LAYOUT. You will see an extra "Add a Page Element" above the Header.

Adding unclickable graphic in the Header of Blogger beta blog

Click "Add a Page Element" and a pop-up will appear. Select "Picture" and click "Add to blog". In the next page, there will be 4 fields and some radio buttons for you to click. The fields are "Title", "Caption" and two fields for image. It is best to leave the title blank. If (rarely) you want a caption below the image, then fill in that field with your caption, otherwise leave it blank. If you have your photo stored on your computer, click "Browse" (the radio button for "Browse" is already ticked by default), then select the photo from your computer.

You may also tick the radio button to load an image already hosted on the web if you know the URL, but if the image is not hosted by you, there may be copyright and bandwidth issues involved. If you select this option, just fill in the field for the image URL and click "Save changes". For this, the safest option is to tick "Shrink to fit" as you have no control over the size of the photo.

The advantage of this is you don't have to deal with any HTML, but the disadvantage is that the image is not clickable like in the first example: Testing expandable post summary (close new window to get back to this page).

Adding a clickable graphic to the Blogger Beta blog Header

There is another way to add a graphic to the header. First, you need to host your image somewhere on the web. You can host it with Photobucket (close new window to get back to this page) or you can host it with Blogger. If you want to host it with blogger, look at post Getting Blogger to host your pictures for your profile, etc. (close new window to get back to this page). You may be interested to read about a comparison between the two methods here: Comparison between hosting images with Blogger and with Photobucket (close new window to get back to this page).

You may also use Google Page Creator to host the image. After uploading the image, click on the link then copy the URL from the address bar in the page hosting the image (or right-click on the mouse and select "copy shortcut" to save the URL into clipboard.

Non-clickable image Header

Have ready the URL of the image. Now when you click "Add a Page Element", instead of selecting "Picture" select "HTML/Javascript" instead and click ADD TO BLOG. Then type <img src="URL of picture" width="W" alt="" /> into the HTML editor, where W is the width of the image you want displayed. This will have to be equal or less than the width of the sidebar. If you don't know the width of the sidebar, get to the template editor (click LAYOUT > TEMPLATE > EDIT HTML) and look for this block of codes

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

This tells me the width of the sidebar is 150 pixels.

It will be good to type in some description of the image in between the quotation marks in alt="" as search engine cannot read images but can read the text in the alt tag. This will be an advantage to you if you want your blog to be easily found by search enginges. Another advantage is that if for any reason, the image cannot be displayed, instead of a blank box, the text withing the quotation marks will be displayed instead. The alt tag is optional and you may leave it out if you want. But putting some description between the quotation marks will be good for search engine which cannot read images, but can read the alt text. Also, if the image cannot be displayed for any reason, the text get displayed instead.

When ready, click SAVE CHANGES. Then in the LAYOUT, preview if you want, and click SAVE if you are satisfied. If you are not satisfied with the positioning of the elements, you can hover your mouse over the widget (then the cursor will change to a cross) and drag it to wherever you like.

Clickable Image Header

However, doing it in the manner above will still leave you with an unclickable graphic. If you want the image to be clickable so that it takes you back to the home page (or any other site you wish), you will have to write the image HTML this way:
<a href="URL of home page"><img src="picture URL" width="W" alt="" /></a>. This was the method used for the first example blog.

Adding other stuff to the Header

Note: Instead of just adding a graphic to the header for this blog, you can use the same method to add other things like text, etc. For example, to make a "sticky post" that always stay at the top of the page. You can do it the same way except that after clicking "Add a Page Element", for text, you have to choose TEXT and click "Add to blog". I have also tried adding an AdSense link unit to this beta blog Business, Travel and Leisure (cloce new window to get back to this page). The last time I did it, it didn't work unless I tamper with the script and remove the comment tags, but this time, it worked perfectly without having to change the script. Try it yourself. I have also tried to add a Google searchbar this way, but it still ended up with a non-working searchbar. To add a working searchbar, see this post: Putting a working Google AdSense searchbar in the Header of a Blogger Beta blog (close new window to return to this page).

Update. Putting the script for the Google AdSense search box directly now will result in a working search box. You don't have to do any tinkering.

Making a graphic

For the graphic I made at Guide to Malaysia, I just took a 640x480 pixels photo, crop it to size with the very good and free Irfanview, save and uploaded to photobucket. If you want a fancier graphic header, here is a very good tutorial that shows you how to do it with Photoshop: How to make a blog header graphic (close new window to get back to this page)

For the simple header in the second example "Good Health Information", I just use the very good and free Irfanview to make the graphic. For those not famalier with how to do it, I think I will do a post on that. When I do, I will add a link to that post here.

Getting rid of the text header

I personally believe that having a text header and a description in the header is good for search engine purpose, and I personally would not want to remove it. One of my blog reader did it this way. He retained the text header, but reduced its size to 1 pixel.

Now if despite what I said, you still desparately want to remove the header, as someone just commented, it can be done. Get into the template editor, and look for this block of code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Testing Header Removal (Header)' type='Header'/>
</b:section>
</div>

Change locked='true' to locked='false' (To add the graphic header, you would already have changed maxwidgets='1' showaddelement='no' to maxwidgets='' showaddelement='yes').

If you do this, to remove the text header, click EDIT in the Page Element for the text header, click "Remove Page Element" and the text header (plus any description) will be remove. (see screenshot below)



Update: If you want the text title to be incorporated into the image, it is better to add the image as a background, making sure the image and the text have contrasting color. See Adding an image as background for the blog Header. Alternatively, you can use the method described in this post Special fonts for your blog clickable graphic header without deleting the text title