Replacing Blogger Widget Title With an Image

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 style, 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 of my RSS gadget, the title is “RSS”, so I enter title='RSS' in the search box. You may find this set(or something close to this) of codes:

<b:widget id='HTML1' locked='false' title='YOUR_GADGET_TITLE' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget>

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


  

<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!