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
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 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
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.
thanks its really usefull for new bloggerers
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.
THANKS FOR POST ! EXCELLENT WORK ! IT AMY BE VERY USEFUL FOR BLOGGERS !
thanks
great tutorial ever.