I'd like to thank Gene Mueller of Gene Mueller's World of Fishing & Hunting for allowing me to use his blog for the tutorial I am creating for other Code Rustlers customers. Gene is, of course, a real pro at inserting photos into his blog, adding captions, etc. But it can be a little daunting at first to try to make all of this work together when first setting up a blog. So this little tutorial is for those who need a little extra assistance.
Preliminary Steps
Before you begin inserting photos, you should first type your blog entry. You can do this directly in the Blogger/Blogspot editor, as I am doing now. You can also type your blog post in any word processing program, and then copy and paste it into the Blogger/Blogspot editor, though I do not recommend doing so, as there is hidden formatting in word processing documents that can create formatting problems when you publish your blog post. If you choose to use a word processor, then after you have spell-checked and edited, you should copy all of your text out of the word processing document, paste it into a plain-text editor like Note Pad (if you are using a Windows PC) or Simple Text (if you are using a Mac) BEFORE pasting the text into the Blogger/Blogspot editor. Then copy all of the text out of the plain-text editor and paste it into the Blogger/Blogspot editor. Doing this removes all of that pesky word processing formatting.
Recommendation: If you are using more than one photo in your blog post, it is a good design/layout decision to alternate the photos left/right/left and so on. If you do this, then I highly recommend justifying your text using the alignment tool. This is the option that spreads the text out evenly from left margin to right margin, instead of having the text aligned neatly only on the left side and then having a ragged, uneven edge on the right side. The reason for justifying the text is that it makes for nicer presentation of your pictures that end up inserted on the right side of a paragraph.
How to insert photos into your blog
Once you have created your blog post, then you may begin to insert photos. Before doing this, make sure you have saved your photos into a directory you will be able to find later, such as MyPictures or MyDocuments (in Windows--I'm not sure what the name of the default documents/pictures directories are on a Mac).
 |
The red arrow is pointing to the "Insert Image" icon. |
When you click on the "Insert Image" icon, it will open a pop-up window that looks like this:
 |
There may already be image files in your folder. If the image you are looking for is not already in this folder, do not be concerned--I will show you in the next step how to find the image you are looking for. |
Click on the button that says "Choose Files":
When you click on the "Choose Files" it will open up a window that looks like this:
 |
The two large, red arrows are pointing to the Documents and Pictures directories. Click on the one in which you saved your images. I saved mine in the Pictures directory, so I will go there to find my image. IMPORTANT: Your directory window may look different than mine if you are not using Windows 7. But even if you are using a different version of Windows, or a Mac, the principle is still the same: clicking on "Choose Files" opens up a window into your computer's directory file structure, which will allow you to browse through your computer and find the image you want to insert into your blog. When you find the picture you want to insert into your blog (mine is the one to which the upward-pointing red arrow is pointing), click on it, and then click on the "Open" button (the one to which the downward-pointing red arrow is pointing) at the bottom of the screen:  |
Once you have clicked "Open," your photo will appear in the "Add Images" window, and it will have a blue box around it, like this:
If the image you wish to insert into your blog does NOT have a blue outline around it, click on the image and it will then have a blue outline around it. This indicates that you have "Selected" the image for insertion. Once the blue outline appears around the image you wish to insert, click the button that says "Add Selected." This will insert your image into your blog below the text where you originally place your cursor in the first step.
Click anywhere on the image, and the photo will turn a bluish color, and
it will have a long, narrow, rectangular, blue box with options for sizing and positioning your image, like this:
If the image you wish to insert into your blog does NOT have a blue outline around it, click on the image and it will then have a blue outline around it. This indicates that you have "Selected" the image for insertion. Once the blue outline appears around the image you wish to insert, click the button that says "Add Selected." This will insert your image into your blog below the text where you originally place your cursor in the first step.
Click anywhere on the image, and the photo will turn a bluish color, and
it will have a long, narrow, rectangular, blue box with options for sizing and positioning your image, like this:
 |
The available options: Clicking on one of the Small - Medium - Large - X-Large options allows you to change the size of the image. Clicking on the Left - Center - Right options places the image where you want it (Right and Left inset the image on either side of the text and allow the text to wrap neatly around the image, while Center places the image below the text, as all of the photos in this tutorial have been placed). Add caption will allow you to add text below your image (as I have done here). Remove allows you to delete the photo. |
C'est Voila! Easy peasy. Call me if you have questions. :-)
