How To Change Sidebar Background Colour In Blogger

The blogger template doesn't allow you to change the background colour of the template and it has been set by default. Changing the background colour of the sidebar according to your choice makes you blog appear more attractive.

By following the easy step by step guidance you can do it in minutes.

1) Log in to blogger

2) Now, from the drop down menu select the specific blog as shown below :

                                       

3) Click template on the left

4) Click 'Edit HTML'

5) Find <b:skin>...</b:skin> and expand it by clicking on the small arrow on its left

6) Now find the code :    /* Variable definitions

                                      = = = = = = = = = = =

7) Now replace this code with the code as shown below :

---------------------------------------Code---------------------------------------------------------------

/* Variable definitions

====================

<Group description="Right Sidebar Background" selector="body">

<Variable name="sidebar.right.top.color" description="Right Top Sidebar Background" type="color" default="#00f" value="#0000ff"/>

<Variable name="sidebar.right.left.color" description="Right Left Sidebar Background" type="color" default="#ff0" value="#ffff00"/>

<Variable name="sidebar.right.right.color" description="Right Right Sidebar Background" type="color" default="#f0f" value="#ff00ff"/>

</Group>

<Group description="Left Sidebar Background" selector="body">

<Variable name="sidebar.left.top.color" description="Left Top Sidebar Background" type="color" default="#00f" value="#0000ff"/>

<Variable name="sidebar.left.left.color" description="Left Left Sidebar Background" type="color" default="#ff0" value="#ffff00"/>

<Variable name="sidebar.left.right.color" description="Left Right Sidebar Background" type="color" default="#f0f" value="#ff00ff"/>

</Group>

<Group description="Sidebar Column Background" selector="body">

<Variable name="sidebar.bgr.color" description="Right Sidebar BG Color" type="color" default="#f00" value="#ff0000"/>

<Variable name="sidebar.bgl.color" description="Left Sidebar BG Color" type="color" default="#f00" value="#ff0000"/>

</Group>

------------------------------------------------------------------------------------------------------------

8) Now look for  ]]></b:skin> and replace it with the code as shown below:

------------------------------------------------Code----------------------------------------------------

#sidebar-right-1 { background: $(sidebar.right.top.color); }

#sidebar-right-2-1 { background: $(sidebar.right.left.color); }

#sidebar-right-2-2 { background: $(sidebar.right.right.color); }

.column-right-inner, column-right-outer { background: $(sidebar.bgr.color); }

.column-left-inner, column-left-outer { background: $(sidebar.bgl.color); }

#sidebar-left-1 { background: $(sidebar.left.top.color); }

#sidebar-left-2-1 { background: $(sidebar.left.left.color); }

#sidebar-left-2-2 { background: $(sidebar.left.right.color); }

]]></b:skin>

----------------------------------------------------------------------------------------------------------

9) Now click 'Save' and Back

Now customize the sidebar colours in the following manner :-

1) Click Template -- Customize -- Advanced Tab

2) Here you will find  3 new options. First one is 'Right Sidebar Background' and it has 3 further options namely - Right Top Sidebar Background ; Right Left Sidebar Background ; Right Right Sidebar Background

3) Second one is  'Left Sidebar Background' and it has also 3 further options namely - Left Top Sidebar Background ; Left Left Sidebar Background ; Left Right Sidebar Background.

4) The last option is 'Sidebar Column Background'. It has also 2 further options -- Right Sidebar BG Colour  &  Left Sidebar BG Colour.

I am sure you will be able to learn how to adjust the colours easily, once you try your hand.

5) Don't forget to click 'Save' once you have chosen and adjusted the background colours of both left and right sidebar.