Spread the Word

Site Feed



Powered by FeedBlitz

There was an error in this gadget

Subscribe with ...

  • Add this blog to my Technorati Favorites!
  • Subscribe in Bloglines
  • Subscribe in NewsGator Online
  • Subscribe in Rojo
  • Add Random 

Bytes (WebLens Blog) to Newsburst from CNET News.com
  • Add to Google
  • Add to My AOL
  • Subscribe in FeedLounge
  • Add to netvibes

Translate This Post

Burn a Feed

Ping the World

Thursday, January 26, 2006

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.

32 comments:

Richard said...

Wow! I might just have to take the time to learn more HTML. Your customizing tips are awesome, I'd love see what your tips for promotion will be. My blogs could use some, or at least I need to figure out how to retain regular readers rather that the constant stream of search browsers I get (not that I'm complaining too much, I do have about five regulars). And thank you for the blogroll link, it's always so exciting to see that somebody is going to be visiting regularly.

Pam said...

Back atcha Richard. I enjoy your blog too. (Great source of links to interesting web destinations, folks :-)

And thanks for the virtual hug; I agree it's nice to know someone's not just reading, but benefiting from all our hard work.

fulcrumsf said...

Great tutorial, I however can't seem to get it to work properly, I think I might have not done the tutorial correctly because my Title & Desription text are still visable. When I add the (display:none;) to my css it takes away the text, but also takes away the image I am trying to replace it with. I placed the span tag in after the <$BlogTitle$> but I noticed in the template that it is after the head closing tag. Not sure if that matters. the url is blatantlyspeaking.com if you have any suggestions it would be greatly appreciated. Thanks

Pam said...

Hi fulcrumsf,
I took a look at your blog source code. You have placed the SPAN in the right place, but I note your blog-title style sets font size at 150% and colour to blue. My example formats it white, at 2% size (so it's still available to search engines and text readers). In IE, you can't see it; in Firefox, it's so tiny, I can live with it.

Other common solutions include using a large negative text indent, or setting its height to 0 and overflow to hidden. With all of these, you shouldn't need display:none;

Hope one of these works.

fulcrumsf said...

Thanks Pam, I will try one of these methods.

Dusty Dog said...

Pam, your hacks are great. I'm at the relatively early stages of this learning curve, and you've given me the impetus to do this. But, I'm not quite there.

I have added a logo to my title, but two things happen:
first, it drops everything down quite a bit, but I would prefer that the title go to the left of the logo, for obvious reasons.
Second, now the title of the page, as it displays on the browser tag (I use Seamonkey) is the entire img src..... It's pretty ugly.

I'd love to get some hints from you if you've got the time. I'll just leave things the way they are in the hopes that you'll take a look.

Thank you so much

Pam said...

Hi Dusty Dog. Thanks for your kind words here and for your support on the blog theft issue.

Re your title problem, without looking at your source code, I'm guessing that the style for the title graphic includes "display:block;". Try changing this to "display:inline;". You'll probably have to change some other settings too, to position it where you want it.

Re the code showing in the title bar, I'm guessing that you've put the img src code in the title field, which is quick and easy. You might want to try the second approach I outline in this post, which gives you much more control.

Hope this helps.

Dusty Dog said...

Pam, I did a complete work-around, because I'm an html idiot (learning verrryyy slooowly). I downloaded a free template that gave me the ability to insert an entire header into it. I did that, then took your advice and buried by blogger title into my header photoshopped title. I made the text 2%, and you cannot even see it. thanks for that tip. Did me wonders.

I also did a bunch of recoloring and some resizing, because I just hate the very narrow spaces for the main comments. I widened the whole thing. I'm going to experiment with widening it to a full page, maybe allowing flexible images code that displays according to the resolution, rather than being stuck with horizontal scrolling, which sucks. I just don't know how to do that yet, but I suspect it's possible.

In a way, I'm glad I did this all my way, instead of going about doing it your way, not because your way was wrong (I'm sure it was excellent), but because I was working with garbage to begin with. Hehehe

But, if you don't mind, I have one more problem. If you go to my site, you'll see that in my profile part, the text is below and to the right of my avatar/photo (that's my dog; ain't she beautiful?), rather than to the right and inline with the photo, like it should be. For the life of me, I cannot figure out where to fix that, and I've been through the code umpteen times. It's not a terrible thing, but it's bothersome.

By the way, do you design templates for a living? Actually making money off your hard work and knowledge? You should. I'd even think about paying you to make my site something very unique. As you can see, I just hated the standard blogger templates, and I even switched over to Wordpress, http://dustydoggie.wordpress.com , until I quickly figured out that you cannot edit template code there. Screw that. Just a thought.....

Pam said...

