Ever wonder how to change that text title for your widgets to your own custom image? Its actually fairly easy! For this tutorial I’m going to use my latest premade Blogger theme and replace the About Me title widget text with my own custom image.
Before doing anything, PLEASE be sure to back up your theme! There are a variety of templates out there, and all may not work in the same way depending on coding and other altercations, so its always good to have a backup in case something were to go wrong. Here are directions on how to backup your theme.
First, you have to create an image to use! (psst…check out my Services page if you’d like me to create some sidebar title graphics for you). Here is the image that I’ve created that I’d like to use as my “About Me” header:
Now, I need to upload this image somewhere. I love Photobucket and I’d highly suggest using it as an image hosting service, but if you have another image hosting site you’d prefer you can use that. Once you upload it to photobucket, make note of the Direct Link url:
*UPDATE 4/28/13: I have updated the directions below to reflect Blogger’s new HTML editor, which differs a little bit from the original editor. The screencaps reflect the old editor, but it is the same idea.
Go to your Blogger Template and click “Edit HTML”. In the “Jump to Widget” dropdown menu, select the widget you would like to edit. Each widget has a unique widget id. Most of them are fairly obvious to figure out. In this case, the widget id I’m looking for is called “Profile1″. You may have to click the little arrows on the left in order to expand the widget so that it shows the full code. There will be a portion within the widget that says . Highlight and delete that, as shown below:
In its place, put the following code:
Of course, replace YOUR CUSTOM IMAGE URL with the Direct Link url that we grabbed from Photobucket previously.
Preview to make sure your new image title is now be above your widget.
You’re going to have to do this to each widget that you want to replace the title with your own images. Just go through the same steps shown above. Some widgets may be a little trickier to locate the title of, such as HTML widgets but they’re usually categorized as “HTML1″, “HTML2″ etc. There is one exception to the above method, which is the Followers widget (which pretty much everyone has)…
FOLLOWERS WIDGET DIRECTIONS:
For some reason, Blogger does not let you replace the Followers widget title. In order to get a custom title for this widget, you will have to go your layout tab and create a Picture widget in your sidebar. Include your custom title image in this picture widget and place it directly above the Followers widget (make sure that the title in the Followers widget is left blank so it won’t show).
Running into issues or have any questions? Comment below!
