Blogger Sidebar Titles - Customization

November 27, 2008

In this tutorial, I'll explain how to customize Sidebar Titles in Blogger. How to change their clothes. By default, they are kind of "naked" and empty.
But there's a lot that can be done. We can give them some background color, even a picture, an icon beside them, borders, lines......

WHAT CAN WE DO IN BLOGGER OPTIONS?
Well, not much. You can change the Font Color of the title, Size, weight and Font family.
But in some templates (like Minima), the Date Title (above posts) has the same style like Sidebar title.
That means - the same changes you make in sidebar titles, also applies on Date title. Which ain't nice.
But if this works for you, and you don't need more, go to LAYOUT --> FONTS AND COLORS, and adjust these settings as you like....

!! Before doing anything from the options below, back up your template !! (it takes a minute...)

Now, here's the part of code we will modify (it may look a bit different in your template, but it's important that you find the line ".sidebar h2 {"):

.sidebar h2 {
margin:0;
padding:0 0.2em;
line-height:1.5em;
}

Some templates don't have separate style for Sidebar Titles (like Minima), so you have to add it into template. To do that, go to:
LAYOUT ► EDIT HTML, and insert the following part of code (in orange), ABOVE the existing part ( in pink):

.sidebar h2 {
margin:0;
padding:0 0.2em;
line-height:1.5em;
}


]]></b:skin>
</head>

...we are going to use this part of code for customizing our sidebar title in blogger.

***

BORDERS IN SIDEBAR TITLE
To add some borders around your Sidebar Title, add the line (in green) into the code:

.sidebar h2 {
border:1px solid #000000;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}

...we've added a border all around the Sidebar title:

• colored black (#000000)
• stroke 1px (thickness)
• style SOLID

You can change all of these settings to whatever suits you....Read more about border styles here. Here's a few more examples:
- to "underline" the Sidebar Title, add this line:

border-bottom:1px solid #000000;

- to add a dotted border under the title, and on the right side of it:

border-bottom:1px dotted #000000;
border-right:1px dotted #000000;

....once more, take a look at border styles here.

***

BACKGROUND COLOR BEHIND SIDEBAR TITLE
To add some background color behind your Sidebar Title, add the line (in green) into the code:

.sidebar h2 {
background:#E17820;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}

...change the hex color (#E17820) into one that suits you...

***

BACKGROUND PICTURE (image) BEHIND SIDEBAR TITLE
First you need to make (or find some picture you'd like to appear in title. You have to size it according to your Sidebar width (otherwise, it will get cropped).
For example, the picture I used is 220px wide, and has 53px height. Well, to be honest, you'll have to play with this a bit, until you get it right...

When the pic is ready, you have to upload it to a free web host (like Photobucket, Picasa, TinyPic...) to get the URL. When you've done that, add the line (in green) into the code:

.sidebar h2 {
background:url(URL OF THE PICTURE)no-repeat;
margin:0px;
padding:0px 0.9em;
line-height:53px;
}

...replace URL OF THE PICTURE with the URL address of the hosted picture...
...in orange, you can adjust alignment of the title (I've pushed it to the right a bit)...
...in blue, increase or decrease the line height (so if you have picture 53px of height, set the line height to 53px)...

***

BACKGROUND PICTURE (image) INSTEAD OF SIDEBAR TITLE
Now, this is a cool one. And my favorite. The idea is to remove (hide) the default header of sidebar title, and to place a picture (image) instead of it.

1. you need do make (create) the picture. Or find one that you like. make sure that your pic will fit in the sidebar without being cropped. size it properly. try a few times, and you'll get it....

2. upload it to a free web host (Photobucket, Tinypic....) to get the URL address.

3. go to template LAYOUT ► PAGE ELEMENTS, and click on Add a Gadget in the sidebar. Choose HTML / JavaScript from the list. Place the following code inside the box (leave the title empty):

<img src="URL OF YOUR PIC"/>

...just change the orange part with the URL address of your hosted picture.....Save Settings.

4. now, there it is. only thing left to do is to arrange it ("drag" it), so the Gadget with a picture will be above the "Blog Archive" Gadget. Like so:
...that's it. Do the same for "Labels", "About me" and everything else you want.....


Remember:

• you can combine all of those examples (background color + border, for example)
• there's a million combinations...be creative

Smile!