Simple Blogger Tutorials

How to Add Image to Sidebar Titles in Blogger

In this tutorial I will tell you how to customize and add image or icons to Blogger sidebar titles.

First we need an image that you want to add. It can be a small vertical image that can be repeated throughout the width of the sidebar title or just a fixed icon.

If you are good at drawing, then you can create an image with specific height and width. The width of the image should be same with the width of the sidebar, so find for #sidebar or #sidebar-wrapper and see the width given in pixels (px).

Second, we have to find the CSS property that controls the style of the sidebar title. Generally it is “.sidebar h2”, so replace it with the below codes. But some of you may do not have this property. So add it before ]]></b:skin>.

.sidebar h2 {

height: 25px;

width: 210px;

padding-top: 5px;

padding-left: 5px;

margin-top:5px;

background-image: url(your image URL);

background-repeat: repeat-x;

background-color: black;

color: #ffffff;

font-size: 12px;

}

Explanation:

Set the height and width with the image’s height and width. If you are using an icon or a small image that you want to repeat, then delete the width property.

Replace “your image URL” with the URL of the hosted image of yours.

Change the background-color with the color you want. If you don’t want any color then delete this property.

Color property is used for the font color. If you are using a darker image, then change the color to something light or if are using a lighter image then change the color to dark hex values.

Font-size is used to get the desired size of the font to be used to sidebar titles.

Properties padding is used to move the title font to fit in with the sidebar style, while, margin-top is used in getting a distance between two widgets. Here’s a small tutorial on how margins and paddings works in CSS .

Use the property “background-repeat” to tell the browser whether to repeat the image or to not to. Use repeat-x to repeat the image horizontally, repeat-y for vertically. If you are using an icon then add: no-repeat. Further information on W3 school background repeat.

Note: This is a complicated process for newbies while intermediates and pros can do it comfortably. For some highly customized templates, this tutorial may be difficult to implement, so helping some of you may not be possible as it is time consuming. So my suggestion is to setup a test blog with Minima template as it is easy to understand and try this out first. If you succeed in adding image or icon to the blogger sidebar titles, then only try this out on your template.

1 comment :

Like