How to Customize your Header? ~ The Blog Doctor.

How to Customize your Header?

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

To customize the header in a beta blog...........

start with BACKING UP YOUR TEMPLATE as described in How to Change Template.

The Blog Header in Beta blogs is described by two sections of code. The first section is in the CSS part of the template where the physical characteristics of the header are described. A sample header code in the CSS is given below :

/* Blog Header---------------------- */

#header-wrapper {
background:$titleBgColor url("") no-repeat
left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
#header {
background:url("") no-repeat left bottom;
padding:0 15px 8px;
#header h1 {
padding:10px 30px 5px;
font: $pageTitleFont;
#header a,
#header a:visited {
color: $titleTextColor;
#header .description {
padding:5px 30px 10px;
font: $descriptionFont;

As you can see all the physical characteristics of the header such as background, margin, padding, textcolor etc.are described here. Also the header heading is described in h1 and the description is described in #header .description. The behaviour of the header link is described in #header a and #header a:visited.

To customize the physical characteristics of the header you will have to modify the above code. For example to increase the width of the header you will have to add "width:750px;" line in the line signified by xxxxxxx. To increase its height add the line "height:100px;" in the same position. To customize somemore features add the following lines in the same place :

padding:0 15px 8px;
border:solid thick ;
margin:10px 0 0 0;

Margin and Padding are described in clockwise order and the former is the space outside while the latter is the space inside the element. Background color is described here using hex number. A useful utility for determining the hex number of a color is the color picker from NOTICE that all the lines end with a semicolon.

In the above code you will also see some properties described using variables like $descriptionFont, $titleTextColor, $pageTitleFont etc. These are the variables passed on to the top section under Variable Definitions and are responsible for executing the 'Fonts and Colors' page under the Template section. They enable customizing the template in a WYSIWYG or Graphical interface for the point-and-click user.

The second section of code is what executes the header on the web page and exists in the body. A sample headercode is given below. The header in beta blogs consists of single or multiple widgets which are contained within a header section which in turn is contained within a header-wrapper.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>

<b:include name='quickedit'/>

The code "maxwidgets='3'" shows how many widgets are contained within the header. If you do not have this part in the second line of your header you will have to add it before adding anything like a picture or a banner-link to the header. After this is "showaddelement='yes'". You will have to add this so that your header will have an 'Add Page Element' link in the Page Elements section. After adding this save the template and switch to Page Elements view to see the link in action in the header.

You can now add as many widgets as you have specified under 'maxwidgets' to the header by going to Page Element view and clicking on Add Page Element. You can add a Banner Link, a Banner, Adsense and any other advertisements, Animated banners, Flickr Fonts, Logos or if you wish do away with the header completely. Creativity beckons you and you play with the muses.

To add Flickr Fonts go to here. Create the header and upload it to a free host like Googlepages. Click on Add Page Element link in header and choose picture element. In the popup window paste the url of the picture at Google pages and save. See below.

For animated banners try here :



To add a horizontal menubar see :

To Randomise header graphic with Javascript see :

To Add a rotating picture to the header see :

To make a Header with Title in the middle and two images at the side use a table structure as follows :

<table width="740" border="0" cellspacing="0" cellpadding="0">
<td><img src="URL OF PICTURE FILE" width="128" height="120" align="left" /></td>
<td><div align="center">
<h1><strong>Beta Blogger for Dummies</strong></h1>
<td><img src="URL OF PICTURE FILE" width="128" height="120" align="right" /></td>

Add this code to a Html/Javascript element obtained after clicking Add Page Element link in the header in Layouts section. See the result below :

Another hack for doing this is at :


Technorati Tags:, , ,


Lex A. Con said...

Hi there,
I've found your page really helpful thus far, but one thing that I can't figure out for the life of me is how to move text around within the header. Specifically, I would like mine in the top left corner of the header box (I think, depends on how it looks).
Any suggestions?

vin said...

