Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Mar 20, 2007

Digg This Story

Add Picture Banner Link to Blogger Header


With the latest Blogger feature, there is an easier way to insert a background image to replace your Blogger Header. The image is also clickable and links to your Blog's main index page. The steps are discussed in the article Background Image for Blogger Header (New).

However, by using the new feature, the image appears in the center, as a background to the title. For those who want more control over the position of the picture, like having the picture appear on the left or on the right of the title, it may be better to follow this guide. After inserting the background image, use the instructions in the section titled “Align Header Image, Title and Description” to position the picture and adjust the title and description text.

This guide is about adding an image or picture to your Blogger Header to replace the Header Title, and to add a unique personal touch to your Blog. At the same time, we would like to have a clickable Blogger Header so that anybody clicking on it will be brought directly to your Blog's home page. For purposes of search engine optimization (SEO), we would include a text in the code so that the title of your Blog can still be read by search engine spiders despite your removing the Header text.

Before we begin, if your intention is simply to add a background picture to the Header, but still retaining the Header text and description, please refer to my other article on “Background image for Blogger Header” or the article “Background Image for Blogger Header (New)”.

Next, you will have to enable additional Page Elements to your Header section. When you log in to your dashboard, and go to Template -> Page Elements, you should see an option for you to add a Page Element above your Header.

Add Picture Banner Link to Blogger Header

If you don't, please refer to the related article on “Add Page Element to Blogger Header and Blog Posts” to see how you can enable the option to add further page elements to your Blogger Header. (NB.: I am referring you to the other article as I do not wish to repeat the steps here, making this article unbearably lengthy.)

Add picture without link to Home page

This is simple. If all you want is to have an additional picture or image above or below your Header text, click the “Add a Page Element” link and select “Picture” to upload the image from your computer. Save and refresh.

Add picture with link to Home page

Instead of uploading the picture, you will need to create a link. To do this, you need to have the picture uploaded somewhere. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.

Now that you have the picture URL, click “Add a Page Element” in your Header section and this time, choose “HTML/JavaScript”. The HTML code is as shown below:-

<a href="YOUR BLOG URL" title="YOUR BLOG TITLE"><img src="YOUR PICTURE URL" alt="YOUR BLOG TITLE" /></a>

Allow me to explain:-

1. Insert the URL of your Blog beginning with http:// into the portion marked red.

2. Insert the picture or image URL into the part in blue. This is the direct link to your picture that is uploaded onto Google Pages, Photobucket, Blogpulp, or whatever image host that you use. To check whether the link is correct, you can copy and paste it into your browser and press Enter. You should be able to see your image.

3. Insert the title of your Blog into the part marked orange. You will notice that there are two attributes – ALT and TITLE – bearing your Blog Title. The ALT attribute is an alternative text description for images. For browsers that are unable or are slow to read images, this text will be displayed instead. The TITLE attribute is not restricted to images and can be used for any page element. In most browsers, hovering your mouse over the link will show this title. It is widely believed that adding these texts will boost your Blog's accessibility by search engine spiders. Whether or not that is true, there is no harm putting these in to aid the search engine ranking algorithms.

When you have inserted the HTML code, press Save, refresh the Home page and you will see the Header picture.

Align Header Image, Title and Description

Update: The following section talks about the method to have a picture on the left side of the Header and the Title on the right. In addition to this guide, we have an article in our FAQ giving you tips on how this can be done. If you want a guide on general alignment of the Title, Description and Header background images, we have other articles explaining how you can move the Title, Description and image to the center, or towards the left or right of the Header. Follow the guide on Header Image and Title Alignment (I) if you are using the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe template. Go to Header Image and Title Alignment (II) if yours is a Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar or Simple II template.

Should you want the Header picture to be beside the title, and not as a background to the title, follow the guidelines in the above section “Add picture with link to Home page” to insert the picture in the Header.

