Tutorial | How To Style Your Blogger Gadget Titles

Happy Monday my lovelies! I trust you all had a fantastic Halloween weekend and are now currently raiding your little ones candy bowls. Don't worry, me too. 

But today I have a really fun post where I am going to show you just how easy it is to change your Blogger (Blogspot) gadget titles with just a little bit of CSS added to your template. Don''t worry, you won;t mess it all up!

Ready too get started and become a design master? Click clack Jack!

Step 1: BACK UP YOUR BLOG!

I can absolutely not say this enough! Anytime you make changes to your design you must first back up your blog. Not sure how? Here's an easy to follow photo. 

Step 2: FIND YOUR CODE

Whenever you create a new gadget on your sidebar or footer you probably created a title. 

So let's head on over to your TEMPLATE now and go into "EDIT HTML". From there you'll want to hit Ctrl+F (on a Windows device) and search for the name of your gadget.

Once you've found it you'll highlight it and that is where we will plug in an image. 

Step 3: CREATE & HOST YOUR IMAGE

Obviously you will need an image if you want to change your gadget title to reflect a graphic. If you'll notice I just chose to create sidebar titles with the same names I had originally named them only I wanted them to show off my branded fonts. 

So once you have your image created, you'll need to host it somewhere (did you know that you can host images right on your Blogger blog?) so you can retrieve the URL of the image. You'll be needing that in a second.

Step 4: GO BACK TO YOUR TEMPLATE

Here you will want to go back to the template and make sure you have searched for the gadget title you created. In that section of code you should see this:

<b:widget id='YOUR GADGET NAME HERE' locked='false' 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>

The part you are looking for in that piece of code is this:

<data:title/>

Once you've found it, all we need to do is change it to reflect showing an image. 

Step 5: CHANGE THE CODING

If you have successfully followed the steps and found the code above, you just need a small bit of HTML to replace it with. Highlight this part:

<data:title/>

And change it to this code:

<img src='THE GADGET URL YOU GOT FROM THE IMAGE HOST GOES RIGHT HERE'/>

Now we're ready for the final step!

Step 6: PASTE IN THE IMAGE URL AND SAVE!

Yep, really, that is 100% it! Just paste in the image code from your image host and preview to make sure it is showing correctly (if not, repeat this on the next section of code that matches your gadget title and preview again). Once it is showing how you want it, save your template and go look at the gorgeous gadget titles now heading up your sections!

Start the Discussion:

Do you have pretty gadget titles? Why or why not?

Happy Blogging!