Replacing Blogger widget’s 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 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:
- Login to your to your Blogger account.
- Go to Dashboard > Design > Edit HTML.
- Back up your template.
- Tick the Expand Widget Templates checkbox on top right of the HTML window.
- 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 != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget>
- 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. - Preview before saving.
- 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"
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.
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???
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.
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?
Termite information,
I guess so. But I'm more interested in the potential incoming traffic.
Dear Green
Can this be apply to Page Title as well?? can u tell me how do it?
@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.
@Sara
oops..."use conditional tag to that particular hide Page title" should've read "use conditional tag to hide that particular Page title"
Instead of replacing it with an image how do you make the title font smaller?
@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.
Perfect, thank you so much!
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/
@Lynn
Sorry for the late reply. I'm glad you've found a way to do that.
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?
@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.
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?
How to make it clikble link as image title
@Futilitiesandmore
Your file host (http://www.mdn.fm) doesn't seem to allow image hotlinking.
Why not let Blogger host the images?
@Samir Safadi
Use this code in step 6:
[a href="YOUR_TARGET_URL"][img src="YOUR_TITLE_IMAGE_URL" alt="YOUR_GADGET_TITLE"/][/a]
Thank you it works!!!!
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.
@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.
cool thank you for this you always give easy and simple tutorial for any blogger tricks thank you alot!
Awesome! Finally I replaced those ugly signs hehe thank you!
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
@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}
Thanks, saved me loads of nerves :D
awesome post , thanks for the tutorial
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.
Awesome, thanks! :D Worked like a charm!
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!
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.