How to Change Sidebar Background Color in Simple Blogger Template


Steps!

  1. Open Design tab then Edit HTML tab.
  2. Find the following cose

/* 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); }

  1. Save your template.
  2. 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!