Stylish Design for customize Blogger sidebar Heading

Stylish Design for customize Blogger sidebar Heading
Headline

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-


style 1

.sidebar h2 {
padding:5px;
background:#000000;
color:#FFFFFF;
font:140% 'Oswald',Sans-Serif;
}

Style 2

Code for Style 2 are below-


heading

.sidebar h2 {
padding:5px;
border-bottom:5px solid #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}

Style 3

Code for Style 3 are below-


blogger sidebar

.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 design

.sidebar h2 {
padding:5px;
border:2px solid #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}

Style 5

Code for Style 5 are below-


sidebar style

.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

.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-


blogger sidebar

.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-


heading

.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.


MBT heading

.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-


headline 2

.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 .
  • 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. 
Go Up