Thursday, February 08, 2007

Getting New Blogger (formerly beta) to host your photo for the profile, sidebar, etc

Update 14 July 2007: I have preferred to use Blogger to host my photos rather than third party photo host like Photobucket because of doubts regarding the long term stability of Photobucket, but they have recently been confirmed to be taken over on On May 30, 2007 by Fox Interactive Media, a News Corporation subsidiary at a price rumoured to be as high as $250 million US. So Photobucket is now backed by a big and financially stable corporation and I no longer have that reluctance to use Photobucket to host photos for my blogs. Using that may be easier than the convoluted steps outlined below:

I have written a previous post on how to get Blogger to host your photo for the profile, sidebar, <img> tags, etc at Getting Blogger to host your pictures for the profile, sidebar, etc.. However, tests have shown this method no longer works.

For New Blogger, this is what you have to do. Upload your photo to a post which if you don't want it to be on the main page, pre-date it to 2005 or something, or even in a blog created specially to host pictures (Blogger does not limit the number of blogs you can create). I upload this photo as an example:

Kuala Lumpur night skyline with copyright notice
Kuala Lumpur night skyline


Click on the picture (or the caption) to get an enlarged version of the photo. In the method describe previously, you will use the URL in the address bar of this page. Don't. It wouldn't work now. You can try it yourself if you want. Try putting that URL into the Photo URL in the EDIT PROFILE page and confirm for yourself that it can't be done. You will get the error message "Cannot find file at specified URL: link is broken (failed request)" and if you have already put in your profile photo, that will remain as this attempt will fail to replace it. You can also try putting that photo into the sidebar using "Add a Page Element" in the Layout, choosing "Picture" in the pop-up, and putting that URL in "Configure Image" page. You will get the error message "Please specify an image". Putting that URL int the <img src="photo URL"> tag will also not display a photo.

Instead, in the page containing the enlarged photo, in the menu bar, click VIEW > PAGE SOURCE to get the source code for the page. In this case, the source code is as given in the scroll box below:

<html>
<head>
<title>copyright+notice.jpg (image)</title>
<script type="text/javascript">
<!--
if (top.location != self.location) top.location = self.location;
// -->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="http://lh6.google.com/_jizoPL28qCY/RcqnvLgvPBI/AAAAAAAAABs/9tHhSLWaElM/s1600/copyright%2Bnotice.jpg" alt="[copyright+notice.jpg]" border=0>
</body>
</html>


And almost at the end of the codes, you will see src="http://1h6.google.com/.....
I have to put the full URL in a scroll box, otherwise the long unbroken URL will extend into the right sidebar (FireFox) or cause the sidebar to slide to the bottom of the page:

http://lh6.google.com/_jizoPL28qCY/RcqnvLgvPBI/AAAAAAAAABs/9tHhSLWaElM/s1600/copyright%2Bnotice.jpg


This should be the photo URL you should use for the profile photo, for inclusion in the <img src="photo URL"> tag, for Picture in the sidebar, etc.

Update 12 April 2007: I have made the actual photo URL in the first scrollbox red so it is easier to spot.

