How to Replace Sidebar Widget's Title with an Image

How to replace blogger sidebar widget title with any customize image would be a good hack for so many blogger's. I have noticed that in blogger help forum many of the blogspot users are asking for the help about how they can put an image instead of sidebar title.

suppose you need to put an image Replacing title in your sidebar with image can be very helpful when you want to design your custom design unique blog.

Demo Question asked by: Matthew Floratos
I'm looking to replace the traditional side bar title like "Archives" or "Tags" with images so that I can match the blog's aesthetic with fonts not available to Blogger. I've looked around in the template HTML, but it's a bit above me. Can anybody give be a quick pointer as regards to how I can replace widget names, which are traditionally text, with images? (If it's even possible at all, that is.)

So below here you will find the steps through which you can replace the title of the widget with image and yes answer of the question given above.

Prerequisites: You have already every image which you are going to replace with title text in sidebar.

# Step 1: Go to your Blogger Dashboard and Navigate to Layout > Edit HTML Section and check Expand Widget Templates check box.

layout edit html expand widget template

# Step 2: Then use "Ctrl+F" to search for id='BlogArchive1' (for Archives gadget).
You may find this set(or something close to this) of codes:
<b:widget id="BlogArchive1" locked="false" title="Archives" type="HTML">
<b:includable id="main">
<b:if cond="data:title != &quot;&quot;">
<h2 class="title">

# Step 3: <data:title></data:title> is your sidebar title data tag and is responsible for display the title text for that widget. To use an image, replace it with your image source URL like this:
<img src="YOURI_IMAGE_URL" alt='Image Name' /># Step 4: Save your template and done :)

4 Responses to "How to Replace Sidebar Widget's Title with an Image" - Leave a response

  1. Piyush - Admin @ Best How To Blogger September 9, 2010 at 1:14 AM
    @hamzah ian, where do you confuse? have you stuck any where?
  2. Daniel Skaftouros January 15, 2011 at 1:10 PM
    I tried this a number of times but it still doesnt work. I tried it with every link i was given by imageshack. I don't know why it's not working. Just to be sure; 'image name' is... what exactly?

    Daniel :)
  3. Piyush - Admin @ Blogger How To Tips January 15, 2011 at 7:28 PM
    Can you share you imageshack image url and also share your blog address after implementing the code i have given above.

Post a Comment

^ Scroll to Top