Skip to main content

Replacing The Blog Title With An Image

By
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
Labels:

Comments

Anonymous 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)!
20/11/07 05:45
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.
17/5/08 14:02
Post a Comment

Popular posts from this blog

Add A Custom Redirect, If You Change A Post URL

By
When you rename a blog, the most that you can do, to keep the old URL useful, is to setup a stub post , with a clickable link to the new URL. Yo! The blog is now at xxxxxxx.blogspot.com!! Blogger forbids gateway blogs, and similar blog to blog redirections . When you rename a post, you can setup a custom redirect - and automatically redirect your readers to the post, under its new URL. You should take advantage of this option, if you change a post URL.
Post a Comment
Read more

Jump Break Is Visible Only In An Index Page

By
Some blog owners are unsure what a Jump Break looks like, when applied to their blogs. Occasionally, in Blogger Help Forum: Get Help with an Issue , we see the confusion. Where's the Jump Break? or I added a Jump Break to several posts, but it never shows up! When asked for a screen print of what they're seeing, they may provide a image of the post, in the Post Editor Preview window - or possibly, the published post, but in post page view.
Post a Comment
Read more

Leave Comments Here

By
Like any blogger, I appreciate polite comments, when they are relevant to the blog, and posted to the relevant article in the right blog . If you want to ask me a question thats relevant to blogging, but you can't find the right post to start with (I haven't written about everything blogger related, yet, nor the way things are going I don't expect to either), ask your questions here, or leave an entry in my guestbook . As noted above, please note my commenting policy . If you post a comment to this post , I will probably treat it as a "Contact Me" post . If you have an issue that's relevant to any technical issue in the blog, please leave a comment on the specific post , not here. This post is for general comments, and for non posted contact to me. If the form below does not work for you, check your third party cookies setting! For actual technical issues, note that peer support in Blogger Help Forum: Something Is Broken , or Nitecruzr Dot Net - Bloggin...
313 comments
Read more