How to put Icons or Images on every blogger widget

Sponsored Links

This is a step by step tutorial on how to put Icons or Images on every blogger widget. To better understand what I am saying, please see screen shot below. 1. Login to your Blogger account.

2. Backup you Template.

3. Locate the code below:

.main .Blog {
border-bottom-width: 0;
}

If you can't locate the code above, then probably you are using a customized template. In this tutorial I just played with Blogger's Minima template.

4. After the code above, copy and paste the code below:

.sidebar .widget h2 {
background: yellow url('http://i426.photobucket.com/albums/pp341/PinoyINGermany/twitter.png') no-repeat left top;
margin-top:5px;
text-indent: 20px;
padding:7px;
}

5. Click SAVE TEMPLATE and view your blog.

I just used a StumbleUpon image to make this tutorial easier to understand. I also added a Yellow background so that you can distinguish on where the icon or image is positioned. The left value in the code puts the icon on the left side of the blogger widget. I encourage you to experiment, change the image by just replacing the background url and try changing the values of the code. If you have questions, please don't hesitate to ask and I will help you with all my powers.hehe