How To Upload Images In Blogger And Get The Image Link

Based on our usual way of uploading images is through image-hosting sites like the photobucket or imageshack when we are going to add background images to our header, sidebar, post body, footer etc and get the link from it. In this tutorial, I would like to share another special feature on how to upload images without going to another sites and that is through your Blogger's post editor page which you can resize the images in your posts.

How to Upload Images in Blogger and Get the Image Link 

---

Step 1. Go to Blogger Dashboard and click  new post, and upload an image like you normally do. You don't have to publish this post (just save as draft).

Step 2.  Switch your Blogger post editor page in compose mode and hit the image icon above the page as shown in the screenshot below.
Note:  You can also upload an image by switching the Blogger post editor's page in an HTML mode  but I find it easy to upload images in the compose mode.

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:

Step 3.  If you try to 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 addresses (choose the link next to the a href tag  ) 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/AVvXsEhs92OB4_JSCplrwXGfNgp3Rx7CHS_qIWgkKeNUmjkIXlWfCfA6oXRCG2foANKmr_XYfnugODuP_GkD4Hg9vmB3SHthwFc13ZfrLtZS_Gga6l_ekBrDuSJfKJ4crxrQV84eX9ElvoQ9Myq-/s232/sample+picture.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs92OB4_JSCplrwXGfNgp3Rx7CHS_qIWgkKeNUmjkIXlWfCfA6oXRCG2foANKmr_XYfnugODuP_GkD4Hg9vmB3SHthwFc13ZfrLtZS_Gga6l_ekBrDuSJfKJ4crxrQV84eX9ElvoQ9Myq-/s232/sample+picture.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />

And that's it. You've gotten the direct link to your Blogger uploaded image. But wait,  as what I have mentioned above that  the image that you  uploaded in Blogger is special because you can resize it according to your likeness. Just change the value next to the 's', as shown in the blockquote below. Greater value will increase the size of the image and lower value  shortened the size of the image respectively.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs92OB4_JSCplrwXGfNgp3Rx7CHS_qIWgkKeNUmjkIXlWfCfA6oXRCG2foANKmr_XYfnugODuP_GkD4Hg9vmB3SHthwFc13ZfrLtZS_Gga6l_ekBrDuSJfKJ4crxrQV84eX9ElvoQ9Myq-/s232/ sample+picture.jpg

You can now use this link in many applications like adding background to different areas of your blog.