Next, if you are not linking your picture to the Home page, amend the HTML code to this:-

<img border="0" src="YOUR PICTURE URL" alt="YOUR BLOG TITLE" width="100" height="100" align="left"/>

If you are linking the picture to the Home page, the HTML code will be this:-

<a href="YOUR BLOG URL" title="YOUR BLOG TITLE"><img border="0" src="YOUR PICTURE URL" alt="YOUR BLOG TITLE" width="100" height="100" align="left" /></a>

Change the width and the height of the image to suit your requirements. If you want the picture on the right of the Header, change the word "left" to "right".

An example of a picture on the left of the Header is this:-

Add Picture Banner Link to Blogger Header

Notice that the Header and the Description are in the center of the Header. If you would rather have this:-

Add Picture Banner Link to Blogger Header

where the Header and the Description are at a fixed position from the picture, under Template -> Edit HTML, scroll to this line and remove the code (shown in red):-

#header {

text-align: center;

Next, scroll to this line and add the code (shown in red):-

#header h1 {


This gives you control over where exactly you want the Title to appear. You can change the 150px to other values and Preview the template to look at the position of the Header.

To shift the Description, scroll to this line and add the code (shown in red):-

#header .description {


To have an idea how wide the margin would be, the Header and Description in this Business Fables Blog is set at margin-left:230px.

You may see in your stylesheet a margin like this:-

#header h1 {
margin:5px 5px 0;

For those who are familiar with the shorthand for margin code, you can insert a fourth value to define the left margin. Otherwise, it is alright to insert a margin-left:150px; after that.

Remove Header Title

Go to Template -> Edit HTML. Scroll to where you see this code where your blog title is shown in the part marked orange:-

<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>

Change the locked='true' to locked='false'. Save and click the “Page Elements” tab. When you “Edit” your Header, you will now see a “Remove Page Element” option. Remove it if you want, and refresh the your home page. You should no longer see your title displayed.

Create Banner Link

Here, we are referring to animated picture files. You can create one using GIF Animator programs or free online softwares. Key in search words like “free online banner generator” into your search box to look for sites that offer services to create your free banners.

After creating the banner, you would have to host it on a free picture host. Look up the list of free Image Hosts and File Hosting Services. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. The steps to insert it into the Header are the same as outlined above in “Add picture with link to Home page.”

Remove border around Header

When you go to Template -> Edit HTML, you will see somewhere near the top a style defined for the #header-wrapper and #header. There is a setting for the border. It may be at 1px width with a solid, dotted or whatever line, of a certain color. To remove the border, either delete this setting entirely or change the 1px to 0px width. Preview the template and if you like what you see, save it.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button


EFCCM said...

Thanks -- this fixed a problem I've been working on for far too long! :-)

wendy said...

how much do you rock? (you do NOT want to know what i did to make the original header disappear.)

Basketer said...

Sukoii. Definitely what I was looking for because my new banner takes a lot of space.
Also,"For purposes of search engine optimization (SEO), we would include a text in the code so that the title of your Blog can still be read by search engine spiders despite your removing the Header text." Did you forget to add that part?

Basketer said...

Ohh I got it we are adding it in the "Your Blog Title". Thanks. Sorry for the trouble.

AndinaGirl said...

I still have a box left over from the template...a thin white box line around my banner. Any tips on how to get rid of that?

bizwhiz said...

Hello Andinagirl

When you go to Edit HTML, you will see somewhere at the top a defined style for the #header-wrapper and #header. If there is a border, it is because the border is set at 1px with a specified color. Delete these settings, preview your template, and you will see that the border is gone.

AndinaGirl said...

Thanks!!! It worked perfectly!

djgs said...

Unfortunately, the header/banner is not there when viewing individual posts. Just the dreaded red x next to the title.

How can I make the header image show on secondary pages with this method?

bizwhiz said...

Hi djgs

