How to customize your Blogger widget titles {first method}

{Read in Italian...}

Today we'll learn how to easily spice up the titles of our blog widgets. Next time I'll explain another method, which is the one that I prefer and personally use when I design blogs, but this one is perfect in case you don't want to mess with your template and to deal with your CSS.
Here are the pros and the cons {which we'll try to minimize anyway} of this method:
  • you'll just need to type a short HTML code into a new widget;
  • you can have fun with typography, since you won't be forced to use web fonts;
  • it is very easy to use a different color or personalization for each title.
  • according to your own blog template, there coul be a little too much white space in between titles and widgets;
  • some widgets require a title, no matter what, so we'll have to solve this with a little trick;
  • images are always heavier than text and this will slightly decrease the loading speed of your page;
  • there's a risk that these titles, being images instead of real text, could look a little blurry if compared with the rest of your fonts.

Before beginning, here's how the sidebar of my testing blog looks like, without any customization.
How to customize your Blogger widget titles 1
Kinda ugly, right? It lacks of personality and those titles are so small that you barely notice them.

The first thing to do is to create our titles with a graphic editor. In my example I used Photoshop {of course, you can use any free editor, like Picmonkey, Ipiccy, etc.} to make some colored flags, then I wrote the titles of my widgets on them.
Now we have to upload our pictures: you can do it on Flickr, or on an unpublished blog post... Just get a direct link to those images.
Now go to your Layout page on Blogger dashboard and add to your sidebar a new HTML/JavaScript widget. Type the following code in:
<img src="" alt="My widget title" />
Change the green text with the direct link to your image, while instead of the purple text you'll have to type the title of your widget.
Why do we need to insert this alt tag? Because if a user won't be able to load our images for any reason, at least he'll display a textual description.
After saving it, we'll need to drag this new widget straight above the widget it refers to, as a title.
Let's repeat this operation for all of our widgets: basically, for each widget in our sidebar, we'll also have a new HTML/JavaScript widget containing its title.
Now we have to delete all of the text titles within their own widgets. If Blogger tells us that a title is mandatory for certain widgets, don't use a dot or an asterisk: this is something that I've seen many times, but it's kinda ugly! Just type this instead: &#160;
This is a non-breaking space glyph, resulting in an emply field.
Now our sidebar should look like this:
How to customize your Blogger widget titles 1
Much better, right? I still don't like that excessive white space, over that widget that had a mandatory title {the Google+ one}. We can fix this by adding a tiny-winy CSS line into the code of the widget that contains its title:
<img src="" alt="My widget title" style="margin-bottom: -30px;" />
The orange text is the one that we're adding. You can change the spacing: if, for instance, you think that "-30px" is too much, you can type "-20px" instead, so you'll have more white space in between. Use any value you prefer, until you're satisfied.
So here's what we get:
How to customize your Blogger widget titles 1
A couple of advices:
  • try to create or use images, fonts and colors that fit well with the rest of your design;
  • save your images as .PNG: your text will look less blurry and you can preserve the alpha channel, if you have transparent pixels;
  • resize your titles according to the width of your sidebar: they don't have to be too wide, neither too narrow!
I hope you found this post useful. Have fun!
Related Posts Plugin for WordPress, Blogger...