How to Replace Titles with Images in Blogger

Tweet

After adding a bunch of widgets to your sidebar in blogger, you will notice that the titles are very bare (and use the same text as other places on your blog) I wanted to spice mine up so they would stand out to readers. I have provided a tutorial on how to replace titles with images, and have included my new Title Labels as a free download below!

Take a look at my before and afters! 

Here's how  my sidebar titles looked before I changed them, BLAH (SO BORING!)

Note: This is assuming you are changing sidebar widgets in Blogger

1. Make some labels or Download Mine! I have included a blank one so you can add your own text if you'd like! I designed mine on picmonkey.com

Mine are sized at 300 x 44 px.

2. Upload these images to a hosting site such as photobucket.com

3. In blogger template tab, back up your template

4. Under template tab click EDIT HTML

5. Hold down Ctrl + F to Search for the widget title in your html code you'd like to replace with an image. Here's an example of what you'd type in for finding (about me) title section: title='about me'

6. Click the two black arrows next to the about me line to expand code. Find the code <data:title/> and replace it with 

<img src="YOUR_TITLE_IMAGE_URL" alt="YOUR_GADGET_TITLE"/>

Note: The first red link will be replaced with your direct url link from photobucket, and the next will be replaced with your title for that section (example: About me) Make sure you keep the " " around those red links.

7. Preview template and make sure it worked, then click SAVE!! :D Repeat for all sections you wish to replace titles for.

Now your title should look like the image you replaced it with!

ENJOY! If you found this helpful please share/ pin it! 

This post may or may not include affiliate links. Click here for disclosure policy