Replacing Blogger Blog Title with an Image

Blog Title - With Text

Blog Title - With Image

You can see in the above images the differences in blog title, the first one is having text title but the later one an image title. Replacing the text title with an image enhances the look of your blog. You can put any image you want to on your blog title area. There is a little procedure to get it done. How, let's see:

First of all, you will have to create an image title of your blog using any image editing software (I use GIMP2.6) or you can use online tools, example: logomaker.com or cooltext.com. But the size of the image should be in such proportion that it may not look ugly or disturb any ad banner if you use on right side of the blog tiltle (for example, have a look at the top this blog, here I am using image title without any disturbance to my ad banner at right side of it.) And one important thing, if you use single line or say, short description or quote below your blog title then try to add that along with title image (see mine on the top of this blog).
Next step, log on to your blogger account and from the dashboard click on layout of your blog and then edit html. Now before making any changes in your templates source take the backup of it, to do so click on Download Full Template and follow the steps.
Now click check 'Expand Widget Templates' and scroll down to the find the following line:

Code:

<div class='titlewrapper'>
 <h1 class='title'>
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
     <data:title/>
   <b:else/>
     <a expr:href='data:blog.homepageUrl'><data:title/></a>
   </b:if>
 </h1>
</div>
<div class='descriptionwrapper'>
 <p class='description'><span><data:description/></span></p>
</div>

Replace the above lines with the following code in your template source:

Code:

<div class='titlewrapper'>
 <h1 class='title'>
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
     <a expr:href='data:blog.homepageUrl'><img src='Your Image URL'/></a>
   <b:else/>
     <a expr:href='data:blog.homepageUrl'><data:title/></a>
   </b:if>
 </h1>
</div>
<div class='descriptionwrapper'>
 <p class='description'><span><!--No Description --></span></p>
</div>

Make sure to change the red text in the above code with your image source URL and for the blue text you will have to make sure that your are not using large description, if you have added your blog description or quote along with your image title then its ok, leave it intact but if you don't want to use your description within image title then chnage the blue line i.e.  with <data:description/>. (you may face problem in adjusting title image if use large text decription)
Now preview your blog and if you find it ok, save it and enjoy a new look of your blog.

For any further query or help please feel free to contact me!