Replacing Blogger widget title with an image

If Google brought you here, then you might quickly realize that the gadget / widget titles in the screenshot are not actually titles. They are images, occupying the title slots . Why do some people put images there when they can do it with texts? Well with text, you only have limited choices of fonts and styling. If you want to use a unique font or styling like in the screenshot, then image is the only way to go. You can make the a title using a graphic software or using an online graphic generator. I made the title at CoolText.com).
Okay back to the tutorial. So how do we go about replacing a Blogger widget title with an image? Here’s how:

1. Login to your to your Blogger account.
2. Go to Dashboard > Layout > Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates checkbox on top right of the HTML window.
5. Use Ctrl+F to search for the gadget title (that you want it replaced with an image) in your HTML code. For example for my translation gadget, the title is “Translate This Page”, so I enter title='Translate This Page' in the search box. You may find this set(or something close to this) of codes:
   
   
   
   
   

   01	<b:widget id='HTML1' locked='false' title='YOUR_GADGET_TITLE' type='HTML'>

   02	<b:includable id='main'>

   03	<!-- only display title if it's non-empty -->

   04	<b:if cond='data:title != &quot;&quot;'>

   05	<h2 class='title'><data:title/></h2>

   06

   </b:if>

   07	<div class='widget-content'>

   08	<data:content/>

   09

   </div>

   10	<b:include name='quickedit'/>

   11	</b:includable>

   12	</b:widget>

   
   
   
   
   
6. Replace the data tag <data:title/> with an image tag:
   
   
   
   

   1	<img src="YOUR_TITLE_IMAGE_URL" alt="YOUR_GADGET_TITLE"/>

   where YOUR_TITLE_IMAGE_URL is the link to your image file.
   
   
   
   
7. Preview before saving.
8. Enjoy! 

Greenlava