Complete Solution

How to Add Background Color to Sidebar Widget Titles in blogger? By default, Blogger only allows to change the font & color of sidebar widget titles. So, I'll try to make it as simple as possible & you'll be able to change the background color from the Template Designer.



Currently, you can apply this tutorial only on 'Simple' Blogger template. If you're using any other Blogger template or custom template, please be careful.



 





Steps:

 1.  Open 'Design' the 'Edit HTML' tab.



2. Please, Backup your current template.



3.  Find the following code:



 


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



 REPLACE the above code with the following one:



 

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



 4. After that, find the following code:



 

h2 {<br /> margin: 0 0 1em 0;<br /><br /> font: $(widget.title.font);<br /> color: $(widget.title.text.color);<br /> text-transform: uppercase;<br />}



 REPLACE the above code with the following code:



 

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



  5. In this step, find this code



 

.widget .zippy {<br /> color: $(widget.alternate.text.color);<br /> text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);<br />}



 REPLACE the above code with the following one:



 

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



 6. The background color of sidebar widget titles is also applied to the date above posts. So, we need to do a little more coding. Find the following code:



 

.date-header span {<br /> background-color: $(date.header.background.color);<br /> color: $(date.header.color);<br /> padding: $(date.header.padding);<br /> letter-spacing: $(date.header.letterspacing);<br /> margin: $(date.header.margin);<br />}



REPLACE the above code with the following one:



 

.date-header span {<br /> color: $(date.header.color);<br /> padding: $(date.header.padding);<br /> letter-spacing: $(date.header.letterspacing);<br /> margin: $(date.header.margin);<br />}<br /><br />h2.date-header {background:$(date.header.background.color);}<br />



 7. Save your template.

Subscribe to Get Newest Articles By Email!

Follow us!