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

Create your own Contact Form with Kontactr for Blogger

Image
Kontactr is one of the simplest, fast, light weight and effective contact forms that I ever came across. It is not only easy to create but is also like a breeze to add it to Blogger. I have already told the main features but it does not end here. It has got CAPTCHA protection to stop all those spam massages and the best of all is it’s free. You need to follow some easy steps and you are ready to receive all those important emails. Step 1: Visit Kontactr and signup. Step 2: After confirmation, login and copy the codes given in “AJAX Widget”. Step 3: Login to Blogger and create a page form Pages tab (also known as “ static page ”) from your blog's dashboard . Give the page a title, like, “Contact me” or anything that you like. Step 4: Paste the copied code (as told in step 2) and Publish the page. That is it. However, you can also customize it so that it matches the background color of your blog. There are some other options too, for example, instead of a form, you can hav
Read more

Add Google Website Translator to Blogger

Image
Why use any other translate widgets with or without images of country flags when Google translator widget can translate texts of any webpage and is capable of translating to 64 different languages (and increasing) automatically and instantly to readers speaking language. Google translator for websites can be added to any website or CMS, like WordPress, Blogger, Tumblr, etc. with ease. While the steps of adding this widget is all same but here I will mainly write about how it can be added to Blogger blogs. Blogger has this widget, you just need to go to your blog’s Layout tab and click “Add a Gadget” link. A popup page will open, scroll down below and you will find the Google Translate gadget. But there aren’t much options to select from to customize it, that’s why let’s add it in a different way.
Read more