Incidentally, the above photo is copyright of Tourism Malaysia in which I have put a copyright notice at the bottom right of the photo. I will describe how to put a copyright notice in your photo in a post in Dummies Guide to Google Blogger. (I have just added that post to that blog. You can read it here: A simple way to put a copyright notice to your photos

The photo can be used to promote tourism to Malaysia. 2007 is Visit Malaysia Year, and many programs have been planned for visitors and this will be a good year to visit Malaysia. For more information, see Guide to Malaysia.

Acknowledgement: This tip was provided by my online friend sookietex of Public Domain Clipart

37 comments:

  1. Is there an alternative for, "How to make your picture as a background" too? I tried this method (http://blogger-tricks.blogspot.com/2006/04/how-to-make-picture-as-background.html) but it doesn't seem to work.

    ReplyDelete
  2. Thanks Peter... Now that I have converted all of my blogs to my google account, they all share the same profile. I did this accidentally (forgetting that I had one blog set up on a seperate Google account previously). Is there a way to get it all back? Or at least to have individual profiles for each blog?

    Cheers. E-baby

    ReplyDelete
  3. I have no experience with this although I have different Blogger accounts with different accounts. I have been careful to use different email address with them. See post Why you should be using more than 1 browsser.

    If the gmail account you mentioned is listed as the original owner, you are probably stuck as original pwner can't be removed. The only way if you are really determined is to start a new blog and transfer the posts manually.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  4. Thank you. I wasted a lot of time trying to follow the standard directions. With your help I got it up and running on the first try. Later I'll implement your additional suggestion to create a separate blog just to store and source my photos. For now, at least, I understand the process.

    -Art

    ReplyDelete
  5. It doesn't give this lh6.google.com address anymore now... Only the bp3.blooger.com address... What has happened? I found your post, after having problems hosting photos in my sidebar...

    ReplyDelete
  6. Something has changed. They must have changed the way they host photos. Previously, you can never delete the photos from the web, even if you delete the post, you delete the photo, etc in your post editor. The picture remains on the web. Now you can delete the post, and the picture disappear from the web. Also, you can't take the URL directly from the address bar of the photo as before. You must view source, then get the actual URL of the photo from the HTML.

    Peter
    Natural Remedies

    ReplyDelete
  7. But THIS doesn't work anymore either, Peter. Check it out yourself through view and source.

    I DID solve the problem with posting photos in the sidebar though. If you want more than just a photo (so f.e. with a link or other html) in your sidebar, click add a page element, then click add a photo, then add and publish it. Then, on your blog, look up the real address by right clicking your mouse and clicking on properties.

    Then use that address when adding a photo + html in your sidebar through "add html".

    So: first you add a picture, then you copy the address and then you use it in your html.

    ReplyDelete
  8. Not very clear the method you are using, but I just recently hosted a screenshot for use in a <img> tag when doing some testing with Windows Live Writer, and I used the method described in the post. And the screenshot was displayed OK. See post Testing various ways of publishing photos with Windows Live Writer

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  9. hello, love the blog...good stuff.

    can you tell me how to manipulate the html regarding the size of the header. I shortened my title description and i lost a good bit of the background picture as a result...how can i increase the size of the header so that the whole picture shows??

    thanks for your help,
    david

    ReplyDelete
  10. Hi, I just followed your instructions and have a fabulous picture in my header! Thanks so much for sharing your expertise. Mrs Fashion x

    ReplyDelete
  11. Thank you, thank you, thank you! I was about to give up on ever changing my profile pic again -- who knew it was so simple? You, apparently. THANKS!

    ReplyDelete
  12. Thank you very much for the profile photo hint. At first the address in View/Page Source looked identical, but it was slightly different. Much appreciated!

    ReplyDelete
  13. Can photos be used as backgriund photos is sidebar elements? if so how?

    ReplyDelete
  14. Hi Roy and Emily,

    Try this:

    #sidebar-wrapper {
    width: 150px;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    background: url(URL of photo);
    }

    I have tested it out with this test blog Dummies Test Blog.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  15. thanks....worked great for my profile. one more....how about backgroung photos for widgets?

    ReplyDelete
  16. Hi kdsmooth,

    I managed to get it to work for sidebar. See How to add background picture to the sidebar, but failed to get it only to a particular widget. I hope having a picture background for the sidebar is sufficient for you.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  17. Hi kdsmooth,

    Sorry, got you mixed up with Roy and Emily and missed your earlier question and my response.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  18. Thank you, thank you, thank you!! I have been pulling my hair out for quite a while, trying to figure out how to get my photo in my profile. It worked the first time after I read this post. Thanks for sharing your knowledge with us!

    ReplyDelete
  19. I know you probably get a ton of posts for help...and unfortunatly I'm one of them. I can't get any answers from blogger.com.

    I followed your directions and I still have the same problem but different from what you have described. I receive no error message. I hit Save Profile and it looks like it does but when it reloads the exact same picture and html is in the box...as if I did nothing?!??!

    Have you heard of this and do you know what to do about it? Any help would be MUCH appreicated! Thanks!

    ReplyDelete
  20. Hi The Blakes,

    I suspect you are seeing a cached copy of your site in your computer. If so, it is nothing to worry about as others will see the new photo. Refer to What to do when you don't see new post, etc., changes after adding Page Elements, after editing the template, etc

    Peter aka Enviroman
    http://enviromansays.blogspot.com
    (floods in England, polar ice and ice caps at moutain peaks melting, I think more severe and frequent hurricanes in US, rain when it is supposed to be a dry season in my country, someone from Queensland recently contacted me if I noticed the weather changing. I replied when I was young I had to sleep under the blanket, but now I sleep topless. If I remembered, he said it is freezing in tropical Queensland and now he has to sleep under a blanket. Please folks, take good care of our one and only Spaceship Earth which have no lifeboat. It may not affect us severely now, but it has every chance of severely affecting our future generations. Then they will have lots to be "thankful to us).

    ReplyDelete
  21. Hey Peter- I scanned a onto a CD, a floppy disk and onto the computer(my files/my pictures). I'm certain that I've saved it as a jpeg but the image will not transfer onto my blog profile(I'd like to have an accompanying image when I visit hosts).I've attempted this via the standard blog templates and photobucket. Any simplified suggestions?Thank you.

    ReplyDelete
  22. Did you do it as the post instructed? If so there should be no problem. Even if you do the old method (direct from address bar of the webpage of the photo, I think I tried that once and it worked again. Not sure). If you uploaded it to Photobucket, there should be no problem. Upload it to a blog post (specially created blog or a backdated post in your present blog which you can delete later) or email me (via sidebar of my blog) and attach the photo and I will test it out.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  23. Hi, I am trying to follow your instructions but please can you tell me where the view source page is, i cannot find it anywhere! Thanks for you help!
    Gena

    ReplyDelete
  24. Hi Genedry,

    Not exactly what is your problem. If you are referring to how to get to open the source page, you should see VIEW in the menu bar of any browser.

    If you are referring to the actual source page, once you click VIEW > PAGE SOURCE in the menu bar, the source page will open a a new window.

    If you are still not clear, perhaps comment again and either describe your difficulties a little bit more (that would be helpful) or just say you still don't understand me and I will see what I can do after I finish all the tasks that has datelines plus the other things I promise other bloggers to do.

    Remind me if I forget by making a comment.

    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)

    ReplyDelete
  25. Awesome.
    It was getting real annoying.
    TY TY

    ReplyDelete
  26. I have been trying to work on my blog lately and to add the background as an image but everytime I try to do it it goes white

    can anyone please help me

    contact me thru email
    chaseevansxxx@aol.com

    Chase

    ReplyDelete
  27. Hi Chase,

    I am afraid there is not enough info to work on your problem.

    Also, I don't normally respond to comments via emails plus putting your email address in the comment can expose it to email harvestor for spam.

    Nearly all the time, if the profile is made public, I will check the blogs in the profile and comment to let it be known that the comment has been responded to.


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

    ReplyDelete
  28. Forgot, it will be good to copy-paste the URL of the post where you made a comment into a Notepad file and save it into a "to do" folder. That is what I do when I want to check if there is a respond to a comment I make in other's blog.

    Peter Blog*Star
    Alternatives to Google AdSense

    ReplyDelete
  29. Hi Peter,
    How do you upload an image to your profile? I'd like to have a small image when I leave a comment on others' blogs. I tried to upload it with my image on computer and flickr account. I got the error message - invalid image URL. Could you help? Thanks.

    ReplyDelete
  30. Hi Peter,
    I just posted a question earlier and realized that I probably didn't make myself really clear. I followed your instruction - opend one of the images on my blog and got the image source URL and pasted it to the web:URL in my user profile edit. I still got the error message. What could be the problem? Thanks.

    ReplyDelete
  31. Hi 22butterfly,

    I will answer later as I have a few things with datelines to complete. If I forget, bug me again with a comment.

    Peter Blog*Star
    Natural Remedies

    ReplyDelete
  32. Hi butterfly22,

    "What could be the problem?"

    Send me the URL of the post where you uploaded the photo or the URL of the photo itself or the script generated by blogger when you uploaded the photo.

    There is a "Contact me" link in the left sidebar. Don't try to paste the URL here as they would be too long. Alternatively, instead of emailing me, make the URL active. Refer to

    Make active (clickable) links in posts and comments.

    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything 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)

    ReplyDelete
  33. I have firefox and I tried finding the "source code" but i couldn't. However, i did find "view image" and "copy image location" and that worked out perfectly!

    THANK YOU SO MUCH!

    ReplyDelete
  34. Hello, I tried the instructions you gave above, but somehow my .gif file isn't animated. What can I do? It's an ad I want to put on my sidebar. Thanks!

    ReplyDelete
  35. Thanks so much! It's working now :) I linked to your site.
    Kindly checkout mom.bubgear.com :)

    ReplyDelete
  36. Alright, I've tried the 1st way you suggested didn't work. Now I'm on to try and use the "View" and "Image Location" Method, but I'm not sure where the side bar is on my blogger edit. Please help. Thank you.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics