Unique Background Images for Widgets
I also wanna know, is it possible to assign a different background image to each widget?
Gelo, yes, it is possible! As you can see in the images below. Top is the normal widgets. Bottom is the same widgets with background images in place.
To achieve this takes a little sleuth work. Each widget has a unique name. In this example, I have three widgets:
- LinkList1
- Text1
- BlogArchive1
My search turned up: <b:widget id='LinkList1' locked='false' title='link widget' type='LinkList'/> So, my unique ID here is LinkList1.
After you find and identify each widget's unique ID, you will do a little work in the CSS Style Sheet. It doesn't make any difference where you actually place this code, but for neatness sake you can make a new group called Widgets.
/* Widgets
----------------------------------------------- */
Of course, you could have LinkList2, LinkList2, Text2, HTML1, etc.
For each widget that you want to add an image to, add the code as I have below to the CSS Style Sheet.
#LinkList1{And, that is that.
background: #fff url(IMAGE URL) no-repeat;
}
#Text1{
background: #fff url(IMAGE URL) no-repeat;
}
#BlogArchive1{
background: #fff url(IMAGE URL) no-repeat;
}
44 Comments:
Great, as usual. I did it on a couple of widgets, just to make sure I don't go overboard. I think it looks pretty cool.
Wow! Thanks for the swift response! Will try it now...
Wow.. thanks for the tricks. I will try it soon.
Thank Annie. I did for my blog archive and it looks awesome.
Just one aqury. How can I add to label clouds coz it looks so white with words and no background.
Hello - sorry unable to leave an Entrecard drop as I am not able to see your visitors card!
@Anonymous, that is strange. It is right under my label cloud. I can see it.
Awesome post...I found you on entrecard, you've got some great tips and easy instruction...I'll be here regularly!
Just wanted to say the header on your blog is empty. I can only assume that it's a problem with ripway, because that's what happened with the blogu students blogroll button. I mentioned in that email I sent you (the one that got lost somewhere in one of the internet tubes), that ripway is often very unreliable, and that instead of using the link you put to the ripway button, I just saved that picture and uploaded it as a private picture to my flickr account. I know we can't argue with free stuff, but as long as ripway is so unreliable, I'm only going to use them for file types that otherwise I can't use with flickr.
Wow, you offer a lot of help for bloggers using blogspot. You're about a week too late for me, sadly as I'm in mid-Wordpress switch-over. I love your blog and it's amazing the stuff you know how to do with blogger. I've been on there for months and have gotten nowhere need you.
I'm still on blogger as of now over at
Melbel's Post-a-Day
@People in the Sun, It has always been a fast and dependable service for me. As my readership grows, it has put more demands on the daily downloads. Here is the message I received:
"In the last 24 hours, you have used 150.18MB(100%) of your daily download allowance. If downloads from your account over a 24 hour period exceeds your daily limit, public downloads from your account will be temporarily disabled."
It will straighten out soon, and in the meanwhile I will come up with a solution.
nice :) thnx
Rani the Brainy | General Fun
Thanks for the great information
SEO Best Tips Search Engine
I really like the site. Great ideas on here to help out other bloggers. Would you be open to a link swap? At least check mine out and let me know if there's any tweaks you would do?
Thanks a lot annie..
i use it, and it works..and i write your tips in Indonesian language..
so i need permission to you..
my post about change background images
best regard,
cempluk
@cempluk, Thanks for the translation. As long as you credit and link back to BlogU, which you do, I don't mind!
IQ Question
I'm looking for this quite some time and finally i get it here. By the way, can we adjust the size?
Hi Annie... what do I do if the image I want to use is on my pc instead?
@Ruth, upload it to a web host like Ripway and then use the url of the image there.
ok...thank you.
Hello,
Nice post I like your site very well and continue to do so. I have bookmark your site.
Hi,
I tried this but doesn't seem to work for me. Could you help me please.
Thanks!
Hi,
I love to read your Blog Verymuch.
Now my Blog looks cool with this hack
Computer Tips & Tricks
Thank you! This was exactly what I was looking for so I could put a background on my widget above comments :) My Blog looks so much better now!
http://ahensnest.blogspot.com
Great but where tio put /* Widgets
----------------------------------------------- */
and
#LinkList1{
background: #fff url(IMAGE URL) no-repeat;
}
#Text1{
background: #fff url(IMAGE URL) no-repeat;
}
#BlogArchive1{
background: #fff url(IMAGE URL) no-repeat;
}
Please reply...
http://hacktutors.blogspot.com
Hack Tutors
Thank YOuu!!!
This is what I'm looking for, thanks
Thanks for the post...It is a great help for me to improve my widget.It really look nice, creative and colorful...It makes boring articles look interesting to readers...I would absolutely use this for my site and willing to share this with my friends.
Thanks for the post...This is a great help for me to improve my widget...It looks nice, creative and colorful...It makes boring stories and articles interesting to readers.
I would be willing to share this with my friends.
hi, thanx for this great tutorial. Actually i got problem.. The image for background doesnt show.. I already follow the step..still not make it.. my question is :
1.what format of image? jpg, png, gif or..
2. size of image?
3. what are common error for this technique?
Thanx in advance n keep it up..
Thank you! Adding a background is much easier than I thought it would be. Guess I should stop putting it off and get to it, my blog could use some sprucing up.
I think your widgets must be properly aligned! A lot of stuff are here and there, especially the ones at the bottom. Make sure you remove the thumbnails from all the read more section. Simply because it looks ugly. Follow the old method of read more like in my blog. And nothing more. You can put a label cloud instead of so many texts. Those are some tips that I could give you from my blogging experience,
aahh... You rocked ! thanks a lot...i hope it will solve my problem....i wish yoou to visit my lil blog and pass your comments and suggestions coz i m new to blogger..plzzzz...
Really cool unique backgrounds you've got there.. im gonna change mine today:) I think im gonna start reading your blog more from now:)
This is really helpful information for a non-techie person like myself. I thought I was going to have to take a course at my local college to figure out this kind of stuff, but with this site I think I can do this following your clear instructions. This should help me figure out some things on my site. Thanks
Took me time to read all the comments, but I really enjoyed the article. It proved to be very useful to me and I am sure to all the commenters here!
I think if we have a picture in background,it will be slow for loading blog.
I am going to say what everyone else have not said above, but i must say , you are genuinely well-informed.I cannot believe how much of this I just was not conscious of .Thanks for submitting more data on this topic for us .I’m truly happy and really impressed.
it is very easy for me to apply .. thanks
but how to get a unique background anyone know the address
Yeah.. I must agree that these are some unique background images.
Thanks very much! Another note to remember if you are using background images, use a GIF or a JPEG instead of PNG. PNG backgrounds won't show up in IE6 :(
Thanks for trick !! This is excellent idea of adding background images for widgets and making your blog more attractive. Certainly, I will use GIF or a JPEG ext.
Thank you for the great tips. These will come in handy for setting up my new blog. I certainly don't want an ugly blog, there's enough og those around already.
This article is really really really helpful to me.Adding a background is much easier than I thought it would be. Guess I should stop putting it off and get to it, my blog could use some sprucing up
I know this is a relatively old post, but I wanted to say thank you for the answer.
Your solution to make a different background for each widget on the side of the page is simple but effective. And that's all what matters.
Sometimes a widget background makes it harder for the visitor to read the text, but with this fix you can also just change the background color instead for each widget.
Where to fint these unique names of widgets?