ADDING A BACKGROUND COLOR TO SIDEBAR GADGET TITLE

Way back two weeks ago I got a problem on how I could add a background color to my sidebar widget title because blogger only gives an option to change font and text color to a sidebar widget title.I`ve been searching so hard over the net and browse some books on the store to acquire a result until I finally found out different methods on how to do it and I have decided to post one which gave me an effective result. Here we go.....


Procedures:

1. Log-in to your blogger account.
2. Go to > Design > Template > Edit Html ( remember to back up your template before editing the html)
3. Tick on the box beside expand widget templates.
4. Now, find the following codes by pressing CTRL-F and pasting the first line inside the search for code box.


 <Group description="Gadget Title" selector="h2">
<Variable name="widget.title.font" description="Title Font" type="font"
        default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
   </Group>


Replace it with...



 <Group description="Gadget Title" selector="h2">
<Variable name="widget.title.font" description="Title Font" type="font"
        default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
     <Variable name="widget.title.bg.color" description="Title Background Color" type="color" default="#999999" value="#999999"/>


5. Next, find the following codes by pasting the first line which is h2 { on the search for code box.



h2 {
  margin: 0 0 1em 0;


  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}

then, replace it with....

h2 { margin: 0 0 1em 0; background: $(widget.title.bg.color); font: $(widget.title.font); color: $(widget.title.text.color); text-transform: uppercase; }

6. Next, find this code..

.widget .zippy { color: $(widget.alternate.text.color); text-shadow: 2px 2px 1px rgba(0, 0, 0, .1); }
then, replace it with......

.widget .zippy { text-shadow: 2px 2px 1px rgba(0, 0, 0, .1); }

7. Click Save.

Now you have a new look on your sidebar gadget title background. You can change the background color of your sidebar widget title background by locating this line of code below...

<Variable name="widget.title.bg.color" description="Title Background Color" type="color" default="#999999" value="#999999"/>

then change the highlighted code in red into the code of your color choice. To see the corresponding codes of color try to visit http://www.computerhope.com/htmcolor.htm