Change sidebar background color in blogger

Blogger sidebar background color:

By default Blogger blog sidebars appear without background color. In Blogger we can add separate background color to widgets. You can add background color to your Blogger side bars. You can customize your Blogger sidebars by adding background color and borders. You can also add background image to Blogger sidebar. In this post I'm going to show you how to change background color to your Blogger blog sidebar.

How to change sidebar background color in blogger:

It is easy to change background color of blogger blog side bar. Many ways are there to change sidebar background color. One of the simple way is, changing sidebar background color through Blogger Template Designer.

Follow bellow steps to change sidebar background color in blogger

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template and click on Customise.

Step 3 : Click on Advanced tab

Step 4 : Click on Sidebar Background, Now on right side you can see different  background colors.

             Select any background color.

Step 5 : Click on Apply to blog

Read More

Center sidebar widgets in blogger

how to center all sidebar widgets in Blogger:

This post will help you to centering all sidebar widgets in your Blogger blog.Only the widgets in your blog sidebar will align to center with simple css code and remaining widgets may not change.

Follow below steps to center sidebar widgets in Blogger

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Customise button under Customise click on Advanced tab

Step 4 : Click on add CSS under Advanced options

Add below CSS code to your Blogger blog

.sidebar .widget {
  text-align: center;
}

Step 5 : Click on Apply to blog

Read More

Center Sidebar Widget Titles in Blogger

How to Center Sidebar widget Titles in Blogger :

We can change only widget titles alignment, without effecting on the widget links(information). With simple code we can center all sidebar widgets titles in blogger blog.

Follow below steps to center sidebar widget titles in Blogger blog

Step 1 : Go to Blogger Dashboard

Step 2 : Click on template

Step 3 : Click on Customise button, Next under Customise click on Advanced tab

Step 4 : Click on add CSS under Advanced options

Add below CSS code to your Blogger blog

 .sidebar h2 {text-align:center !important;}

Step 5 : Click on Apply to blog

You can also change title alignment either right or left. 

Read More

Add background color to sidebar gadget titles in blogger

How to add background color to sidebar gadget titles in Blogger:

With default Blogger Customise settings we can't add background color to Blogger sidebar gadget titles. But we can add background color to sidebar gadget titles. With background color, gadget looks beautiful.

Follow below steps to add background color to Blogger sidebar gadget titles

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search below code

.sidebar .widget h2 {

After finding above line, add below code just before closing tab of above line.

background: #333333;

Now background color is added to your sidebar gadget titles.

But background color will not apply fully.You can see some gap on right side and left side on sidebar gadget tiles.

So search below code

 .main-inner .widget {

Add below code before closing tag of above line.

padding-left: 0em;

padding-right: 0em;

Step 5 : Click on Save template.

Now background color will fully added to sidebar gadget titles on your Blogger blog.

Read More

Add a line between blogger sidebar widgets

How to add a line between sidebar widgets in Blogger :

After removing sidebar widgets border, it is better to add a line between sidebar gadgets.We can separate sidebar widgets with bottom line or image.It will really help for those who removed sidebar widget border and shadow.

Follow below steps to separate sidebar widgets in Blogger

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : click on Edit Html

Step 4 : Search  .main-inner .widget {

add below line after above

border-bottom: 3px solid #000000;


If you want to separate with image add below code instead of the above line
background-image: url(image URL);
background-position: bottom;
background-repeat: no-repeat;

Step 5 : Click on Save template.

Read More

Add background image to blogger sidebar widget titles

How to add background image to Blogger sidebar widget titles:

We can add an image as background to sidebar widget titles in Blogger.We can also add different images to different widget titles in Blogger sidebar.But here I'm telling how to set image as background to Blogger sidebar widget/gadget tiles and how to change width and height of background image.

Follow below steps to add  background image to sidebar widget titles in Blogger

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 :  Search .sidebar .widget h2 {

add below line just below the above line

background: url(your custom image url) ;


note: put image url link in the place of your custom image url in the above line.

if you want to adjust image size use below tags :
height:  px;
width:  px;

Step 5 : Click on Save template.

Read More