Custom Search

Wednesday, February 18, 2009

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

1 comments:

Euroangel said...

na bilib jud ko sa imo talent higala uy..ako wa ko talent ani...saon man daan naman to na program ako hibaw-an sauna...thanks for sharing anyway..might try it next time...oppppsss...don't worry..just keep on hoping and praying!! all your dreams will slowly come true!! God bless you too!! amping diha kanunay..

Post a Comment

Please subscribe to my rssfeed 16x16 button Subscribe to my RSS Feed or email subscription 16x16 button Subscribe via Email if you want to receive updates. Thanks! ^_^