Hi Dusty Dog. Without examining your code, I'm guessing that your profile text is wrapping below your avatar image (the dog photo) because the cumulative width of the two elements is too wide for the column. You could try increasing the left sidebar width (in which case, you'd need to also increase the overall layout width), or decreasing the width of the text block. Putting a line break <BR> in front of the word "New" might also do it.
Hope this helps.

PS I don't design templates for a living, but thanks for your vote of confidence.

big pinkin said...

i would like to kee the text and add a picture. i followed ur instructions but the whole link to the pic wont fit in the title. im using imageshack. the link is too long. is there somewhere else that i can host the pic where the link wont be so long? thanks

big pinkin said...

ok i was able to add a pic to my header but something is wrong. the header moved down a bit and i can see some words behind the blogger tool bar up top. and also in the explorer blue bar up top it says the link of the pic intead of the name of the blog. can u help please? thank youuuuuuu

Pam said...

Big Pinkin .. I'm not quite sure I understand your problem, and I can't see an image on your blog, but you might try Flickr for image hosting. It's hard to answer your second question without being able to see the problem, but try the second technique in this post. To address the spacing issue, you may need to modify the styles that format the header, or create one especially for the image.

Matt said...

Hey...I just want to put an image in as my header, and retain none of the original text and border. How would I go about doing that? Thanks!

Pam said...

Hi Matt, I don't know if you're using the same template as I am, but basically, just follow the process outlined in the part of this article under the heading "Replacing the Title Text". If there's an undesired border in your template, remove the border declaration from the style that formats the header.

Matt said...

everything went well until the last step, at which point if I copied and pasted the code into the specifiend field. I put the desired url into the code but the picture still did not show up. I am using the "Minima Black" template.
ps how do i remove the border around my former title (unless that is not necessary)?

Jim McKee said...

I don't know if this works with all templates, but with Minima templates, if you want to remove the title text from the blog page, but keep it in the title bar, find the section that starts with:

[div id="header"]

and delete this: [$BlogTitle$]. That's it.

(The real brackets are angle brackets, not the square brackets I used.)

Pam said...

Hey Jim, thanks for the tip. There's always so many ways to do things with code.

pusa said...

hi, first i wanna thank you for giving this tutorial... i've been trying to figure out how to replace the title/header with an image i like but to no avail.. good this i was able to find you site via google... well done.

i was able to show the image but it doesnt show pusang maganda, cant apply the span script because if i try to add it in my template, i get an error that it is not allowed or there's a major error

this is where it appears in my html code (i'm using black minima)

title='<img src = "http://i145.photobucket.com/albums/r227/heyokity/pusangmaganda.jpg"> (Header)' type='Header'/>



thanks again
pusa

Anonymous said...

How do you add content blocks on both side left and right.The default template allows only on one side.Here you have archives on the left side and 'about me' on the right.How do you do that?

Pam said...

Anonymous,
How to achieve the 3-column layout you describe is detailed in this post. Hope you find it helpful.

Pam said...

Pusa,
It's hard to troubleshoot your problem without seeing the code in its entirety. If span isn't working, you might try the technique described by Jim (posted above your comment). Open your template and find the section that starts with
<div id="header"> and delete this: <$BlogTitle$>.

Pam said...
This comment has been removed by a blog administrator.
Leanne Brischetto said...

You're a gem!! I have been looking for hours on end to find out how I could remove my title text from my blog ... thank you SO much!

SenSei Baits Co. said...

I just figured it out, just add basic html title tags just below the starting head tag (view my site coding).

Then to add my title graphic, I did the above directions, where you go into the settings > basic section, added in my logos web address into the title field w/ the basic html img coding "img src" code. Don't add the closing "a" tag, as there is no need to. That should solve it. It worked for me at least :) Here's my working version: http://senseibaits.blogspot.com

Pam said...

You're welcome Leanne :-)

Pam said...

Glad it worked for you, SenseiBait.

Mrs Dynamite aka Lorena +Wonder Women... said...

Hi Pam I Cant find the <$BlogTitle$>.. I bein looking for it for 3 hours :(

Pam said...

Hi Lorena,
These instructions apply to Blogger classic. Perhaps you're using the new Blogger widgets template? Editing its code is unfortunately a much more complicated process.

Mrs Dynamite aka Lorena +Wonder Women... said...

LOL yeah thats why ! I was crasy lokking for that LOL thank you Pam I love your site! is super !!

Love Web Design said...

Excellent! I love it all - Thanks to everyone for links and tips so far :)

_writer said...

Hi Pam,

Congratulations on a well-written and informative site that assists new bloggists like myself. You were one of the first sites I found that helped me demystify the ubiquitous "minima template".

I am seeking permission to post your link on my own blog site at:

http://writersblocktower.blogspot.com/

Please let me know if you can.

Kind Regards, Neil.

Lora said...

Great Tutorial Pam...however i tried it a couple of times and it does work properly...:)

Thanks a Lot!!