How to Change Sidebar Background Color in Blogger Templates

By default, Blogger does not offer an option to add background color in sidebar [or multiple sidebars]. So, 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 all default Blogger templates. Templates with multiple sidebars can also have different colors for each sidebar.

Lets Do Some Coding First!

1. Open the Template section.

2. Click the Edit HTML button.

3. On next page, you'll see a lot of code. Just expand <b:skin>...</b:skin> tag by clicking on the arrow on left side. See following image for help.

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

Coding Done! Time to Add Some Colors in Sidebar :)

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.

I hope this tutorial would be helpful for you. Kindly link back to this blog. You can use the link code available at the bottom of this page. This code can be used in sidebar or footer.

What to Do if Tutorial Does Not Work for Your Blog?

I write tutorials by testing on all Blogger default templates like Simple, Ethereal & Watermark. Such tutorials might not work on custom or highly customized templates because of incompatible codes. In such case, you can hire me. I'll charge $16 for this tutorial. You'd be able to customize the color by simply going to Blogger Template Designer. You can contact me via email [levisinside0@gmail.com].