BLOG TUTORIAL : How to replace sidebar widget's title with an image?

Hello everyone!

Some people has been asking me how did i replace my sidebar title with an image. 

So this tutorial is for YOU! :D 

Look at my sidebar! Pretty, no? HAHA! 

Anyway, it's so simple and! Only 3 steps.

1. Prepare an image. Make it pretty! :) Maybe around 35x180 or so. Just play around with the size so that it fits your sidebar.

2. Upload your image to an image hosting website. I'll always go for Photobucket. But you can use any website you want. Just remember to get the direct link!

3. Go to Design > Edit HTML
Okay. So the first thing you should do is Expand Widget Templates. Its on the top right of your html code.

Now you have to search for id='BlogArchive1' (this is for Archives gadget)
Just click Ctrl + F and paste this code there.

You will find this set of codes (or something similar to it)
<b:widget id='BlogArchive1' locked='false' title='Archives' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>

Found it?

Okay now...
<data:title/> is your sidebar title data tag. To use an image, replace it with <img src="YOURI_IMAGE_URL"/>

So your final code will look a little something like this
<b:widget id='BlogArchive1' locked='false' title='Archives' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/><img src='YOURI_IMAGE_URL'/></h2>

To look for other sidebar widgets just search id='YOUR SIDEBAR TITTLE'
Example : I'm looking for my twitter sidebar id='Twitter'

Any questions, just ask me :)