Hi lex a. con,
To move text in the header go to Edit Html subtab of Template tab and scroll down in Edit Html text box till you come to :

#header {
margin: 60px;
border: 0px solid #000000;
text-align: left;

Add these two lines at xxxx in above code


Preview and save template.


Andrew said...


Is there a way that I can freeze the header at the top of my page, so that every item under the header scrolls up underneath it?

I know it would involve creating a separate table, but I'm not sure how to do it within blogger.

vin said...

take a look at

Kim & Scott said...


Thanks for the hints and tips. I've learnt a lot so far ...

perhaps though, could I get a little help again?

I'm trying to use the tip to add the header with two pics either side, as above, and it won't let me put it in place of the header that is the default. I know how to put the code in a html/javascript element but when I click that element to move it into the header, it won't go. It just ends up in the posts area at the top.

Sorry if this sounds dumb, but I'm missing something ;)

vin said...

Kim & Scott
Did you modify the header code? See How to add a picture to a Beta Blog Header. For any further queries use my email address in the left column.

Dana said...

Great instructions for the clueless like me. I appreciate it a lot!
I'm haiving a problem though. I've added my custom banner through the "add a page element" option, but I cannot remove the origianl template header option. When I try to edit it and have nothing there, it pops up to say that "Required field must not be left blank".

Can you help me get rid of this?

vin said...

Take a look at :
Clickable Headersand
Picture in header

jackass said...

Hi i would like to have a header large as like the page because i want to put an image large as the page. How can i do?My blog is this:
Someone can help me?

vin said...


You will need to increase width of your blog. See :

Spanish said...

Thanks for helping me figure out all this nonsense that used to confuse me when I went to this section of blogger.

Ekalavya said...


Need some help with the header of my blog -

The image on the header shows up centrally aligned on IE but is left aligned on Firefox.

I don't really want the box to be seen either...just want the header image there.

Help please?!

vin said...


Have you made the image size same as the header size? See header tip here :

Ekalavya said...

Not really sure about do i check if both are same?

i kind of downloaded the template

vin said...


Load the image in an image editor and look for image attributes to give you the width of the image in pixels.

In your template look for #header or #header-wrapper or #outer-wrapper at the top and check the width parameter below it to show the width of the container in pixels (px).

Jack E Jett said...


I'm currently using a flash header, but it loads to the left of the page instead of the center, and I can't figure out how to make the blog centered as well.

I am hosting this blog on my own ftp site and am also wondering if it is better to host from one of the google sites. If so can I still link to other pages hosted elsewhere?

The blog can be seen in its present - ugly state at - Any assistance you might give would be very much appreciated. Also, if you do contract work I'd love to hire you to help me finish this!


