Sunday, August 30, 2009

Using Blogger to host images for various purposes

Summary: Upload photo via photo upload icon, publish. Open post. Click on photo, press ctrl+U to display source code, copy photo URL from source code.

Nearly all bloggers would be familiar with uploading photo via Blogger photo upload icon Blogger photo upload icon. However, you can only display the photo in 3 limited sizes - small, medium and large. (Update: this is referring to uploading photo in the old post editor, not the new updated post editor, but what follows still remain true). Clicking on such images generally result in a larger image displayed.

You cannot directly use such uploaded images, say, to put in the sidebar, for your Blogger profile photo or to use the image as a link to another webpage or to display images side by side. For such purposes, the photo need to be uploaded to a webhost which allows inline linking or hotlinking (also called leeching, piggy-backing, direct linking, offsite image grabs and bandwidth theft).

One of such webhost is the free Photobucket image host. This post will be about using Blogger itself as a host for the images for inline linking.

I prefer to use Blogger for image hosting as I prefer my blog stuff to be stored all in the same host. If you plan to do the same, may I suggest you create a new blog for this purpose, as I have at My Photo Store and upload your photos for profile photo, backround image, etc., there.

When you upload a photo to Blogger using their photo uploading icon and you are in the EDIT HTML mode, you will see in place of the photo the following HTML code:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href=""><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 296px;" src="" border="0" alt=""id="BLOGGER_PHOTO_ID_5369413094705735826" /></a>

Such uploaded photos can be used for inline linking for profile photo, etc.You will see 2 URLs in the code. You can use the second one for inline linking (in red). However, it is better to do the following:

Publish, click on the photo which will take you to a webpage where only the photo will be displayed. Press ctrl+U to open page source and get your photo URL there. I will upload a photo below and use that as an example. You may click on the photo and verify for yourself what I am going to write:

Click on the above photo, you will be taken to a webpage where only the photo of my grandson is displayed. Press ctrl+U and the source code is revealed

<title>lewis+apple+5.JPG (image)</title>
<script type="text/javascript">
if (top.location != self.location) top.location = self.location;
// -->
<body bgcolor="#ffffff" text="#000000">
<img src="" alt="[lewis+apple+5.JPG]" border=0>

and within the code is the photo URL (in red above) which you can use for inline linking.


  1. whats the big deal about it?

  2. I like this idea since blogs can take a long time to load pictures on other web hosts --- you have no control over their database problems and request overloads. Instead of looking at the source, can't you right click and copy the 'image location' for pasting into your hotlink? Also it may be convenient to look up your inventory of photos by going directly to your Blogger database, i.e. the site? Could be easier to scan for the photo you want to link to.

    But don't you just hate the weird long url names given by Blogger?

  3. Well, big or small, depends on your need and preferences.

  4. Thanks for this post. I like it.

  5. Anonymous8/31/2009

    Just what I needed. Thanks!

  6. I just found another reason to keep photos and images on blogger. The newer 'recent posts' widget from BloggerBuster has a thumbnail photo and summary making it eye-catching for visitors browsing. If your first photo in the post is on Flickr (e.g.) then there is no image displayed. The gadget uses the thumbnail automatically generated by Blogger -- and you know it will only do that for blogspot images!

  7. Post your Site at http://iedig.comand Share your Post, Make Friends, Share your article with your friends and Boost your Hits.

  8. why is the nav bar in my custom domain still showing. i waited three days in transition from my blog to my new custom domain, and it still looks like a blog, except for the name change. i thought custom blogs have the appearance of a normal website. so why still the blog nav bar ?

  9. Your custom domain blog will be exactly the same as your blogspot blog and the only difference will be the URL.

    If you want to rid of the navbar, refer to How to hide navbar for New Blogger or Tip: hiding navbar or Hide navbar for New Blogger xml template

  10. i have updated editor enabled , but looks like i still have the old editor. i want to add a picture to my post , but i do not have a picture icon

  11. The updated post editor in the Edit HTML mode do not have a photo upload icon.

  12. emm...I'm having some problem with my blog..Can you please help me with it?
    My friends said it's normal to view my blog when using Internet Explorer, but it's blur to view it by using Mozilla Firefox or Chrome..
    This problem occurs after I changed my layout, I think there's something wrong with the HTML isit?
    please help's my mail

  13. "This problem occurs after I changed my layout...."

    You mean you changed the template?

  14. ya i changed the template..
    the template i download it from the web..
    I'm from malaysia.

  15. Peter, I found your blog while attempting to find 'how to expand the blog post... and decrease size of sidebar'. Still have not found quite the answer, but more importantly ..

    the photo of your grandson is beautiful! I must call mine. :)

  16. Hi,I want to add thumbnails to my recent posts in the 'recent post' gadget..when I try to add the gadget, am not getting the thumbnail option as well as number of comments.

    Can you help me in fixing this issue?

  17. Under featured gadgets, there are 2 recent posts gadgets, 1 by Blogger Buster and 1 under Blogger Widgets which has thumbnails. I have added the second to the top of the second right sidebar at Testing Blogger in Draft and if you go there to check, the thumbnails as well as the number of comments are shown so I had no problem. Perhaps you forgot to enable them by ticking the box beside the option when you added that gadget.

  18. I was having the Blogger Buster gadget. Now I changed it to Blogger widgets. Thanks for the help Peter!

  19. I like this idea since blogs can take a long time to load pictures on other web hosts --- you have no control over their database problems and request overloads.

    web hosting in india | linux hosting

  20. Suggest you upload your photo to Photobucket then use <img src="photo URL" width="some numbers" /> to display your photos.

  21. many thanks for this

  22. This comment has been removed by a blog administrator.


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