How to Change Sidebar Background Color in Simple Blogger Template

Hi guys, writing a tutorial after a long time. Anyway, here is a simple tutorial to change the background color of the sidebar for 'Simple' Blogger template. Here are some steps to follow:

Steps!

1. Open Design tab then Edit HTML tab.


2. Find the following code:
   
   

   /* Variable definitions
   
   ====================
   
   <Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/>



3. Paste the following right below the step 2 code:
   
   

      <Group description="Sidebar Background" selector="body">
   
   <Variable name="sidebar.bgl.color" description="Left Sidebar BG Color" type="color" default="#DCDCDC" value="#DCDCDC"/>
   
   <Variable name="sidebar.bgr.color" description="Right Sidebar BG Color" type="color" default="#666666" value="#666666"/>
   
   </Group>



4. The result of step 2 and step 3 codes will look like this:
   
   

   /* Variable definitions
   
   ====================
   
   <Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/>
   
   
   
   <Group description="Sidebar Background" selector="body">
   
   <Variable name="sidebar.bgl.color" description="Left Sidebar BG Color" type="color" default="#DCDCDC" value="#DCDCDC"/>
   
   <Variable name="sidebar.bgr.color" description="Right Sidebar BG Color" type="color" default="#666666" value="#666666"/>
   
   </Group>



5. After that, find ]]></b:skin> and paste the following code just before it:
   
   

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



6. Save your template.


7. Open Template Designer & go to the 'Advanced' tab. You'll see the first option as 'Sidebar Background'. Open it and configure the color of right or left sidebar backgrounds!

If you need any help regarding Blogger, feel free to ask in comments!