Obtaining Direct Links from Blogger Uploaded Images

This is not a full-featured tutorial by itself. Rather, the tutorial in this post will serve as a useful tool for many applications. In many instances, you will find yourself needing to upload an image to an image-hosting site and get its direct link. While it is perfectly okay to upload your image to famous image-hosting sites such us imageshack and photobucket, you will find it useful if you upload your images to Blogger's post editor instead. Yes, the next time someone asks you to take a screenshot of your computer and upload to an image-hosting site, you can use Blogger's post editor to do so. On top of that, you get to resize your image easily by changing it's address, if you upload your image to Blogger.

Step 1: 

Go create a new post, and upload an image like you normally would. You don't have to publish this post.

Step 2: 

Once you've uploaded and inserted your image to the post editor, click on 'Edit HTML' (as opposed to 'Compose' mode). You will see some HTML lines like the one shown below:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqjjTjADT5vofWhxdLIJ0be9jKyt3WW4QOzZJtHbSu_zQX-mfVI7Z8tKcB4C5h_wdE5BClbCW_BghGsUcha5zVrSCo_LH3l2IhHlEn2CAQCVClxIg-KtoN_CftmXj0UYilOrb6qgSXDfs/s1600/autobot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqjjTjADT5vofWhxdLIJ0be9jKyt3WW4QOzZJtHbSu_zQX-mfVI7Z8tKcB4C5h_wdE5BClbCW_BghGsUcha5zVrSCo_LH3l2IhHlEn2CAQCVClxIg-KtoN_CftmXj0UYilOrb6qgSXDfs/s1600/autobot.png" />
</a></div>

Step 3: 

If you look closely at the HTML lines, you will notice two set of addresses. The first one is next to the 'href' tag, and the second is next to the 'src' tag. All you have to do is copy the address next to the 'href' tag. I've highlighted the address that you need to copy in the example below:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrGPdTgah_plY2AbL9ZS63Veo1i5idRYY4FgW7EaBNJmuYzHii8HXrDs_K2Xh86G8cuUpzCkeW6Mcor4R1yL9caf1ywx83m56-ldyum5BdGImlJaVCysDPvbsmxEdWC7r3VS448RxI9rk/s1600/autobot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrGPdTgah_plY2AbL9ZS63Veo1i5idRYY4FgW7EaBNJmuYzHii8HXrDs_K2Xh86G8cuUpzCkeW6Mcor4R1yL9caf1ywx83m56-ldyum5BdGImlJaVCysDPvbsmxEdWC7r3VS448RxI9rk/s1600/autobot.png" /></a></div>

And that's it. You've gotten the direct link to your Blogger uploaded image. But wait, check out the bonus section below to see why Blogger uploaded image is special.

Bonus

This is the extracted direct link that we've gotten from the previous step.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqjjTjADT5vofWhxdLIJ0be9jKyt3WW4QOzZJtHbSu_zQX-mfVI7Z8tKcB4C5h_wdE5BClbCW_BghGsUcha5zVrSCo_LH3l2IhHlEn2CAQCVClxIg-KtoN_CftmXj0UYilOrb6qgSXDfs/1600/autobot.png

This direct link is special because Blogger allows you to resize your image by simply altering this link. All you have to do is change the '1600' in the line above, to a smaller number, and your image will resize accordingly. For example, if you open the link above in your browser, you will see a (relatively) large image. And if you open the same altered link below, you will see a down-scaled version of the same image.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqjjTjADT5vofWhxdLIJ0be9jKyt3WW4QOzZJtHbSu_zQX-mfVI7Z8tKcB4C5h_wdE5BClbCW_BghGsUcha5zVrSCo_LH3l2IhHlEn2CAQCVClxIg-KtoN_CftmXj0UYilOrb6qgSXDfs/40/autobot.png

Hope you will find this trick useful.. Cheers and God bless.