Replacing Blogger widget’s title with an image

widget title image 1If 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 text 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 > Design > 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:

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

Note: This method won’t work on a Followers gadget. As a workaround, you can put the title image in a Picture gadget. Then place the gadget above the Followers gadget. And make sure you leave the title box of the Followers gadget blank.

Update: Good news, now you can use custom fonts, using Google Font API.

33 comments to "Replacing Blogger widget’s title with an image"

Termite information November 16, 2009 at 12:30 PM    

Thanks for sharing this nice post.I also used free blogs like Blogger but they deleted all my files without giving me any notice about it. So I decided to buy my own web host from "mydomainvault" company and now I have peace of mind that it'll never be deleted again.

vsnraju December 1, 2009 at 11:15 AM    

i tried to work it on my blo..but unfortunately in my code i have morethan 5 or 6 tags..where should i have to replace it???

Greenlava December 1, 2009 at 11:21 PM    

vsnraju,
You have to decide beforehand which widget/gadget title you want to replace with an image, then proceed to step 5.

I Really enjoy this post.Thanks for sharing this great experience.

Termite information December 11, 2009 at 6:19 PM    

If I put a link into a widget on widget box, does it count as a site link back when installed on a users page? If 100 people install my widget on different pages, is that 100 link backs as seen by the grading websites and yahoo/google?

Greenlava December 12, 2009 at 1:09 PM    

Termite information,
I guess so. But I'm more interested in the potential incoming traffic.

Sara July 1, 2010 at 11:12 AM    

Dear Green
Can this be apply to Page Title as well?? can u tell me how do it?

Greenlava July 2, 2010 at 3:54 PM    

@Sara
I guess not. Page titles and post titles share the same code in Blogger template. If you apply an image to a page title, then all page titles and post titles will show the same image.
But there is another option, use conditional tag to that particular hide Page title, then put the image tag at the beginning of the page.
Read Apply different layout/styling to static pages to learn what code and where to add, and Display widget on specific pages in Blogger to learn which conditional tag to use.

Greenlava July 2, 2010 at 3:57 PM    

@Sara
oops..."use conditional tag to that particular hide Page title" should've read "use conditional tag to hide that particular Page title"

Lynn Pratt August 9, 2010 at 11:56 PM    

Instead of replacing it with an image how do you make the title font smaller?

Greenlava August 10, 2010 at 1:26 AM    

@Lynn
The widget title grew so big due to this HTML code that's mistakenly placed in CSS section of your template:
[!--Navigation page element starts --]
[div id='navibar-wrapper']
[b:section class='navibar' id='navibar' showaddelement='yes'/]
[/div]
[div style='clear: both;'/]
[!--Navigation page element ends --]

find and remove it.

Lynn Pratt August 10, 2010 at 7:02 AM    

Perfect, thank you so much!

Lynn Pratt August 10, 2010 at 5:48 PM    

I am also trying to figure out if I can make my post squares go side by side and then under each other instead of directly under each other. This is for the blog I am talking about.
http://stampndesigntemplates.blogspot.com/
I am stumped on this one but have seen other sites do it like here.
http://www.remarkablestampers.com/

Greenlava August 16, 2010 at 10:50 AM    

@Lynn
Sorry for the late reply. I'm glad you've found a way to do that.

Venassa December 16, 2010 at 11:28 AM    

I got this to work with all widgets except for my 'followers' widget. Am I able to do it with that one or am I just doing something wrong?

Greenlava December 16, 2010 at 3:29 PM    

@Venassa
Apparently it doesn't work with Followers widget.
Try this for a workaround:
Leave the Followers widget title box blank. Add the title image to a Picture gadget. Place it on top of the Followers widget.

Futilities And More February 4, 2011 at 2:30 AM    

Hi.
I install the code which works very well on Chrome but not on Safari ou Firefox.
At place of the image, it says: Access Denied! This file is not available because you are either not logged-in or do not have the owner's permission to view it.
Could you help me?

Real Estate Snatch February 4, 2011 at 5:21 AM    

How to make it clikble link as image title

Greenlava February 4, 2011 at 11:34 AM    

@Futilitiesandmore
Your file host (http://www.mdn.fm) doesn't seem to allow image hotlinking.
Why not let Blogger host the images?

Greenlava February 5, 2011 at 2:24 AM    

@Samir Safadi
Use this code in step 6:
[a href="YOUR_TARGET_URL"][img src="YOUR_TITLE_IMAGE_URL" alt="YOUR_GADGET_TITLE"/][/a]

Futilities And More February 6, 2011 at 7:21 AM    

Thank you it works!!!!

Feey1 June 7, 2011 at 9:33 AM    

I tried it. The image appeared but no text. I made sure there was text, I put it in the right place, and tried several images. Still nothing.

Greenlava June 7, 2011 at 3:31 PM    

@Feey1
If you want to show the title (text) too, use background image.
This is the CSS code for that:
.sidebar h2 {background:url('PUT IMAGE URL HERE') no-repeat;}

Apply the CSS code following this tutorial.

Sudeep Acharya July 14, 2011 at 6:42 PM    

cool thank you for this you always give easy and simple tutorial for any blogger tricks thank you alot!

Funster,  February 18, 2012 at 6:29 AM    

Awesome! Finally I replaced those ugly signs hehe thank you!

Shan @ Design Gal March 2, 2012 at 12:53 PM    

What if I don't want add an image, but rather just change the "Categories" label on the configure labels widget to look like my page buttons above in my blog?
http://saltlakedesignergal.blogspot.com

Greenlava March 2, 2012 at 10:07 PM    

@Shan @ Design Gal
Remember our previous discussion on styling the page tabs?
We applied the styling (using styling codes) to the tabs via the selector .PageList li a:
.PageList li a {STYLING CODES HERE}

to apply similar style to widget title, simply add widget title's selector to the existing selector, like so:
.PageList li a, .sidebar h2 {STYLING CODES HERE}

Ula May 21, 2012 at 3:33 AM    

Thanks, saved me loads of nerves :D

french blogger September 22, 2012 at 4:39 AM    

awesome post , thanks for the tutorial

Roulette Online Strategies October 31, 2012 at 11:34 PM    

Exactly what I was looking for. It was ok using images-widgets over other widgets as titles BUT actually doing this trick was much nicer. It is so cool what you can do with a blog.

Anonymous,  March 18, 2013 at 4:30 AM    

Awesome, thanks! :D Worked like a charm!

Jessie Xiong March 31, 2013 at 8:55 AM    

Hi, this is super helpful! but I still cannot work out the follower widget....
I don't understand what do you mean by 'put the gadget above the follower gadget'... can you make a separate tutorial for it please ?
Thank you!

RapidRoaR April 14, 2013 at 1:02 PM    

Thanks, Images instead of Text giving Attractive look to my Blog.
Helped a lot and Hope this look of widget attract my readers towards new posts.

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.