How to Customize Titles in Sidebar of Blogger Template

Customizing the appearance of titles in sidebar as you like it is essential part. I am going to explain a common problem faced by newbies, that is How to add color to blogger Side Bar Title and Background. As you can see that in Minima, Tic Tic, Rounders and other Templates, side bar titles are naked and there is no background color.

Just look at to this screen shot (This is Minima Template)

Now we are going to add color and borders to that naked titles of sidebar.

Minima Template Sidebar Customization

Minima Template Sidebar Customization

Login to your Blogger “Dash Board”.

Click on “Layout” and Now click on “Edit HTML” option.

How to Add Borders

You have to find the below code in your Template code.

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

Some Templates has no separate style for sidebar titles, then you will have to add the above code in your Tamplete code. If you are using such Templates, which has no .sidebar h2, then add the above code in your Tamplate code, just before the

]]></b:skin>

</head>

Your Code should look like this.

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

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

Now for adding borders, add a extra line in the above code.
border:1px solid #000000;

Your Code should look like this

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

Preview your Template and you will see that borders has been added to the naked side bar titles.

sidebar-title-borders

Sidebar Title Color

How to add Background Color

In order to add Background color to side bar titles, you have to add another extra line in the above code.

background:#C3D9FF;

Your code should look like this

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

After Customization

After Customization

You can change color according to your Template specification. You can also increase height and padding size according to your requirement.

Editor’s Note: At early stages of Blogging on Blogger Platform, It can prove to be a time saver instead of playing codes. You can easily make changes in existing template according to your choice of customization instead of going for a new one.

This guest article was written by Bilal Ahmad, a technical blogger at Techmaish.com and writer specializing in blogging tips, product reviews and tutorials. You can also share your tips by writing a guest article on Blogsolute.

email

About the Author

Bilal Ahmad is a technical blogger at Techmaish.com and writer specializing in blogging tips, product reviewswordpress plugins and tutorials.

7 Enlightened Replies

Trackback  •  Comments RSS

  1. thanks its really usefull for new bloggerers

  2. how to become taller says:

    Thanks for the info provided! I was researching for this info for quite some time, but I was not able to find a trusted source.

  3. KING SINGH says:

    THANKS FOR POST ! EXCELLENT WORK ! IT AMY BE VERY USEFUL FOR BLOGGERS !

  4. dianna says:

    thanks 🙂 great tutorial ever.

  5. Adetony says:

    This is absolutely wonderful, I have been trying to customise side bar gadget on my blog since created, but today, I’m grateful, you have provided me with information that have long eluded me. keep the good work.

  6. Valencia says:

    Thanks a lot! Great tutorial, it works fine even if it was written 3 years ago!

    I really appreciated, you really helped me 🙂

Post a Reply

Your email address will not be published. Required fields are marked *

Top