Search This Blog

Tuesday, September 04, 2007

Easy way to add picture to sidebar

I have published posts on how to add pictures in the sidebar, including

Old classic Blogger template: add picture to sidebar (click BACK button to get back to this page)

Old classic Blogger template: add picture to sidebar Part 2

New Blogger template: add picture to sidebar.

There is now (it has been available for quite some time already) an easier way to do it. Sign into Blogger (Dashboard), click LAYOUT for the relevant blog, click ADD A PAGE ELEMENT in the sidebar section, in the pop-up, select Picture (see screenshot). Click "Add to blog" and then either click "Browse" and locate the picture you want uploaded or if it is a picture already hosted on the web, type or copy-paste its URL into the relevant box. Now you can easily add Title and Caption for the picture. To ensure that the picture fits the sidebar, it is advisable to tick "Shrink to fit", otherwise you will first have to resize your picture to a size suitable for the sidebar and save it to the computer before you "browse" to the resized photo.

Amazon products for digital photography

Once all that is done, click "Save changes" and wait for the photo to be uploaded. The only drawback to this method is that you do not have the option to make the picture clickable (a hyperlink) unlike the method described in the post New Blogger template: add picture to sidebar.


  1. Help! I've been trying for a month now to do this. When I originally started my blog, I had a photo, then I deleted the element to go back and add a different photo. Now when I click add photo to blog, on the pop up window it's not letting me "browse" and it's not excepting any URL's from the web. It reads "Please specify an image" any suggestions would be appreciated.
    Thanks, Tina

  2. Hi Tina,

    Whenever I meet problems like this, my natural reaction is to use another browser. Any surprise I now have 5 browsers in my computer? Just yesterday I had problems getting things done with my online banking. I changed to another browser and whatever I wanted done was done within micro seconds. See What to do when you cannot log in, open a page, upload photos, etc.. However I do not guarantee that will solve your problem. It depend on what is causing the problem. Why don't you let us have the URL
    of the photo. If the URL is very long, don't paste it directly into the comment as it will become a long unbroken line and become a problem. Make it a clickable link. See How to make a clickable link. Concentrate on the HTML part of the post.

    Peter (Blog*Star)
    The easiest way to earn something for your blogging efforts

  3. Peter!! Thank you so much for your useful blog! I downloaded Foxfire as another browser, just to try it, since after reading on your blog a little further many people have had success with this browser. It Worked!! No problems right now, with anything. Thanks to you for giving me your time! Much appreciated,
    Tina Dean

  4. HELP HELP HELP!!!!!
    I can't figure out how to make the pictures on my side bar bigger. The post really small.
    Thanks :)

  5. Hi Cheree,

    Using this method, if you tick the box next to "Shrink to fit", the picture should fit the sidebar nicely (it cannot be made wider than the width of the sidebar, otherwise you will problems).

    I just tested using a small image and added it to the sidebar choosing "Shrink to fit". The small image expanded to the width of the sidebar (and got distorted). See Test change comment font color. The image is at the top of the right sidebar, but position may change in the future if I decide to make changes to that test blog.

    Peter (Blog*Star)
    What a grateful blogger did for me
    (no one should feel obligated. Everthing completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

  6. hey,
    first of all thanks a lot for the great ideas and the great tips to become someone capable to enjoy the great things of a blog.

    But about this one I have one question. I put the picture with the new blogger, just adding a new component, but when I see my blog the picture is on the left, and I want it in the middle of the sidebar, in the center. How can I do that. Thanks for everything! :)

  7. Hi Fes,

    First you have to let me know what method you are using to display the image, whether you are uploading direct from Blogger post editor photo upload icon or using the
    <img> tag

    Peter Blog*Star
    Blogger Tips and Tricks

  8. I am using the easiest way, not through HTML but through the editor photo upload, the new option for new blogger.

  9. Hi Fes,

    That is the easiest way, no need to know anything about HTML. But badly limited. You can't make the picture a hyperlinl (How to make a clickable picture (a link) and How to put a clickable picture in the sidebar) and other things you can do with a little knowledger of HTML.

    Peter Blog*Star
    Alternatives to Google AdSense

  10. Hey Peter,
    I want to put a list of pictures on my sidebar. How would I do that? The picture page element only allows one picture to be uploaded...thanks

  11. Hi Celsius,

    You will have to use a HTML/Javascript Page Element instead of the "Add a Picture" Page Element and use the <img> tags. You can put multiple lt;img> which means the sky is the limit as far as numbers of pictures you can add. Hope these posts will give you some idea of how to do it:

    Uploading and manipulating pictures Part 2

    Uploading and manipulating pictures

    Add as series of photos in blog footer (I think this one involves use to the <table> tag, but you don't need to use that unless you want to. What you need to do is to add a <br /> tag to force a line break so your pictures will come one on top of the other.

    Add photo of author at bottom of post

    I am afraid all of them do not answer your question directly but you will have to try to understand what is going on and adapt it to what you want done.

    Peter Blog*Star
    Blogger Tips and Tricks

  12. Hi Celsuis,

    Here is one more I hope can help you indirectly, but you need not make the picture clickable if you don't want, and you can add multiple pictures, just add more <img> tags followed by <br /> tags

    Peter Blog*Star
    Earning Online

  13. Hi Peter!

    Can I make the picture larger? On my screen after I "sized to fit" it was small, although it is a high resolution picture. Any easy HTML tricks or the like? Should I save it a certain size before downloading it to Blogger and not shrink to fit, to make it work better?


  14. Hi Aduladi,

    If you don't "shrink to fit", you may have a problem of too large a photo for the sidebar. See Sidebar at bottom of page. I seldom use this and I am not sure if this method will give the same result but doubt it very much. If you want your visitor to be able to click on the photo (it MUST fit the sidebar), then you need to add the photo another way. If still interested, ask again.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

  15. Hi Peter,

    You seem like the man who can help me. I have successfully posted a picture, in the picture element section of the sidebar on my blog. However, the photo shows up too big on the blog, despite clicking "shrink to fit" and numerous attempts at resizing the photo itself. Could you help? Any suggestions would be greatly appreciated. Many thanks! Kelley

  16. Hi Kelly,

    I tested and it shrunk OK. Unfortunately, the Page Element is WYSIWYG and we only see a photo, not the HTML tag with which we can edit. If you still want the photo, perhaps you can search the template to see if the HTML tag for the photo is displayed in which case you can try to add the attribute width="some numbers" to force the photo to be displayed with width "some numbers". Try expand template before you search for photo in template (but I suspect this will fail as the image is probably encoded in a widget).

    Peter Blog*Star
    Environmentally friendly presents

  17. Hi,
    I've read thru the different questions but still can't find any answer.
    I want a pic on my blog whereby when one click, it will open another webpage showing many other pics. This webpage url must be the same as my blog.
    Example: my blog name: kaimono
    Pic: Instock
    I've seen many people do it but can't find how they did it. Pls help me!

  18. Anonymous9:23 PM

    fes asked a simple question, how to center a picture uploaded to the sidebar using the "easy" method.

    The response was to tell fes that the way he had selected to upload his picture was limited, such that he couldn't use the picture as a link and do other fascinating things. In other words, the expert answered a question fes did NOT ask, and ignored the question he DID.

    I know you guys who answer questions are volunteers, but please try looking at it from our side.

    I am a professional, high-IQ, and I don't want to have to learn how to program to use Blogger. For one thing, I simply don't have the time. If Blogger offers an easy way to upload pictures, presumably they expect us to use it. However, the answer given here to fes' question was, impliedly, DON'T use it. That doesn't make a lot of sense to me.

    If you came to my office asking me how to alleviate your cold symptoms, and I told you to follow a proper diet, wear proper clothing, etc., so you don't get a cold in the first place, would you consider your question addressed? No, you'd be pissed off at me, and you'd have a right to be.

    Answer, or don't answer, but please, don't jerk us around.

  19. Hi Tom,

    Let me be more explicit. When one use the method that fes used, there is no way to center it (or perhaps there is a complicated way which is to edit the CSS in the template but that may affect all other elements [not tested]. If fes really wants to center a photo in the sidebar the only way he/she can do it is to do it my way or I will have to sacrifice to test editing the CSS in the template which even if that succeed may affect others which I or fes may not want. I hope this answer is clear enough for you.

    Lots of bloggers have found this blog and especially my other blog Blogger Tips and Tricks very clear and easy to follow. Check the comments or if you don't have the time, refer to a partial compilation of comments (prepared for another blogger who attacked me).

  20. Anonymous5:04 AM

    This comment has been removed by a blog administrator.

  21. Hi Tom,

    OK I had a brief look at the link you gave. Thanks for the information. I also want to draw your attention to what I added further in my comments:

    "....(or perhaps there is a complicated way which is to edit the CSS in the template but that may affect all other elements [not tested]......."

    I did add "..or perhaps there is a COMPLICATED WAY... CSS...."

    Looks like it is not as complicated complicated as I suspected as there is a line defining the image alignment in the sidebar -

    .sidebar img {

    However, it will mean editing the CSS part of the template.

    Anyway, thanks for the info

  22. Hi All,

    Tom has left a long URL in his response above. I am afraid I will have to delete it. The reason is, the long URL has become a long unbroken line. You can see a screen shot at Use active (clickable) URL in comments. A solution is also provided in the linked page above.

  23. How do I center a image in my sidebar?

  24. Hi Chen,
    I want to use a picture as a hyperlink to another blog i write.As you sugessted,I hosted the picture on photobucket and pasted the link as suggested by you to my side bar.
    Now i'm using,new blogger and i'm not HTML qualified so i posted it in sidebar line as below:
    img src="URL of my picture" alt="" width="" height=""></a
    The image still doesn't appear.Do you want to paste this HTML anywhere below where it says-Sidebar contents?
    Kindly help

  25. Have you got the correct URL for the uploaded photo on the web? Post the photo URL for us to check

  26. I'm trying to enlarge downloaded photos in my widget. I am using the old template. Can you tell me how to change the size of the photo please? Thank you!

  27. Tash, are you saying you are still using these old classic Blogger templates?

    Whatever, you can display photos in whatever size you want if you use the <img> tag. See for example display images in larger sizes

  28. Thank you Peter!

  29. I've Done it But the resolution is Crap But when I open the same Picture in my documents it's HD?! HELP How to make it High resolution in sidebar?!

  30. There are many ways but it is not as easy as what is described in this post. Have a look at some of my existing posts and see if they give you ideas how to proceed otherwise you can request me via my contact form to request for a post specifically to cover what you asked.

    Any here are some of my posts:
    How to put an image in the sidebar
    How to put image in the sidebar
    How to put a clickable picture in the sidebar

    Hey maybe those should answer your question?

  31. Hi Peter, I tried all day to add a picture on the sidebar. I have tried to understand all your solutions but, after 6 hours I think that in 2011, the setup is different. Do you think that you could help me change the text link to a clickable image?
    Many thanks,

  32. I tested uploading an image to Testing Blogger, the image is a QR code and the test was successful. The uploaded image is currently at the top of the second right sidebar at Testing Blogger. In fact that widget has improved because it now offer more options, only thing is the "shrink to fit" didn't seem to work.

    BTW if you have an Internet enabled handphone, tablet or other devices and have installed a QR Code scanner apps, you can scan that image and email me direct. You can also view the QR Code at <a href="


Related Posts Plugin for WordPress, Blogger...

Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by

Disclaimer: This blog has no relation with Wiley Publications