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="http://www.smallreview.blogspot.com"><img src="http://i51.tinypic.com/34gwkm9.jpg/4124/5192724855_fce67087f9_o.png" 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="http://i51.tinypic.com/34gwkm9.jpg" 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
Tweet
Click here to read previous How To Posts
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!
ReplyDeleteyou 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!
ReplyDeleteThis 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.
ReplyDeletethanks!
Small, I LOVE you. This is exactly the lesson I needed. Thank you!
ReplyDeleteAgain THANK YOU! I am always struggling with blogger. You are the best!
ReplyDeleteThat is so cool! Definitely good information. You explained it really well. I feel like I can do this now.
ReplyDeleteGreat tip!! We definitely see a lot of overhanging sidebar images.
ReplyDeleteI'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.
ReplyDeleteYou’re so welcome everyone! :D
ReplyDeleteAylee, 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.
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
ReplyDeleteSmalls, 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. :(
ReplyDeleteGlad it helped, Jodie!
ReplyDeleteMissie, Maybe? If you want you can email me your template code and I can take a look and see what's going on there. :)
Thanks so much for sharing today.
ReplyDeleteI 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.
ReplyDeleteI can't do it, Small. All I get is either blank space or code. What am I doing wrong?
ReplyDeleteRubita, 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.
ReplyDeleteThanks so much for checking for me on the countdown widget! x
ReplyDeleteSmall- I'm adding the pictures from HTML and there is no option for width and height. What do I do?
ReplyDeleteHeather
You're welcome, Leanna!
ReplyDeleteHeather, Just type in width="100%" where I have it (between the url" and the /> )
SO glad you're passing this on. It's a huge pet peeve when I see the images in the sidebars too big.
ReplyDelete