raja

Change sidebar background Color in Blogger.

  1. Find the following code:
    /* Variable definitions
    ====================
  2. REPLACE the above code with the following one:
  3. /* 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>

  1. 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>
  2. Click Save template and then Close button.

No comments:

Post a Comment