Wanna let me know more about how you added the picture? Using the Add Picture, or Add HTML method? Which is your blog? If you have added a page element, whether to your header or sidebar, that page element ought to be visible on every page.

Corey said...

i cannot thank you enough. i sat for many hours trying to work out how to make my header image a link back to my homepage.


Laura said...

oh my gosh, THANK YOU . . .i have looked at so many websites . . .this one actually MADE sense, and. .. well, it WORKED!!!!

technut said...

Love your tips.

For an animated image you say "you would have to host it on free picture hosts like Google Page Creator or Photobucket but not Blogger".

I believe .gif images are preserved if you upload them to blogger in a draft post to your blog. Copy the link from the image and then you can delete the draft post.

technut said...

p.s. I should have been clearer about the image URL. You'll need to Preview your draft post, right-click on the image and copy the Image Location (not the Link Location... they are slightly different).

Chris said...

This made my week! I am forever gratefull to have worked this out perfectly. See for yourself if you like.

bizwhiz said...

Thanks to all. Glad that the info helped you in some ways.

Hi technut - thanks for the detailed tips. I am not sure that you can deeplink to the image but if it works, great!

Anonymous said...

How Can I add a pic to the sidebar and make it a link so that when people click on that pic they go to my main site.

thanks You. Very helpful blog.

Anonymous said...

hey there - my banner photo has vanished! see my page at the top, the big gap..... I can't figure out what to do with your instructions though, any tips? (and please excuse the dirty content hee hee).........

thegreatsze said...

you are the awesomeness.

bizwhiz said...

I will find time to write an article on hyperlinks and image links. As for Tom's query, you may want to try uploading the picture onto a free image host and see if it works.

2Perfect said...

You sir, are my hero! I didn't catch your name so if you're a madam, then you ma'am, are my heroin(e)!

Originally I just used the CSS to make the background an image instead of a plain color, because CSS is the only thing I knew how to mess with, not the widgets :P And that made it look horrible because the text title was still there.

Thanks a lot for this post!

2Perfect said...

PS: I don't do drugs :P

Christopher Michael Family said...

I must be retarded, because it still doesn't make sense, could someone help me? please?

bizwhiz said...

Hi Christopher Michael

There is no public blog under your profile. You have also not said which part of the article needs clarification.

Stephanie said...

Thank you so much...I'm not all the way finished but I love it so far. Can't wait to look around here a bit more! I will give you credit soon, too. Thanks again!

Bill Blunt said...

I am indebted to you for your usual sound advice!

My blog is now starting to look like something I want it to!

Best wishes

Bill Blunt

dumper said...

Basically, if you have an image in your header, there's an option to have the image behind the title, or instead the title. Just choose "instead the title", and you'll be fine :)

Used it here: celeb.dump

Anonymous said...

Thankyou so much for all your help. I will be back here often for more great tips. :)

stephmodo said...

Thank you so much for taking the time to type all this out. You saved me tonight when redoing my banner. The piece of crucial info I found from you was the part about removing the header page element after uploading the banner. Thanks~

Helena said...

I've been trying to figure this banner thing out for a while now! You've given the best explanation I've seen so far!

Amit said...

Thanks a lot for quickly adding the hack to align the image to left or right of the title. Much appreciated. It's working great on my blog!!


Anonymous said...

I tried this method and the logo image works fine. But the problem is that my title and description are separate from the (link-to-logo) page element. The header looks something like this:


What should I do?

bizwhiz said...

Hi Anonymous

We'll try it later today and amend the article if necessary. Perhaps you might want to add the background image using the new Blogger feature? Thanks for raising this.

Anonymous said...

I'm currently using stylesheet to display the logo. But what I want to do is to have a link on the logo and is clickable. So I tried the tips you gave but without any luck (so far). BTW, I'm using a template named 'Denim 3 Column Template'. I see if you can come up with something. Thanks.

Madcrow said...

