0 Image With Hover Effect As Blog Title In Blogger

We always prefer to use image as a blog header title instead of text, we even want it to be clickable and always be redirecting to the homepage, what else? Adding some beauty, like hover effect! Well, that's not possible if we simply add an image as title through "Page Header" widget in "Layout" section of Blogger and choosing "Instead Of Title and Description". Then how? Yup! Not that much difficult, its just a piece of cake.
Have a look to the DEMO HERE, and now lets move to the coding part. Log on to Blogger > Layout > (Make sure you are not using any image as blog title, if using get back to the text mode) > Edit Html > (Take a backup of your template) > Expand Widgets Template and find (Ctrl + F) ]]></b:skin> and paste following CSS codes just above it;

Code:

.title_H {
background: url(Your Blog Title's Main Image URL);
width:305px;
height:57px;
padding:0;
margin:0;
}
.title_H:hover {
background: url(Your Blog Title's Hover Image URL);
}

In the above CSS code replace the RED text with the URL of the main title image for your blog and the BLUE text with hover image URL. The PINK texts are for the width and height of the images which you have to change in respective of your main title and hover images' width and height (main title image's and hover image's width and height should be equal).

Now, find (Ctrl+F) the follwing series of code;

Code:

<b:includable id='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>
</b:includable>

and replace it with the series of code given below:
Code:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<a expr:href='data:blog.homepageUrl'><p class='title_H'/></a>
<b:else/>
<a expr:href='data:blog.homepageUrl'><p class='title_H'/></a>
</b:if>
</b:includable>

And, finally, save the template and enjoy a new blog title style!