Safest place to host your Blogger’s template images

One of the most recurrent issues with blogger templates is when images fail to load and/or instead we get non-nice messages. Trouble is because in most of the situations the images of those templates are hosted on free services (like: imageshack, photobucket, googlepages, etc.) which sometimes have a bandwidth limit.

That’s why we need to host them somewhere else. And "where?" you ask. The answer: Blogger itself! it has no limit (or a really high one) in terms of bandwidth for each image. To get the images related to your template you can do this:

1. Go to "Layout" tab and then go to "Edit HTML".
2. Do a search for all the image URLs, which will be like this example:

   http://service.com/etc/image-name.jpg

   They will all end in .jpg, .png, .gif or any other image format. Surely you’ll find them inside code like "…url(image-url-here)…", so you have to be careful and do a thorough scan. It is possible that after having the image url inside the code some of them will be already hosted on Blogger, in which case you don’t have to do nothing.

3. Go to each and every URL and save the images in a folder with your template’s name.

Now, to upload these images to Blogger and use them in your templates you can follow these easy steps.

1. Go the normal route you follow to write a New Post (Posting -> New Post).
2. Click on the "Add Image" icon and upload all the images related to your template.
3. Once you finish uploading them, go back to the editor, the resulting code should be something like this:

   <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_Zuzii37VUO4/SMM5YTgm0DI/AAAAAAAAC8s/AMBnCJkCENw/s1600-h/footerpg5.jpg"><img style="cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_Zuzii37VUO4/SMM5YTgm0DI/AAAAAAAAC8s/AMBnCJkCENw/s400/footerpg5.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5243097480906068018" /></a>

   As you can see, the code has two URLs that apparently are images, however, none of them can be used on the template, so:

4. Copy the first image URL and open it on a new tab or window of your browser.
5. Once you see the image, right-click it and select "Copy image’s URL" (on Firefox).
6. This URL can be used on Blogger templates, the next step will be replacing the old URL of that particular image for this new one. You can do that by going to Layout -> Edit HTML and replacing the code.
7. Repeat steps 4, 5 and 6 for all the images you uploaded.

This process can be very tedious, but we need to think that you’re actually going to do this once and you’ll be more confident on your template’s images. This same applies if you’re a template creator, doing this can save you from future headaches.