Skip to main content

Replacing The Blog Title With An Image

Those of you who are artistic, and handy with Photoshop or another image processor, eventually decide that having a blog labeled in text is boring. So you spice it up. And one of the easiest things you can do is to replace the blog title with a picture.

(Question): Does this blog use a Layouts template? If so, read about Customising The Header In A Layouts Template Blog, first.

(Note): The code below has extra line breaks liberally inserted, to avoid yet another post / sidebar alignment problem.

The hardest part in doing this is to get the image hosted somewhere. If you use Flickr, Photobucket, et al, this is not an issue (hopefully you know the URL). You can't do image upload when editing your template. If I want my image hosted by Blogger, this is what I do.
  • Create a new post in the blog, and Title it "Photos" or whatever.
  • Upload my picture to the post.
  • Look carefully at the code created in the upload. In my case, I have
    <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
    href="http://photos1.blogger.com/blogger2/
    560/527000594325287/
    1600/RBS%20Header%201.gif"><img
    style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;"
    src="http://photos1.blogger.com/blogger2/
    560/527000594325287/
    320/RBS%20Header%201.gif"
    border="0" alt="" /></a>
  • My picture is now
    http://photos1.blogger.com/blogger2/
    560/527000594325287/
    1600/RBS%20Header%201.gif
  • Very important: Save the post as Draft. I don't want my title image showing up in a post, in the middle of the blog. Untidy to say the least.

Go to template edit.
  • Find the coding for the blog title.
    <ItemPage><a href="<$BlogURL$>"></ItemPage>
    <$BlogTitle$>
    <ItemPage></a></ItemPage>

  • And replace it with
    <ItemPage><a href="<$BlogURL$>"></ItemPage>
    <img src="http://photos1.blogger.com/blogger2/
    560/527000594325287/
    1600/RBS%20Header%201.gif">
    <ItemPage></a></ItemPage>

  • Save, and Republish.


Easy, no? That part was. To make it as it is now (see the top of the blog), you'll have to do just a little more work.

>> Top

Comments

sjogro said…
nice work, i use the same way to add nifty icons as links to my blog. however, for the title bar there is a problem. i have a custom domain name for my blog, and right now blogspot doesn't allow displaying 400p images from a non google adress (for example; any custom domain)...

so, if you have a custom domain, do not host your title bar (or any image larger than 400p) at blogspot but at some other place. i've read that they're working on this.

this limitation is currently labeled as a bandwidth control limitation for the blogspot servers.

hope this information is useful to you, (reader)!
CreativeTeXt said…
Awesome tutorial. Been busy for hours fixing this issue. Finally the right code on the right place, ie the header div.

Thanks man.

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.