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): Is this a Beta blog? If so, read Customising The Header In A Beta 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 header above), you’ll have to do just a little more work.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: