Widget titles are the titles that appear above your sidebar widgets. Usually, you will simply type them into the “title” box in your widget editor and they are styled based on your chosen template.
We’re going to take it a little farther today though and add a custom background image behind our widget titles for a custom effect.
To do this, we’ll first need to decide what we want to do to the titles. Things like adding a custom line under them, or adding a little graphic are all done through background image CSS properties.
On the Sample site I’ll be using for this, my sidebar titles currently look like this:
Not very attractive or eye-catching, right? I’d like to add some circle elements to match the header, make the text larger, and center it. You’ll need to plan out in your head how you are hoping for the titles to look before you get started. It makes things go much more smoothly. So, first things first let’s change the font. Changing the font size and positioning will give me a better idea of the size of background image I will need to complete the customization.
You’ll notice if you go to the Template Editor in Blogger (Template > Customize) and then to Advanced > Gadgets, it highlights the sidebar text. The options here allow you to instantly change the font and colour but not much else. The downside to this is that it also automatically changes your post date along with it. Dumb, I know. So, instead of using this method, we’re going to use our own CSS method for the font. The class name for the element we are going to be working on (the sidebar title text) is .sidebar h2. Go into Advanced > CSS and apply the following code:
.sidebar h2 {
color:#000000; /* This is your font hex color */
font-size: 18px; /* This is your font size */
text-align: center; /* Centers the title*/
text-transform: uppercase; /* This makes all of the letters capitals. lowercase is the opposite. optional. */
}
So now that the code is in, the sidebar titles should look something like this now (you can still choose the font family through the Gadgets panel if you like):
Great! We are ready to make our background image. The easiest way I find to do this is to take a screenshot of your sidebar and open it in Photoshop. Then, in a new layer, add your custom design. For example, my Photoshop file would look like this:
