Skip to main content

Customising The Page Header

Earlier, I wrote about how to Restore The Main Page Link To The Title, in a New Blogger (2007) blog. That was a hack, and a messy one at that. Blogger fixed that little omission, so it's no longer necessary. The blog title is now clickable, and links back to main page view - in a blog with default setup - just as it did for a Classic blog.

But it's still boring text - a title, followed by a description.

So some will ask
How do I customise my blog header? How do I (for instance) replace the boring text title with a picture?


You have several choices here.

The easiest, and probably the most popular, will be to use the "Configure Header" wizard in Page Elements.

The least popular will be as you would in a Classic blog, to edit the template HTML.

The choice with the most possibilities will be to use the GUI Page Layout editor, and replace the standard blog header with a hand created HTML / JavaScript gadget.

Go into Template - Page Elements. Edit the Blog Header element.

You have several choices here, with the Blog Header.
  1. Put code into the Blog Title field. You could put both a link and an image into there
    <a href="http://blogging.nitecruzr.net/index.html">
    <img border="0" src="http://photos1.blogger.com/blogger2/
    560/527000594325287/1600/RBS%20Header%201.gif"/></a>

    except for one major problem. It just won't fit.
  2. You could put the code into the Blog Description, except for another limitation. You can't have a blank Blog Title field. If you put your header code into Blog Description, what can you put into Blog Title that doesn't look tacky?
  3. I prefer to get rid of the Blog Header altogether, and replace it with a straight HTML page element.
  4. You could remove the Blog Header, and replace it with a background image.
See my article The Real Blogger Status: What's In The Header or How Do I Keep My Blog Searchable? for more discussion about this issue.


If you're lucky, you can just remove the Header page element.




If not, you won't be able to remove it, immediately.



If you see the second image - ie no "Remove Page Element" button, go to Edit HTML. Find the section of code


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='The Real Blogger Status Beta (Header)' type='Header'/>
</b:section>
</div>


and change "locked='true'" to "locked='false'".

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='The Real Blogger Status Beta (Header)' type='Header'/>
</b:section>
</div>


Then Save Template. Go back to Page Elements.


Now you can just remove the Header page element.






Now, just add an HTML / JavaScript gadget. Put whatever code you wish, in the body of the element.


<a href="http://blogging.nitecruzr.net/index.html"><img border="0" src="http://photos1.blogger.com/blogger2/560/527000594325287/
1600/RBS%20Header%201.gif"/></a>
<p align="center">What Blogger won't tell you.</p>


The added element will be in the sidebar, or the footer (wherever you created it), so grab it, drag it, and drop it into place atop the blog, where the Header element used to be.

Positioning the new header will require some experimentation; when you move the new element over the area where the header should be, it may drop centered on top of the post column. When it does this, move it ever so gently upwards a couple pixels or so, until it positions properly. When it is properly positioned, release it, and it will fall into place, properly positioned and sized.

Save the changes to the Layout.

Now add or update the meta tags, in the blog header. This gives you an attractive entry in a search hit list.

And finish the job properly - remove the ugly boxes, that are placed around the header by most default templates.

(Edit): In case you're wondering, making the header itself was easy, and involved no expensive software.
  • I used Microsoft Word to make the characters.
  • I did a Print Screen (Alt-Print Screen) to copy the image to the clipboard.
  • I pasted the image into Paint.
  • I saved the image as a .bmp file.
  • I used Irfanview (freeware) to trim the image, resize it, and make it into a .gif with a transparent background.


>> Top

Comments

Kimberly said…
I think I spent two hours trying to figure out how to do this! Thank you - thank you - thank you!
Meghan said…
This helped me so much. Thanks.

Popular posts from this blog

Custom Domain Migration - Managing The Traffic

Your blog depends upon traffic for its success.

Anything that affects the traffic to your blog, such as any change in the URL, affects the success of your blog. Publishing the blog to a custom domain, like renaming the blog, will affect traffic to your blog. The effects of the change will vary from blog to blog, because of the different traffic to every different blog.Followers. People who find your blog because of recommendations by other people.Search engines. Robotic processes which methodically surf your blog, and provide dynamic indexing to people who search for information.Subscribers. People who read your content from their newsfeed reader, such as the dashboard Reading List.Viewers. People who read your content from their browser.No two blogs are the same - and no two blogs will have the same combinations of traffic sources.

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.