How to Change Sidebar Background Color in Blogger Templates

Hi guys, writing a tutorial after a long time. Anyway, here is a simple tutorial to change the sidebar background color in new Blogger Template Designer templates. After this tutorial, you can easily change the sidebar background color from Template Designer.

Update: I've updated this tutorial. Now you can change the sidebar background color in every Blogger template. Templates with multiple sidebars can also have different colors for each sidebar.

Steps!

1. Open the Template section.

2. Click the Edit HTML button.

3. A new window will open. You'd have to click the Proceed button to start editing.

4. Find the following code:
   

   /* Variable definitions
   ====================

5. REPLACE the above code with the following one:
   

   /* 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>

6. After that, find ]]></b:skin> and REPLACE it with the following 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>

7. Click Save template and then Close button.

How to Change the Background Color in Template Designer?

We've finished the coding stuff, now simply click the Customize button to open Blogger Template Designer.

Then click the Advanced tab. You'll see 3 new options there. First one is Right Sidebar Background. It has 3 further options.

Right Top Sidebar Background: This will change the background color of the top section in the right column.
Right Left Sidebar Background: This will change the background color of the left sidebar in the right column.
Right Right Sidebar Background: This will change the background color of the right sidebar in the right column.


Next option is Left Sidebar Background. It also has 3 further options.

Left Top Sidebar Background: This will change the background color of the top section in the left column.
Left Left Sidebar Background: This will change the background color of the left sidebar in the left column.
Left Right Sidebar Background: This will change the background color of the right sidebar in the left column.


Last option will be Sidebar Column Background. This is the most interesting one because it affects the whole column rather than a single sidebar section. It has 2 further options.

Right Sidebar BG Color: The color in this option will change the background of whole column on the right side.
Left Sidebar BG Color: This option will change the background of left side column.