Tutorial: how to insert images in a blog

Copied from my blog: http://www.myfitnesspal.com/blog/accountant_boi/view/tutorial-how-to-insert-images-in-a-blog-116126

This tutorial steps you through how to enter pictures to your blog, which is NOT the same as to the bulliten board posts

One thing is the same, though - your pictures need to have been uploaded to a photosharing site, like photobucket, prior to trying to post to your blog. You need the URL for your picture - the photosharing site should give you the link to use to post your picture on websites (the "direct link") - that's what you want. The format should be something like: http://www.photosite.com/useraccount/picturename.jpg

If it ends in .html or .htm then it's not the right URL. It should end in .gif or .jpg or .tif or another ending that is used for images. You can test it by pasting the URL into a web browser - if all you see come up is the image, then you've got the right one. If you see the photosharing website or any other stuff, then you don't have the right one.

SO - once you have your picture out on a sharing website and you have the link then here's what you do.

Step 1: Go to the page for your new blog post. After typing whatever text you want to type before the picture, then click on the "HTML" button on the right side of the toolbar


You should see this screen popup in a separate window:


Step 2: Go to the end of the text that is on the screen and enter the following: <img src="yourpictureURL"> (The "yourpictureURL" is the URL I described at the beginning of this post.) See the example below - I've used a picture that I uploaded to photobucket. See how the URL ends in .jpg - I know it's the picture URL that way.



Step 3: Once you put the code in there with the photo URL, click the "Update" button at the bottom left:</


This will close the HTML editor window and you should see your picture on your blow post now. If you don't, that means you either didn't type the code exactly right - <img src="URL"> - with all the spaces, quotation marks, brackets, etc. as I've shown them, or your URL is bad

Here's my final blog in the example, showing the picture I inserted in:


One Note - some photo-sharing sites will actually give you the entire code ( <img src="photo URL.jpg">) to paste into websites/blogs. The reason I don't like using those is because usually they include extra code that makes the picture a link back to their website, which I prefer not to do. If you choose to use this, you go through the same steps and just paste that code into the HTML editor. It will likely look like this:

<a href="http://s757.photobucket.com/albums/xx220/accountant_boi/?action=view&amp;current=Step2.jpg&quot; target="_blank"><img src="http://i757.photobucket.com/albums/xx220/accountant_boi/Step2.jpg&quot; border="0" alt="Photobucket"></a>

See... lots of extra code... very messy....)

The end! It's not so hard - once you do it once or twice, you'll be a pro. :drinker: