Thursday, June 9, 2011

How to Fix Overhanging Sidebar Images

How to fix Overhanging

Sidebar Images

What You Will Learn

Have you ever tried to add a picture to your sidebar, but the picture is too large for the sidebars? You end up with a picture that hangs outside the sidebars and looks messy. Today you’re going to learn how to fix those pesky overhanging pictures.

Let's Do This!

If you've added the picture using the "Add a Picture" gadget, you'll first want to remove the picture from your sidebar. Before you remove it, make sure you save the picture and host it somewhere (Photobucket, TinyPic, etc).

Now you're going to put the picture back properly. Instead of clicking on the “Add a Picture” widget, you’re going to use the HTML/JavaScript widget. This is how you do it:

The part inBLUE is the url of your picture. Paste your url in this spot.

The part inPINK is the important part. Right now I have it set for 100% which means that your picture will automatically adjust itself to fit the width of your sidebars. If you want it to have a little space between the picture edges and the edges of your sidebar then just adjust this number a little lower (99% 98% 97% etc, whichever you prefer).

This part in pink is a nifty bit of code you can use for all sorts of things that you'd want to control the width. In a future Blogging Tips and Tricks post I'll show you another way this bit of code can come in handy.

20 comments:

Interesting! I never knew that. The way I've been doing it is that I know my sidebars are about width 150 so I will put width="150" and then have to approximate the height so that the image isn't stretched or squished. But your way is so much better!

you are a genius! Thank you so much for sharing! Now my blog looks a lot more professional. The review rating that I had made myself was always hanging over the edge but now it looks so snazzy! Thank you!

I'm always running into problems with this, because my small sidebars are really small! I'm just wondering if this will work for countdown widgets? I usually don't have them, but I wanted to put the countdown widget for Lola and the Boy Next Door on my blog. Only problem is it's too big and however I try I can't seem to resize it.

Aylee, The way you were doing it works too, but like you said, you kind of have to guess on the height and it can stretch the picture funny. This way it automatically adjusts.

Leanna, No, I don’t think this will work for countdown widgets, and I know it won’t work for the Lola widget (I checked for you). When you add a countdown widget, usually you’re just adding code that “reflects” the widget that is being hosted elsewhere. So effectively your computer is reading it as “Look for this widget hosted on X website and then display a copy of it on my page” It’s like your computer is acting as a mirror and it is reflecting the image they’ve created. Since it’s just referencing something that already exists, you can only call in an exact copy of what they have hosted. You can’t adjust it in any way.

Smalls, do you know how to work with new blogger templates, specifically the Simple template. I'm having trouble formatting the new template I'm working on. Can't get the header section centered, and I've done endless google searches for answers but have found none. :(

Rubita, Sounds like something is missing or wrong so the code isn't being read properly. Double check and make sure every character/space is there and that there aren't any extra characters/spaces. If you want you can email me your code and I can take a look at it for you.