Blogger Template Hacks: Putting a Logo in Your Header

In an earlier post, I described some of the work I have done to date to customize the default Blogger template for a less off-the-shelf look and feel.

After adding a background graphic, categories, and a post auto-link, I set out to enhance the header. I wanted to make use of this prime screen real estate to promote my feed. This proved easy to do.

It's equally easy to include a logo or other graphic in the header, though how you proceed will depend on whether you retain or replace the existing title text.

Retaining the Title Text
If you wish to keep the existing title text, including a graphic in your header is easy. The key here is that you can put HTML, including the <IMG> tag, in Blogger's Title and Description fields. To add a graphic to existing text:

• Open the Settings > Basic tab
• Click in the Title field, to the left of your title text
• Type the <IMG> tag, pointing to the location of the image you wish to use, as in
  <IMG SRC="[your domain and filename]">
• Save your changes and preview your blog

You're done!

Replacing the Title Text
Things get trickier if you want to replace the contents of the Title field with graphically stylized text. Sure, you can paste an <IMG> tag into the field, but if you eliminate the title text, your blog name won’t show up anywhere.

A better approach is to use the CSS Fahrner Image Replacement (FIR) technique, an elegant solution that’s at the heart of CSS-intensive sites like ZenGarden. In a nutshell, the FIR technique uses stylesheets to replace text with an image, essentially hiding the text from standards-compliant browsers.

This is accomplished by creating a style that sets the text to display: none. Then another style displays a background image instead of the hidden text. You use CSS to control the positioning of the replacement image.

This approach introduces accessibility barriers because display: none renders any element with this declaration invisible to certain screen readers (and possibly to search engines as well). Many people are working on FIR variants that address this problem. In the meantime, I decided to try a compromise solution. Feel free to change the settings below to work for you:

• Open your blog template
  
• Place an empty <SPAN></SPAN> container in the Header area, after <$BlogTitle$>. You will use this to hook a style onto in a moment.
  
• Scroll up to the style declaration part of your template, and modify the #blog-title style. (Instead of display:none; I used the attributes below. Setting the font-size to 2% makes the title all but invisible, but keeps it there for search engines and screen readers. At least that’s my theory — I have no way to test this.)
  #blog-title {
  font-size:2%;
  line-height:1.2em;
  font-weight:normal;
  color:#ffffff;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.2em;
  }
  
• Create a new style called #blog-title span, as per the example below. You will need to experiment a bit, but basically this code centers a graphic over the hidden text. The background:url argument specifies the image to use.
  #blog-title span {
  display:block;
  top:0;
  width:334px;
  margin-top:10px;
  margin-right:auto !important;
  margin-left:auto !important;
  z-index:1 !important;
  height:60px;
  background:url("[your domain and filename]") no-repeat;
  cursor:hand;
  }
  
• Save your template changes and preview your blog.

Hope this works for you. For more on Farner Image Replacement, see:

MezzoBlue: Revised Image Replacement
Seamus Leahy: No Span
Well-Styled.com Tutorial (the method I used)
A List Apart: Facts & Opinions About Fahrner
Dave Shea: In Defense of Fahrner
StopDesign Tutorial

If you find these solutions helpful, sign up for our feed to be sure to receive new articles promptly.