Pages

How to Customize your Blogger Sidebar Titles

Now a days most of the Blogger templates comes with stylish sidebar titles. But some of them have still old simple look. Most of my blogger friends asked me about how to turn these titles into stylish ones. In this following tutorial I will explain how to customize these sidebar titles. You can change the font, size, color, add border, background to the sidebar titles.

First of all we have to find below code into your template. Just search for .sidebar h2

.sidebar h2 {
margin:0;
padding:0 0.2em;
line-height:1.5em;
}
If above code is not present in your template then add it just ABOVE the
]]></b:skin>
Now you have the sidebar code we will customize the titles.
 
 
Adding Borders

Just add
border:1px solid #000000;
below the
.sidebar h2 {

Above is the all four borders to your sidebar titles. You can choose to add bottom, top, left and right border or combination of them.

border-bottom:1px solid #000000;
border-left:1px solid #000000;

You can change the border thickness, style and color.

Adding Background color

Just add
background:#A9A9A9;
below the
.sidebar h2 {

You can add any color by changing color code value.

Adding Background image

In this case we will add a background image to the sidebar titles. First will will need to prepare the image. Create your own image or get from internet. Crop it to fit with your sidebar and upload it on Picasa or PhotoBucket or other image sharing website.

The width of the image should be same as the width of your sidebar. The hight of the image will be adjusted in line height.
The entire code will be as follows:
.sidebar h2 {
background:url(YOUR_IMAGE_URL)no-repeat;
margin:0px;
padding:0px 0.8em;
line-height:50px;
}
Changing Font of sidebar titles
Just Add
font-family:Impact;
below the
.sidebar h2 {
You can try different fonts like:-
  • Georgia
  • Palatino Linotype
  • Book Antiqua 
  • Times New Roman
  • Helvetica
  • Arial Black
  • Impact
  • Courier New
  • Verdana
  • Tahoma
  • Lucida Sans Unicode and many others   
Changing size of the font
Just add
font-size: 120%;
below the
.sidebar h2 {

To adjust the font size, change the value in red.