Using Images In Your Posts

One of the easiest ways to make your blog more user friendly is to add images – diagrams, illustrations, even photographs. But sometimes that’s also one of the hardest – how do I start?

Well there is nothing special about an image. It’s just a link to a file, where the file contains a picture or whatever.

How you include the link – embedded or not, makes the difference. An embedded link lets you view the image, directly, in the post. An external link lets you view the image, separately.

If you have a photograph sitting on your computer, you can simply use Blogger, and upload the photograph. Once the photograph is uploaded, you can do whatever you like with it. Or you can use any third party hosting service. It’s up to you to decide.

You can use Blogger images just like images that you upload to any online hosting service. If you have an image that you’ll only be showing in one post, you can upload directly into that post. Or you can upload to any post, in any blog, and use that image in any other post, or any other blog, or the template in any blog, at your convenience.

The nice thing about Blogger hosting images is when you upload an image, a copy of the image, properly sized to fit in the post, is created. The upload process creates code that embeds the resized image (“thumbnail”) into the post, with a hyperlink to the original image. Your readers can click on the image in the post, and see the original image, in full size.

  1. Create a new post. I called mine “Images”, you can use whatever name pleases you. Follow me, and see why.
  2. Upload a picture. Pick the right picture float alignment when you upload. I use “float:left” for all of mine.
  3. If the picture uploaded successfully, continue. If you are currently being victimised by the intermittent photo uploading problem, and you had no success this time, start over with Step 1.
  4. From the post edit window, select the “Edit HTML” tab. Find the code for your uploaded picture. Here’s one of mine.

    <a onblur=”try {parent.deselectBloggerImageGracefully();} catch(e) {}” href=”http://photos1.blogger.com/blogger/
    5304/92/1600/DSCF0048%201280.1.jpg”><img style=”float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;” src=”http://photos1.blogger.com/blogger/
    5304/92/320/DSCF0048%201280.1.jpg” border=”0″ alt=”” /></a>

  5. Select and copy the code (as the example above).
  6. Save the post as Draft, so the post won’t show up in the blog.
  7. Edit the post which contains the content. Paste the copied code, into the location that pleases you.
  8. You now have a solitary photo, floating to the left, uncaptioned.


  9. Add some text, here I show some beside the photo, and some below the photo.

    <a onblur=”try {parent.deselectBloggerImageGracefully();} catch(e) {}” href=”http://photos1.blogger.com/blogger/
    5304/92/1600/DSCF0048%201280.1.jpg”><img style=”float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;” src=”http://photos1.blogger.com/blogger/
    5304/92/320/DSCF0048%201280.1.jpg” border=”0″ alt=”” /></a>
    <br />
    Chuck’s <a href=”http://nitecruzrrecipes.blogspot.com/
    2005/07/cabbage-shrimp-salad.html”>Cabbage / Shrimp Salad</a>
    <br clear=”left”>
    And the best thing is, this is totally healthy (if you use low carb Cannola oil).
    <br>

  10. You now have a solitary photo, floating to the left, but with some text captioning it.

    Chuck’s Cabbage / Shrimp Salad

    And the best thing is, this is totally healthy (if you use low carb Cannola oil).

  11. Publish Post. Admire your work.
Advertisements

2 Responses to “Using Images In Your Posts”

  1. Daniel Yiek Says:

    Hi
    In your example, pls show where to put the html code below for viewing in new window when people click to see original large image? This is to avoid people having to click “Back” button.

    target=”_blank”

  2. Chuck Says:

    Thanks for the suggestion, Daniel.
    Opening A New Window–>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: