Mommy Hacks #14 - Style Sidebar Gadget Titles | Merry Christmas & Happy New Year!

Sidebar gadgets are a great way to get people to linger on your blog.

You can tempt readers in with popular posts, market affiliates to them, get them to follow you on your favourite social media channels and much, much more.

But all those gadgets can make your sidebar look seriously cluttered, so it's a good idea to style your sidebar gadget titles and make them really stand out.

Luckily - as this Mommy Hack shows - it's easy to give your gadget titles a bit of pizzazz!

As you are going to edit your template the first thing to do is backup your blog.

Style Sidebar Gadget Titles

1. Copy the code below into Notepad so you can edit it...

.sidebar h2 {
font-size: 18px;
color: white;
background-color: red;
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
font-style: italic;
border-top: dotted 3px black;
border-bottom: dotted 3px black;
border-right: none;
border-left: none;
padding: 2px 2px 5px 2px;
text-align: left;

}

2. Use these guidelines to define how you want the gadget titles to look & then edit the code:

font-size: how big you want the font to be
color: the colour of the font - it can be an actual colour names or a hex number
background-color: the colour of the background - can be a hex number or actual colour name
font-family: the name of the font you want to use plus fonts to use if first choice not available
font-weight: choose from: bold, bolder, lighter, normal
font-style: choose from: italic, oblique, normal
border: the first value is the style of the border, choose from: dotted, dashed, solid; the scond value is the weight of the border in pixels e.g. 3px; the third value is the colour. If you only want a border at the bottom you can put none for border-top, border-left and border-right or remove these rows.
padding: defines in pixels how much space there is between border and text
text-align: choose from: left, center, right

3. Click on the Template link and then click Edit HTML highlighted below ...

4. Now click carefully inside the scroll box displayed and press Ctrl-F on your keyboard.

Enter the following code into the Search field and press enter: .sidebar h2 {

5. If you DO find .sidebar h2 { in your template you can change the values using the code in Notepad as a guide and can copy in extra rows from Notepad if these are not already included in your template.

When you have changed the values, click Save Template and view your blog.

6. If you DO NOT find .sidebar h2 { in your template enter the following code into the search field and press enter: ]]></b:skin>

The code you searched for will be highlighted as shown below.