Aloha.. I think it was this tutorial I followed about a month ago.. I thought everything works etc.. But I have discovered one problem.. People using IE can't see my header / banner.. Any ideas how to fix this?

Any ideas would be great as people using IE ( Didn't know people still do LOL ) can't see the blog as it should be..

bizwhiz said...

Hi Madcrow

Your header image code has an odd addition which IE can't interpret. You can delete this and it should work fine:-


Madcrow said...

Aloha bizwhiz.. Thanx so much, you have solved the problem.. Other people in other forums etc said it was other things, which when I tried fixing stuffed my template etc, but you were dead on.. Thank you once again..

Judy Chow said...

hi bizwhiz, your guide is simply help. I almost done my background header with image, but I want my blog title and description to be display in front of the image (that is also called image behind the title and descrp), also I want image and title are clickable to bring me back to the index page.

What should I do?

bizwhiz said...

Hi Judy Chow

Would you like to try using the new Blogger feature? You can upload your picture and retain the header and description.

Joseph B. said...

You're tutorials have been loads of help. But right now, I'm having some difficulty with a minor problem. If you check my blog: , theres a six or seven pixel space between the banner and the edge of the page. Is there any way to remove it?

bizwhiz said...

Hi Joseph B.

Are you referring to the left and right margins beside both the header and the main contents? The header width follows the width of the outer-wrapper. You can increase that width to remove the margins entirely. This is the way your Son of Moto template is designed.

Chuck and Brenda said...

I have a quick question that does not pertain to this post, but you have always been of great help. The question is, when you go to Google sitemaps, all my labels in the sidebar have been blocked by googlebot saying I have a "no follow" script, but have done nothing new. Hope you can help. thanks

bizwhiz said...

Hi Chuck and Brenda

I thought they have a nofollow attribute for backlinks and comments. Didn't know they applied it to labels. Will check it out.

Vish..! said...

Juz to mark my attendence in your blog :D

dawcee said...

awesome. did the trick, I'll definately be checking out more stuff on this blog. thanks.

tiny-dog said...

BLESS YOU. This is exactly the information I needed, and your instructions were easy.

Orca said...

You're definitely my blog guru! It has been time that I've been looking for ways to personalize my header but I haven't found one that simplified the whole thing except you. I was able to modify my header in one sitting without any hassle and without any code experience. Thank you very very much. Check out my work:

kiwicpk said...

wow thanks a whole bunch for all the easy to follow even for the compter dummy :-)

Vinayak said...

I have run into a problem. Earlier I was using the new blogger method to add image to the Blog header. Then is removed that and starting using the url to image address method in the #header-inner. Now, the Blog title is not clickable any more. Can you help?

bizwhiz said...

Hi Vinayak

The image is not clickable. We did not include your method under this article on picture links in header, but in our article on background images. In there, we discuss how you can add images into the template to create a backdrop, which is what you did.

Although the image is not clickable, the Header title is clickable by default. Go to any of the subpages. You will be able to click the title to go to the Home page. I suppose this makes sense, since there is no need to click to the Home page if you are already at the Home page.

Vinayak said...

I realized that only moments after shooting off the comment. Guess I got confused by the sites that actually have a clickable header on the home page itself. After trying so many of your wonderful tips and making changes to my blog, I lost track of the way my blog was supposed to work.
Sorry for the trouble and thanks.

Myndi said...

Hi, Ridiculous question but when I upload the photo, does it need to be the exact size of the banner? I have gotten as far as uploading a photo, but the size is all wrong (it does not appear in a proper rectangle). Also, will I be able to replace my existing banner with the html? Do I need to delete my existing banner in order to replace it with my new one? Many thanks!

bizwhiz said...

Hi Myndi

Yes to your 3 questions. Since you have not indicated a blog url and your profile is private, I can only add that you can consider inserting a background image by editing the header and uploading a picture.

Myndi said...


You can see my blog here:

