Stylish Design for customize Blogger sidebar Heading
Stylish Design for customize Blogger sidebar Heading
Blogger
sidebar is an important thing that contain many widget like Facebook, Twitter
fan widget, subscription widget as well as advertisement. However the main part
is Sidebar heading which will affect the total Blog design. So if we can add
stylish sidebar headline then readers and viewers attention can be grab easily.
But some default Sidebar headline may look like monotonous, so we can make it
different by adding a simple CSS code block. Hope this tutorial will help you
to make your blog sidebar different from other.
To
add custom sidebar headline first of all you have to remove the existing
sidebar heading, after that by adding any code from below you would able to
change the sidebar headline.
How to remove the existing sidebar headline design
For
removing existing sidebar headline design we have to find the code and then we
have to delete the code block. So follow the below steps-
Step 1 Log in to your Blogger
Account and Go to your Blogger
Dashboard
Step 2 Click on Now click on -> Template -> Edit
HTML
Step 3 Now find the below by pressing Ctrl+F
.sidebar h2 {
------------------------
------------------------
------------------------
}
concentrate only on .sidebar
h2 to closing braked.
Step 4 Now delete the whole code block up to closing } (second braked).
Step 5 Finally hit
the Save template button.
Adding the Sidebar New Heading style
After deleting the
previous sidebar headline code now follow the below steps for implementing the
design.
Step 1 Log in to your Blogger
Account and Go to your Blogger
Dashboard
Step 2 Click on Now click on -> Template -> Edit
HTML
Step 3 Now find
the </b:skin> by pressing Ctrl+F
Step 4 Copy any code from below and Paste the code
above/before </b:skin>
Style 1
Code for Style 1 are below-
.sidebar h2 {
padding:5px;
background:#000000;
color:#FFFFFF;
font:140% 'Oswald',Sans-Serif;
}
Style 2
Code for Style 2 are below-
.sidebar h2 {
padding:5px;
border-bottom:5px solid #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}
Style 3
Code for Style 3 are below-
.sidebar h2 {
padding:5px;
border-bottom:3px dashed #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}
Style 4
Code for Style 4 are below-
.sidebar h2 {
padding:5px;
border:2px solid #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}
Style 5
Code for Style 5 are below-
.sidebar h2 {
padding:5px;
border:2px dashed #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}
Style 6
Code for Style 6 are below-
.sidebar h2 {
padding:5px;
border:2px dashed #000000;
border-bottom:5px solid #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}
Style 7
Code for Style 7 are below-
.sidebar h2{
background:#333;
margin:5px 4px 5px 0;
padding:9px 0 9px 10px;
border:0;
color:white;
font-size:16px;
line-height:16px;
font-family:'Oswald',sans-serif;
text-decoration:none;
text-transform:uppercase;
box-shadow:4px 4px 0px rgba(33,33,33,0.45);
}
Style 8
Code for Style 8 are below-
.sidebar h2 {
padding:5px;
border-top:1px solid #000000;
border-bottom:5px solid #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}
Style 9
Code for Style 9 are below.
However to use this sidebar style your template sidebar width must be 362px.
.sidebar h2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXn5gAogUwfCB01Bc4W6OuUTNd72MlDJ9daMc1EkatMn_dNRPjupCKj04go1BGacMYmSD4W2xfYUjVZyAiZBQPdNGfcUhX2Em-Hrf1wkQBJ5BWv7u0n0lG1aNZRxg5PFhMlmF_zZzf0Ny8/s1600/BloggerSpice+SidebarH2.png) no-repeat scroll 0 0 transparent;
color: rgb(213,213,213);
height: 66px;
font-size: 140%;
font-weight: bold;
margin: 0 0 -28px;
position: relative;
left: -30px;
top: 0;
width: 362px;
text-align: center;
padding: 15px 0 0;
font-family: 'Oswald',Sans-Serif;
padding-bottom: 15px;
}
Style 10
Code for Style 10 are
below-
.sidebar h2 {
padding:10px;
text-align:center;
border-top-right-radius:30px;
border-bottom-left-radius:30px;
background:#000000;
color:#FFFFFF;
font:140% 'Oswald',Sans-Serif;
}
Step 5 Finally hit
the Save template button.
Customization
- To change the Background and Border color change #000000 with different color. you can get the color code from Color Picker.
- To change the Font size alter 140% with 120% or 160%.
- To change the Headline Font change 'Oswald',Sans-Serif with different font.
Now check your template
sidebar to see the new style. I hope you will like the new looks of your
template sidebar. Thank you.
2 comments