Hello People!
The Default Blogger Sidebar titles are simple text which doesn't look good.
The Default Blogger Sidebar titles are simple text which doesn't look good.
Today I'll tell you how easily you can customize your blogger blog's sidebar titles. You can create your custom designs as per your requirements. All you need to add a very small piece of css code to your template.
Normally your blog's sidebar titles look something like this:
This is too simple to get noticed and It's not even contributing in the design of your blog. You can customize it to look way more beautiful. Here is how...
.sidebar h2{
font-size:20px;
background:fuchsia;
padding:10px;
text-align:center;
color:white;
border-radius:5px;
}
Adding the above code in your template(Go to Template> Customize>Advanced>Add Css) will make it look like this
(Add hearts manually to each title if you want to.)
Lets start designing our titles:
In the above code .sidebar h2 is selector which selects all the headings(titles) in the sidebar.
So, all the lines in
.sidebar h2{
-----
---
}
will determine how the sidebar titles will look like.
All lines between { and } (curly braces) will be added in this form:
property:value;
for ex; in color:black;
Here, color is property and black is value.
As you can see that by default the titles are falling on the left
I would like to align my Titles in the center so add
text-align : center;
to the code and It will look like this.
You can also align it to the right by adding
text-align : right;
instead of text-align:center;
Now, lets add border to our titles. For this, add code
boder : 1px solid black;
Here, 1px is size of border. You can change this value to get thicker border.
Solid is type of border. It adds a solid line border. You can also change its value to dashed to get a dashed line border.
black is the color of border. You can use other colors too instead of black.
Always remember to add the above values in this order:
border: size type color;
Now, we have border around our titles. But text-size is too small. Lets make text look bigger.
For this, add this line to code
font-size : 20px;
You can adjust its value as per your requirement.
Now it looks a little better. But did you notice the gap between text and border is so small which isn't a good thing. Lets add it.
padding : 10px;
padding is the distance between text and border
Now it looks good. Lets start the fun part now. Let us add some colors to our sidebar titles. I would like to add a fluorescent green color as background to my titles.
So, I'm adding this line to my code:
background : chartreuse;
Here chartreuse is the name of color. You can use any color as you wish. Try adding color codes instead of color name. I'm using color name here just for illustration.
Black text isn't going with this green background. So I'm changing the text color to white.To change text color use property color.
color:white;
My heading now looks like this.
Black border isn't going well with my title. So I'll remove this line from code which I had added earlier.
border: 1px solid black;
Now, my headings look like this.
Now, I want to make the borders curvy. So, I'll use property border-radius. So add this line to code:
border-radius : 5px;
The above property will add curves to all the four corners. You can also add corners to the individual corners like this:
border-top-left-radius:30px;
border-bottom-right-radius:30px;
And your sidebar headings will look like this
Similarly, you can add radius to other corners by using these lines.
border-top-right-radius: 30 px;
border-bottom-left-radius:30px;
so the final code for sidebar title is:
.sidebar h2{
font-size:20px;
background:chartreuse;
padding:10px;
text-align:center;
color:white;
border-top-left-radius:30px;
border-botton-right-raius:30px;
}
border-top-left-radius:30px;
border-botton-right-raius:30px;
}
Now, lets make titles with dashed border and curvy edgess by using below code:
.sidebar h2{
font-size:20px;
color : fuchsia;
padding:10px;
text-align:center;
background :white;
border-top-left-radius:30px;
border-bottom-right-radius:30px;
border:2px dashed chartreuse;
}
Now all my sidebar titles look like this.
Now, add some funky font to it. Although you can change font by using property font-style but I would suggest you to add it by going to template designer -> advanced-> gadgets and choose font-style from the list.
Now, add some hearts around each title to make it more appealing
Here, we have our own designed beautiful sidebar titles. Now you know how you can customize your blog's sidebar titles and design it yourself.
Let me know if you find this post useful.. Also Leave a link to your blog in comments and let me see how you designed your sidebar titles using css. I would love to see...
♥♥ Happy Blogging ♥♥