Terry (working on Jack's site)

vin said...

Jack e jett,

To center the header the width of the flash file has to be same as header wrapper :

If you use ftp blogs you can only use classic template :

You can always contact me by email. The address is in the middle column. (drbhatns at gmail dot com)

matt weston said...

Hi - thanks for some excellent tips!

I've added a Javascript countdown to my blog, but I really want it to be in the same position and font as the blog description (essentially, I want it to BE the blog description, in place of the text I currently have). I've followed your steps listed here, but it seems to be as far as I can get towards this layout.

Is there any way I can simply add the Javascript code as the blog description?

Any assistance would be hugely appreciated!

matt said...

Nevermind! I got it! Thanks anyway, though! And keep up the great site!

Shafile said...

how did u manage to get the tabs in ur blog header?

how can i get tabs in my blog...


vin said...


Have a look at CSS Navigation tabs in this post :

Quaint Murmur said...


I'm trying to change my header pic, but even the html code doesn't seem to be working...the picture is too large and it's hanging out to the right of the page and my title can't be seen at all.

please help me figure out what to do...the first time i put a picture on it, it came out fine...this time it's just too large!

Thank you.


vin said...


You have to change the size of the image to fit the size of the header or else it will hang to the right.

See the header tip in this post :

Free From Broke said...

Is there a way to include a widget below the header not inside the header? I upped the maxwidgets to 2 and set showaddelement to yes so my widget is now in my header box on top of the title. What I'm really looking for is a way to put ads below the header box.


vin said...

Free from Broke,

Have a look at :

Add Advertisements in Header

anuj said...

hey! i added a pic to my header sized 760 * 200 and now it has created a large margin on the left side, how can i centrally allign the header and the body again?

vin said...


Have a look at the header tip in this post :

Oquic Tips for Bloggers

Florencia said...

Hi Vin,

Great page, thanks! I want to change the font in my title, but the font I want does not appear as an option in the fonts & colours section. How can I do it?


vin said...


You can specify the font in the CSS code for the title like this :

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;

Use the above lines instead of

font: $pagetitlefont;

in the code below :

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
font: $pagetitlefont;

Do not use a non-standard font or your title will not be seen by viewers.

Michele said...

Thank you for the great informtaion about moving text within header. Awesome. One question:I cannot find Maxwidget in the body, does this just give me more header space? Thanks

Vin said...


Increasing the number of maxwidgets in the header enables you to place more widgets or page elements in the header.

Also see :

What are Widgets

Free From Broke said...

Hi Vin,

Love your site and all of the information you give! Header question: Do you know how I could move the entire header to the left and have my sidebar start from the top of the page (rather than the sidebar starting below the header)?


Vin said...

Free from Broke,

You can load the Dots Template from Blogger and modify it.

J W Lonergan said...

All this has been very helpful for me. However, somehow in my creation of my custom header I have a bunch of extra space at the top of my page above my header. How do I cut down on that space? Also, how do you edit the amount of space between items?

Vin said...

J W Lonergan,

What is your blog address?

laketrees said...

hi Vin
I have exactly the same problem as I J W Lonergan and I have tried everything :(
my address is
I would greatly appreciate any help ..when you are free..
regards Kim

Vin said...


I do not see any space above your header image in FF2 or IE7!

LaDeb said...

Hi, your information has been really helpful. There is one thing I cannot figure out. In my blog header, I cannot seem to place the height correctly in the code to actually modify the height.
For now, I just want that shrunk up around the text.


Vin said...


Try adding a height line to the header-wrapper code like this :

#header-wrapper {
background: #A967C9 url("") no-repeat left top;

Use Preview to adjust and then save.

David said...

Hi Vin,

I have the same problem as J W Lonergan and Laketrees: In Explorer my header leaves a strip of empty space between it and the Blogger bar. There are no problems in Firefox. Any suggestion?


Vin said...


What is the purpose of this code in your template :

<param name='autostart' value='true'/>
<param name='src' value=''/>
<param name='autoplay' value='true'/>
<param name='controller' value='true'/>
<embed autoplay='true' autostart='True' controller='false' hidden='true'

src='' type='audio/mpeg' volume='20'></embed>

Try deleting it!

seaglassthings said...

Hi Vin!

I am trying to make the background of my header trasnaprent so that the blog background image I added will be the background - any idea?


Vin said...


Have a look at Transparent Background for Blogs.

rihanna sucks said...

Your blog is the BEST EVER!!! Thank you soooo much :-) you're the best!

42 yrs old driver said...

How can I get rid of the navigation bar(blog search)? I want to my blog look like a site as I will register a domain later. Please help me to edit the HTML. Thanks.

Vin said...

42 yrs old driver,

Have a look at Navbar in Beta Blogger.

melanie said...

Hi Vin

Can you help me delete the space between the title and description of my header? thanks!

Vin said...


Try reducing the font and/or the line height in this code :

#header h1 {
margin:10px 0 0 0;;
padding:0 15px 8px;
font: 650px;

Fred said...

Hi Vin! Your site is gonna be very useful for me!
If I get it right, there is some way to get rid of the header, no? I've followed your instructions but all it gives is the possibility to add more page element above the header. I actually just want to get rid of it! What to do?

I N S I G H T said...

I need to create a link to my company website by clicking on the photo in my header...How might i go about that, do i have to type in 6million letters mixed with numbers and symbols or can i type in something simple like: 1234? Please help, life hurts until then. Thanks Vin, you cyber hero.

Vin said...


Have a look at How to Link Header to Another Site?

Vin said...


To get rid of the header delete the code below in Template Code box :

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

Jay Tee (a.k.a Jeremy Thow) said...

Hi Vin

Thanks for the great info on your site. Extremely informative and helpful I must admit.

Can you advise on how I can get my header image to fit nicely in the box?

my blog is


Vin said...

Jay Tee (a.k.a Jeremy Thow),

Have a look at the header tip in this post :

10 Quick Tips for Smarter Blogging.

Jay Tee (a.k.a Jeremy Thow) said...

Hi again Vin!

Read your 10 quick tips, but somehow I can't center my header. Have already tried reducing the width of the image on my PC editor and uploaded the new image, but still it's the same.

I think it has something to do with the outer and header wrapper which I changed the width on..I simply can't find the right combination!

Pls advise..


Vin said...

Jay Tee,

Which browser and version are you using?

Jay Tee (a.k.a Jeremy Thow) said...


My Browser is Firefox v2.0.0.16

Vin said...

Jay Tee (a.k.a Jeremy Thow),

Go to Layout----->Pick New Template and reload your template.

Amy Kelly Photography said...

I am working on a customized banner. I uploaded it thus far, but it is not centered. I am not sure how to make it centered - any advice?


Vin said...

Amy Kelly Photography,

Have a look at the Header tip in 10 Quick Tips for Smarter Blogging.

Gellius said...

Hi Vin,

Thank you for the help you provided.
1. Now my header does not allow me to add a picture.
2. The "followers" widget, when added to the blog, does not display the "follow this blog" line.
Any suggestions?

Vin said...


What is the blog address?

Vicky said...

I'm not sure what I am doing wrong. I have followed the instructions for customizing the header but it is not changing. Can you help the helpless?

Vin said...


Exactly what did you want to change in it?

Vicky said...

I have added a background page behind the text. I tried to change the text and font but could not. I see these beautifully creative headers on some people's blogs. I don't know if they are doing them themselves in photoshop or what but I tried to create my own. I sent it to photobucket but when I try to put it on my blog either nothing happens or it ends up looking totally odd.

Joyce said...

Hi Vin,
I'm using the Minima stretch template and I have tried changing maxwidgets to 3 and addele to yes, but I get a Blogger error message and it won't let me change it. I want to put a picture on the left and header on right using a table. Can you help?

Vin said...


What is the exact error message?


I do not see any picture in your blog header.

Joyce said...

Hi Vin
I have changed to a different template now and I am able to change the widget# and showaddelement to yes, so perhaps it was because I was using the stretch template? Thanks for your very useful tips :)

Joyce said...

Hi Vin
I have arranged my header with picture on left and title on right, but the text is wrapping each word. Do you know how I can get it to display on one line? I pushed the text to the right by making the left margin 500px.

Vin said...


What is the blog address?

Joyce said...

My blog is at - it's an old blog which I'm using to test.

Thanks, Vin

Vin said...


Increase the width of the element :

#header h1 {
color: #ccccff;
font: normal bold 176% Arial, sans-serif;
width:500px !important;

It will only increase as much as allowed by the parent container.

Kate said...

hi... i came across your page and i found it really helpful. so right now, i'm experimenting with my blog.

everything's fine so far except that my header description is not centered, though my title is. what should i do to adjust it and move it to the center?


Vin said...


The header is centered because of the text-align line in this code :

#header {
margin: 0px;
border: 0px solid #ffffff;
text-align: center;

Add same line to the description code.

David ... U-410 said...

Hi Vin,

I have learned a lot reading your blog, many, many thanks. My problem now is that I have an animated banner on my header and it works perfectly in Firefox and Safari, but no so in Explorer; I'm not even sure if this is something I can fix editing the Template HTML in Blogger, but so far I have no clues. I added the banner through Page Elements.

David (

leah said...

hi there, how would you REMOVE the blog header section from the overall layout so that it is no longer there? i am trying to minimize the space between the top of my blog posts to the top of the actual page and i've tried removing all the margins and paddings from the header and it seems like i've reached a point where there are no more margins or paddings to remove. is it even possible to get rid of the header all together? it would be a great help if you could answer this for me because when i tried searching for this, this was the best answer to my question that i found and the rest was just mixing to remove the blogger navbar (which i don't want) to removing the actual blogger header (which i do want). would you be able to send me an email if you could answer this at: leah_t[at]hotmail[dot]com


Vin said...


In the unexpanded widgets template just delete the lines starting with :

<div id='header-wrapper'>

till the immediate next :


Camille Duckworth said...

Okay, so I'm looking for something tricky that might not be possible, well I know it is becuase i've seen it on a blog, but I want my header to basically be a slideshow, even if it's just 5 pictures. I read the link you had for changing the header picture and he has you clicking F5, which actually didn't work, but I was hoping for something that rotated the pictures on it's own. Have you seen this or know how to do it?

Vin said...

Camille Duckworth,

Put a HTML gadget in header. Then paste slideshow code in it.

jan said...

hello i've heard a lot about your work here and i'm hoping u will help me.

First let me tell you i have no knowledge absolutely about html and css etc.I had downloaded the 3 column version of the blogger denim template from a site and now nobody is able to leave comments in my blog.I am also not able to change the header image.

please do help i would really appreciate that.please.

shall i mail you my url,as u have mentioned not to include it in comments.waitin for u to help.

Vin said...


First Enable all comment settings.

Then click on 'Revert widget templates to default' link at the bottom of the Template code box on Layout--->Edit Html subtab.

Use this method to put image in header.

Mal said...

Hi there, I'm trying to edit my header section so that the header and description are on the same line. I'm using the Minima template. Do you think you could help me?

Vin said...


What is the blog address?

Mal said...

Oops I'm sorry..

Vin said...


You have reduced header width to 50px. Change the numbers here :

#header .description {
margin:0px 5px 5px;
padding:0 20px 15px;

The first figure is for top margin and padding, The next for the side margins and padding and the last for the bottom margin ad padding. Also you may need to modify :

line-height: 1.4em;

Pooja said...

hey vin
ur doing a great job here.. i have a question for u reg the header.. i want to have 3 images being parallel (Column)in my header.. but i'm not able to figure out how

this is my blog

Vin said...


Easiest method is to create a single picture by joining all 3 pictures in Paint program on PC and then upload it to header.

Roger Lim said...

Hi Blog Doctor,
One question ... When I want to sellect a photo from my computer, it always says that my photo is not valid. Why is this so ? Please help.

Vin said...

Roger Lim,

What is the file type or filename extension of your photo?

crumpylicious blog said...

Hi I hope you could help me...
My banner fits the page if using chrome but
it goes to the right if I use firefox

How could I fix this?

my header has the following codes
/* Header-----------------------------------------------*/
#header-wrapper{width:950px;margin:0px auto 0px;height:120px;overflow:hidden;}
#header{margin:0;border:0 solid} $bordercolor;color:$pagetitlecolor;float:left;width:47%;overflow:hidden;}
#header h1{margin:0 5px 0;padding:15px 0 0 10px;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;font-size:48px;color:#181919;}
#header .description{padding-left:15px;color:#636565;font-size:14px;padding-top:0px;margin-top:0px;}
#header h1 a,#header h1 a:visited{color:#181919;text-decoration:none}
#header h2{padding-left:15px;color:#736f74;font:14px Arial,Helvetica,Sans-serif}
#header2 .widget{padding:20px 10px 0 10px;float:right}

nicoleshe said...

Thnx for imparting this posting. It's very timely because I am trying pains like site that, also I'm actually considering attempting it myself.


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.