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.
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.
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.
2. To locate your photos easier, label each section. This will be handy later on in Step 5.
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.
4. Ensure the images are listed as “Original Size,” or do so by clicking the picture then the “Original Size” link.
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).
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.
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:
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.
Couple things to note:
- 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.
- 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.