I have been unable to find a way to delete my existing header. It appears it will only allow me to edit the box. Do you know how I can delete the header and replace it with the html?

Any tips for resizing a photo to fit nicely in the header area?

Thanks in advance!

bizwhiz said...

Hi Myndi

You have no header image but just a header. If you want to remove it, enable Add a page element to the blog header. Then when you are at the Page Elements page, you can remove the header.

I suggest again that instead of removing the header, you edit the header element and upload a background image. You can choose to have it replace the title and description.

As for the size of photo, you may have to try several sizes and view the effect. It is not necessary to have the photo fill up the entire width. Whatever the size, center the photo and it should look nice.

Myndi said...

Thanks! I'll give this a try and let you know how it goes. Thanks again for walking me through it!

Myndi said...

So I was able to add the photo to the banner like you suggested. The photo does not take up the entire banner box. I'd like to make it the entire size of the banner box while also removing the border and moving the title text to the right. I would still also like to be able to hover over the banner and be taken to the homepage.

I know you give detailed instructions on how to do these things by editing the html. Do I need to makes these html edits under the html tab rather than the page elements tab?

bizwhiz said...

Hi Myndi

As you've said, the instructions are contained in the guide. There is even one specifically on Header Image beside blog title. Some require you to edit the template. In others, you edit the page element.

We believe the steps outlined are clear enough. If there is any obvious gap, let us know. It would also help if you try to familiarize yourself with the options available in the blogger dashboard.

Myndi said...


Thanks for all of your help and patience today! I think I finally figured it out!

many thanks!

Calintz said...

Could you possibly have a randomizing header script for your header? I looked at your randomize header section but it didn't work, and my html scripts don't work either. I want random header images not just one if you could help me out that'd be great, thanks.

Liberal Foodie said...

mine picture link is not working. When I click on the image, it goes to a blogger deadlink. Also, how do I get my title to display next to the picture as opposed to what it's doing right now? thank you!

Alissa said...

Wonderful! Thank you for your help. Your instructions are really clear and make me feel brilliant because I was able to do this on my blog :)

anmari said...

You are heaven sent! Thank you very much...

Free Nokia Stuff! said...

hi there...
if u visit my blog, u would see that i have created a pic and linked it with my homepage URL... the problem is that there is a lot of space above my header picture!
can u plz tell me how can i remove that space... In the "page elements" section of blogger.. there is only one option to add a script which i have used to add a picture (header), above that option, there is free space... which is also visible on site, plz tell me how to remove that space!

Anonymous said...

Hi.. Friend.. Really nice blog.. I have one doubt. I want to make my blog like this blog..
this is not my blog and am really apologize for posting some one's address. But rather than this i dont have any idea to explain to you.
Ok.. In this ("")
blog he posted the articles. In every articles at the end he said "READ MORE" so that i can

read that post seperatly. so I to want to make like this.. Please reply me.
ID :


MisInterpretedly Byun said...

hey bizwhiz. I tried following your instructions and managed it successfully except i couldn't get my Blog Name onto the picture itself?

If you need to take a look, here's the
link. Thanks~!

Oh btw, original words below the picture are meant to be there. Once i get words above the picture onto the picture itself, i'll delete the original description.

Mushahid Hussain said...

can any one please vote for my beautiful blog plz plz

Jamie Watson said...

I also just wanted to thank you! Thanks to you, I learned how to remove my banner border (changed the 1x to 0x). Very appreciative of your site!

dHoNuT said...

hi..I have a problem with my new blog, I want it to show clickable random banner links under my header, just like my friends blog here :

so everytime the page refresh it shows different banner links to click.

I've tried your method to add page element under header & works perfectly, but when I insert the code for random banner & add some banner links ( there's nothing happened.

thank you in advance.

Free Internet Phoen Calls said...

See My Blog
I have Used defferent Images in header for each page

Lisa said...

how to remove blog title?