Sidebar Title Background Color and Image

By: Pradeep Lodhi on 5:43 PM

The sidebar usually has many different widgets, ranging from links to labels to advertisements. It is wise to make the Headers in the sidebar stand out from the contents. Navigation will be easier for the readers, and with a unique choice of colors, you can draw the attention of the readers to these widgets.

Background Color

We can add a background color or a background image to the sidebar titles. Log in to your Dashboard and go to Template -> Edit HTML. In many of the templates, the sidebar styles are found here:-

h2 { background:#FFFF00;

Add the above background color code and Preview the template. Do not save. Because there are many different types of templates, you have to first confirm that this is where your sidebar header styles are situated.

If you see the yellow backdrop to the sidebar Headers, you can then change the color to something that suits your Blog. For a list of color codes, you may refer to our Color Code Chart. If you don't see the yellow color, you can try inserting the color code under h3 or h4.

Background Image

To add a background image, first create the image. After that, upload the image to a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL. Take note of the Image URL. See that when you enter this Image URL into your browser, you are able to view the image, instead of being prompted to download it.

Insert the background image code here:-

h2 { background:url(http://www.blogpulp.com/imagehost/images/381245101.jpg);

If you have not yet created an image, you can use the above Image URL to test and Preview the template to see the effect. You should see this:-

Now, replace the part in purple with the URL of the image that you have created. The sidebar Headers will have this image as a background. There are further attributes on positioning, repeating the image, etc. which can be included. If you are interested, you can adopt the attributes discussed in our Background Image for Blogger Template article.

One more thing. In the Minima template for instance, the Date header in the Blog Posts uses the same h2 header element. If you have added a background color to the sidebar title, you may also see the same background color in the Date of the Blog Post. You won't want that. Therefore, insert another background color to that Date header element:-

h2.date-header { background:#ffffff;

Here, what we have done is to fix the background color of the Date header as white to be consistent with the background color of our Blog Posts. Change the color code to your Blog Posts background. Preview and save the template.


@ Copyright 2012 Pradeep Lodhi (ethical hacker)