How to Change Blogger Widget Titles to Images

blogger-widget-tutorial

Hey guys! As promised, here is part 2 of my previous blog tutorial which covered how to create custom widget title images for your blog using Canva. Today's tutorial will teach you how to upload your widget title images to Blogger using some handy dandy HTML coding and Blogger template editing! The steps for this are a little tedious and require a sharp eye during code editing, but I promise it's not hard- --you can do it! Ready? Let's get started! 

blogger-widget-tutorial

As you can see from the picture above, using images instead of regular text for your widget titles can really make your sidebar stand out from the rest of your blog and help to highlight important elements for your readers. I had to search around quite a bit for a tutorial like this back when I hosted my page on Blogger, but the process is actually pretty easy and straight forward as long as you pay special attention to detail during the code manipulation process. 

Before you get started...

  • Make sure you have your title images saved and hosted somewhere like Flickr or Photobucket. Once you've completed that, go ahead and locate your images on your hosting site and keep that tab open in your browser for easy access. 
  • Make sure your widgets are already set up in your layout. To check this, click the "Layout" button on your left menu and look at the widgets in your sidebar to make sure there's a section for each title image you plan to upload. 

My sidebar is arranged starting with my profile picture and "About Me" blurb (labled as HTML/JavaScript), a "Follow" section that houses all of my social media buttons (which is another HTML/JavaScript widget), a "Popular Posts" section, an archive, and a "Labels" section where I have all of my post tags listed.

Make sure you know the exact titles of each of your widgets (maybe even write them down on a sticky note) before you start editing your HTML, it'll really help you! 

1. Login and Back up

To start, go ahead and log in to your Blogger account and back up your template. To do this, go to Template >> Backup/Restore (towards the top right of your screen beside the gear icon) >> Download full template. (It's super important that you do this in case you accidentally make a mistake and need to restore your code to the way it was before you messed up.)

2. HTML Search & Edit

Click Template >> Edit HTML and then click within the HTML box and type Control/Command F on your keyboard to bring up the search box. Once your search box is open, type in the title of the first widget you want to edit. 

For example, I'm wanting to change my "Follow"/social media button widget, so I'm typing "Follow" into the search box and then hitting "Enter". 

Once you hit "enter" from the search box, a few different things might be highlighted within your code, depending on the widget title you entered. Just keep hitting "enter" until you see the section of code that looks like this: 

The widget codes are in order from top to bottom, just as they appear on your layout's sidebar. So, for instance, if your first widget is "Popular Posts", you should see that listed first. (It should be highlighted from where you searched for it, and say title="YOUR WIDGET TITLE", similar to the highlighted part in my screenshot above.)
 

3. Find & Replace Data Tag

You should see several dark black arrows to the left of each of your widgets. Once you've located the tag for the widget you want to edit, click the black arrow to the left of it TWICE  to fully expand that widget's code. 

Screen Shot 2015-06-18 at 10.36.31 AM.png

From here, locate the part of the expanded code that says <data: title/> (underlined in yellow above). Replace that with the image code from your image hosting website, and make sure to add a / before the closing > tag. 

To clarify, this was my original part of the code:
<data: title/>

And this is what I changed it to:

<img src="https://c1.staticflickr.com/1/485/18706187419_d6e512d752_o.jpg"/>

And here's what it looks like incorporated with the rest of my code (underlined with a very wiggly yellow line):

Again, make sure you have a / before your closing > tag or the code will not work! 

4. Preview & Save

Once you've replaced the data tag with an image tag, click "Preview Template" to view your blog. If you entered everything correctly, you should see your image above the widget you edited instead of the text that was there originally! If you like what you see, click "Save Template"!

5. Repeat the Process

If you did everything correctly the first time, now you can move on to your other widget titles. Repeat the Search >> Expand >> Replace process for each widget you wish to change, and make sure to save your progress each time! 

 

Troubleshooting...

If you can't seem to get your code to agree with you, here are some tips that might help! 

  • You might be missing important characters in your image replacement code. Make sure your code looks something like  <img src=' YOUR IMAGE URL HERE '/> 

    There should be opening and closing tags ( < and > ) on each end of the code, as well as single quotations around the image URL. Finally, there has to be a backslash ( / ) before the closing tag ( > ). 
     
  •  Your widgets might not be set up correctly. For example, after trying over and over again to get my "Labels" image to show up, I realized that none of the posts on my tester blog had any labels to begin with. After tagging the posts with labels such as "blogging", "test", etc., my image finally showed up. 
     
  • Your image code might be too long; in other words, make sure you only include the actual image URL in the replacement code. I host my pictures using Flickr, and any time I go to copy the image URL, it automatically copies the entire image link, which looks something like this:

    <a href="https://www.flickr.com/photos/127241051@N03/18706187419" title="follow-tut by Jessica Schwendimann, on Flickr"><img src="https://c1.staticflickr.com/1/485/18706187419_d6e512d752_o.jpg" width="250" height="60" alt="follow-tut"></a>

    When I only want it to look like this:

    <img src="https://c1.staticflickr.com/1/485/18706187419_d6e512d752_o.jpg"/>

    Long story short, make sure you aren't including too much in your replacement code. 

Thanks for reading! Did this tutorial help you? Do you have any questions? Let me know in a comment below and I'll do my best to help you! :)