6 How to ‘Host’ Images on Blogger

If you’ve ever been fed-up with your image hosting site not displaying your images, you know how painful it is to drop everything you’re doing to fix the issue. Or worse, their site is down and you feel like a sitting duck. This can be especially daunting when you’re already juggling the never ending blog to-do list. Today, I’m going to show you a work around on How to Host Images on Blogger.
Easy tutorial on how to host images on Blogger to transition from Photobucket or other photo hosting sites | www.blackandwhiteobsession.com

Within this tutorial you will learn:
  • Why make the switch from Photobucket?
  • Unveil the mystery as to where Google hosts Blogger photos.
  • Precautions to keep your blog photos safe.
  • Instructions how to host photos in blogger + how to keep them organized.

Why should I switch?
The type-A in me tries hard to keep things as streamlined, seamless, and organized as possible especially when it comes to my online footprint. With just about every social site, app, email, etc. comes a user name, password, and even security questions. It’s enough to make anyone’s head spin. Which is the main reason why I made the transition from hosting images (like sidebar images, icons, social media buttons, guest posted photos- for HTML, GIF’s, Image Maps, etc.) on Photobucket to Blogger. Of course there’s always the vast errors especially when exceeding bandwidth or accidentally deleting the wrong image, and the overall clunky-ness of the application.

Photobucket Photo Hosting Errors | www.blackandwhiteobsession.com

Where does Google host Blogger photos?
Before we get to the tutorial, let’s take a step back and find out where Blogger actually Hosts your images. All Images uploaded to Blogger are placed in a Picasa Web Album (you can access yours, if logged in, here) specifically for your blog. Lucky for Blogger users, we have 1 GB of free storage dedicated to these albums.

What precautions should I know about?
Before taking the plunge, be aware of a few things:
  • Skim this google help article on using your Picasa Album with Blogger which also links to this article on what counts toward the 1GB storage limit. Update 7/27/2015: as of May 2015 Google has generously increased their Google+ storage limit to 15GB.
  • To maximize your image storage, keep the gmail account tied to your Blogger blog filled with blog related images only.
  • B• Be sure not to deleting anything related to your blog in your Picasa Web Album (read this).
  • There’s a few additional precautions at the end of this tutorial.
Instructions:
1. After logging into blogger, navigate to the pages section and begin a new page. This new page will house/host all your photos and should be kept unpublished. Optional: title the new page something that will stand out so you don’t publish, delete, etc.
 Step 1: New Page. Easy tutorial on how to host images on Blogger to transition from Photobucket or other photo hosting sites | www.blackandwhiteobsession.com

2. To locate your photos easier, label each section. This will be handy later on in Step 5.
 Step 2: Organize your photos by labeling each section. Easy tutorial on how to host images on Blogger to transition from Photobucket or other photo hosting sites | www.blackandwhiteobsession.com
Feel free to copy the headings listed in the photo above:
Header | Menu | Content | Post Footer | Side bar | Elements | [Title] Page | [Title] Page | Other

Just remember to keep them orderly by dragging or uploading the photos to the appropriate section.

3. Upload your image(s) like you would for a normal post. In this example I used the sidebar elements and titles from my Free Photoshop Blog Template.
Step 3: Upload Image(s). Easy tutorial on how to host images on Blogger to transition from Photobucket or other photo hosting sites | www.blackandwhiteobsession.com

4. Ensure the images are listed as “Original Size,” or do so by clicking the picture then the “Original Size” link.
Step 4: Ensure the image is uploaded with the original size. Easy tutorial on how to host images on Blogger to transition from Photobucket or other photo hosting sites | www.blackandwhiteobsession.com

Now that your images are uploaded, you can use the Image URL anywhere across the web, or in this case as a Side bar image within blogger. To capture the Image URL:

5. Switch to the HTML editor- don’t worry folks, it’s not as scary as it seems. Find your photo within the code by Holding CTRL + F (on PC) or Command + F (on Mac) the words: Side Bar (here’s where the labels from Step 2 come in handy).
Step 5: Switch to HTML and find the location of your image. Easy tutorial on how to host images on Blogger to transition from Photobucket or other photo hosting sites | www.blackandwhiteobsession.com

6. Your Image link URL will be the first link after <a href=". Highlight from http:// all the way to .PNG or .JPG or other photo format and copy your link.
Step 6: Copy your image link from the first link listed within the coded Image. Easy tutorial on how to host images on Blogger to transition from Photobucket or other photo hosting sites | www.blackandwhiteobsession.com

7. Place the link where you wish (in this case as a sidebar widget). You can verify you grabbed the correct link by opening a new browser window and pasting the link like so:
Step 7: Paste the Image Link within a New Window. Easy tutorial on how to host images on Blogger to transition from Photobucket or other photo hosting sites | www.blackandwhiteobsession.com

8. To keep this blogger page unpublished, be sure to click save then close anytime you’re done accessing the page. You can also create a new unpublished post- but it throws off your post count.
Step 8: Save your new Blogger Photo Hosting Page without publishing it by clicking Save, then Close. Easy tutorial on how to host images on Blogger to transition from Photobucket or other photo hosting sites | www.blackandwhiteobsession.com

Couple things to note:

  1. Do not delete this page or the photos uploaded here unless you’ve already removed them from your site/post/location on the web. To prevent an error, you may find it convenient to back up this page by copying the entire html of this page into Notepad. Then save the document along-side your original images/other blog coding.
  2. If you notice your image isn’t full size (when testing in step 7), go back to step 4. You can also catch it earlier if notice the words height and/or width before your image closes with /></a> like higlighted:
<a href="http://3.bp.blogspot.com/-JyxOp2IsRfY/UyIo6mHwTLI/AAAAAAAACHw/XA_M3XJGGY4/s1600/Sidebar-Welcome.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-JyxOp2IsRfY/UyIo6mHwTLI/AAAAAAAACHw/XA_M3XJGGY4/s1600/Sidebar-Welcome.PNG" height="289" width="320" /></a>

Neat trick huh? Do you want to see more tutorials for blogger? If so, post your requests below and you may see them in a future post.



Remember...

6 comments:

  1. This is great and I truly didn't know how to host images on Blogger myself before this! Thanks Trisha!

    ReplyDelete
    Replies
    1. You're welcome girl!! Hope you find it useful when you go to update your site again (if you're like me it's never ending!!).

      Delete
  2. I am on Wordpress so I didn't actually read this, I just looked at the pictures. :) 1. I love your "pin it" button 2. Your title images always look SO good 3. My favorite part of this post: "Welcome! This is my face" 4. Have a great week

    ReplyDelete
    Replies
    1. I look at pretty pictures too- although there's nothing pretty about the coding ones, believe me I tried sprucing them up!!
      1- I probably shouldn't blurt it out- but I'm actually working on a little refresh, and the Pin It button is changing.
      2- Awe, you're making me blush over here.
      3- I was HOPING someone would notice that one of these days!!
      You 'da best!!

      Delete
  3. Hi Trisha - Quick question..........would this work for PDF files or just pictures?

    ReplyDelete
    Replies
    1. Hi there,

      I haven't found a way to 'host' downloads + PDF's through "blogger" but I've witness sucess from other bloggers by hosting the files through drive, dropbox, etc. I personally use 'google sites.'

      Hope that helps!
      Trisha D!

      Delete

Comments make my heart go pitter-patter! Your comment may not appear right away as they are manually accepted.

Pin It button on image hover