Adding Background Color To Blogger Widget Title Bar

It has always been the desire of every blogger to make their blog eye friendly to their visitors. Tweaking your blog with new features and color designs will not only make your blog attractive, but encouraging to your visitors.

Recently, I got a message from a friend via Gmail, asking how he can Add a Colour Background frame for his gadget title.

There are different methods of doing this which I’ll be explaining below so take your time to read till the end.

In other to Add Color Background to your gadget title, you will have to change the Sidebar Title Background Color in your Html Template if you can not do it via Template Designer. But both methods has been provided for you and also how to use a customized image to make it more attractive and unique.

1st Method

1. Login to your Blogger Dashboard

2. Go to Layout > Edit Html.

3. Press CTRL+F and Search for sidebar h2 {

4. Then add background-color:#007788; just after the sidebar h2 {

5. After that it will look like this sidebar h2 {background-color:#007788

Note:You may not find sidebar h2 { Then Look for /* Sidebar Content Just below it add the following code .sidebar h2 {background-color:#007788;}

Note: Change the color code in red to your desired color in-order to match your blog design.

If you want to change main post gadget title background on blogger Look for

/* Headings

And add the following codes below it instead of the one above.
background:#007788;

2nd Method

1. Login to your Blogger Dashboard

2. Click on Design > Template Designer > Advanced (at your left side) scroll down and select > Add CSS > input the follow code below inside the box provided #Gadget ID h2 {background-color:#000000;}

You will have to change the color code in red to the color that matches your blogger template design.

If you want to apply color background on all gadget title, then use this code instead:

.widget h2 {background-color:#000000;}

3rd Method

This method is for those wishing to use image or picture as a Background to their Gadget Title.

All you have to do is, Design a picture or Image using Adobe Photoshop, Corel draw or any software you can use to design a picture.

Upload your image to Blogger and get the Image url, after doing these, follow the above step to to complete the bellow steps:

Use any one of the following code and paste in the provided box.

#Gadget ID h2 {background-image:url(‘YOUR IMAGE’);}

OR

.widget h2 {background-image:url(‘YOUR IMAGE’);}

Change the YOUR IMAGE to the image url you get earlier.

Save your changes clicking on Apply To Template.

Happy Blogging! Share!