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:

Go to Design -> Page Elements -> Add a Gadget -> HTML/JavaScript

Now paste in this code:

<center><a href=""><img src="" width="100%"/></a></center>

The part in RED is the link people will be taken to if they click on your picture. If your picture does not have a link, then use this code instead:

<center><img src="" width="100%"/></center>

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

The part in PINK 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.

The form is anonymous, so please don't feel shy at all!

I'm certainly not an expert, but I'll try my hardest to explain what I do know and research what I don't know.

Click here to read previous How To Posts 


  1. 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!

  2. 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!

  3. This is awesome! I usually struggle a lot with the whole have to fumble with the size thing a lot before I can get it to work, this seems more simple.


  4. Small, I LOVE you. This is exactly the lesson I needed. Thank you!

  5. Again THANK YOU! I am always struggling with blogger. You are the best!

  6. That is so cool! Definitely good information. You explained it really well. I feel like I can do this now.

  7. Great tip!! We definitely see a lot of overhanging sidebar images.

  8. 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.

  9. You’re so welcome everyone! :D

    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.

  10. Oh this is the easy way, l always adjust the height and width which can be tricky as the picture goes strange and spend 30 minutes sorting it out! lol thanks

  11. 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. :(

  12. Glad it helped, Jodie!

    Missie, Maybe? If you want you can email me your template code and I can take a look and see what's going on there. :)

  13. Thanks so much for sharing today.

  14. I do it Aylee's way, and just set the width. If there's height specified, I just delete the height out of the code and it adjusts automatically. I should try the percentage thing, though! So smart.

  15. I can't do it, Small. All I get is either blank space or code. What am I doing wrong?

  16. 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.

  17. Thanks so much for checking for me on the countdown widget! x

  18. Small- I'm adding the pictures from HTML and there is no option for width and height. What do I do?


  19. You're welcome, Leanna!

    Heather, Just type in width="100%" where I have it (between the url" and the /> )

  20. SO glad you're passing this on. It's a huge pet peeve when I see the images in the sidebars too big.


It's all about friendly conversation here at Small Review :) I'd love to hear your thoughts!

Be sure to check back again because I do make every effort to reply to your comments here.

Because I am absolutely terrible about following through with blog awards, I can't in good conscience accept any more. Thank you very much for thinking of me though!

Spam WILL be deleted. Attacks on myself or other comments WILL be deleted.

Related Posts Plugin for WordPress, Blogger...