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.

Popular posts from this blog

How to Resize Blogger Header to Logo Size

Image
One of the drawbacks of Blogger is its header. When you are using text as your blog title, you will find that there is no problem but when you add an image or logo to the header portion instead of title and description or having description placed after the image from Layout tab, you will find that it’s not the logo but the whole header becomes clickable. So in this tutorial we will find out how to resize the Blogger header in new templates.
Read more

Google Penguin update hit me Hard

Image
On April 24, 2012, Google released a new search algorithm , later it was named Penguin. This was mainly meant to stop “webspam”, that is, mainly to bring down the sites which use “black hat” methods to rank well in Search Engine Result Pages (SERPs), like, violating webmasters guidelines , keyword stuffing, participating in link schemes, etc. When I read it I was happy that after the Panda update , Google moved a step forward to stop those spam sites who wishes to rank well within SERPs by shortcut methods. But as days passed, I became very sad and depressed as I found out that my blog also got hit by this update. My traffic dropped below 50%, some of my great posts cannot be found within SERPs and some went very down.
Read more