Adding a simple image caption

image caption example
A dragonfly in my backyard

Having trouble adding image captions to your photos? I know I do, especially if you are using Blogger post editor. I’ve switch to Windows Live Writer, yet still it doesn’t get any better in this department. (with WLW I can do it though, with the right plug-in of course).

Look at the picture, it does come with a caption. Okay, I’m going to show you how you can do just that, a simple image captioning. It will require some HTML coding, but no CSS is involved here. We will use a two-row HMTL table, first row for the image, and the second row for the caption.

Now let’s do this, the steps are as below:

  1. Add an image the way you would normally do in Blogger post editor.
  2. Switch to Edit HTML mode.
  3. Find the code for your image, hint: it’s the <a onblur blah blah blah"><img blah blah blah;"/></a>.
  4. Now you want to copy the table code below and paste it just below the image code line in step 3.
    <table style="float: left; margin: 0px 10px 5px 0px; background-color: YOUR BACKGROUND COLOR HERE; font-style:italic"><tbody>
    <tr><td>YOUR IMAGE CODE HERE</td></tr>
    <tr><td align="center">YOUR CAPTION TEXT HERE</td></tr>
  5. After that you want to cut the original code (starting from <a… until </a>) and paste it to replace “YOUR IMAGE CODE HERE”.
  6. Replace “YOUR BACKGROUND COLOR HERE” with a color code.
  7. You can change the photo alignment to the right by changing the float to float:right;. Also change the margin to your liking.
  8. That’s it.

One note though, using this method you need to add the code to each individual photo.


Before you leave:
  • Do you find this article useful? Share it via Tweet This or Add This buttons below.
  • Any suggestion, question or comment? Please post it in the comments below.
Technorati Tags: ,

7 comments to "Adding a simple image caption"

Peter May 14, 2009 at 8:02 PM    

Hi! I have to admit that Windows Live Writer is my saving grace as it saves me a lot of time especially when doing something like this. Great tip and thanks for sharing - take care - Peter

Greenlava May 14, 2009 at 9:39 PM    

Hi Peter, thanks for dropping by mate!
I agree, so far I think WLW is the best at handling images.

Vicky Carter May 29, 2009 at 8:44 AM    

Hi Greenlava, it's me again. Love this post and will definitely use this info. As far as margins, I would like to change the margins of my entire blog page. Perhaps increase about 1.5 inches on both sides. Could you give me some instruction on how to do that?


Greenlava May 29, 2009 at 9:29 PM    

Welcome back Vicky,
Find this in your Edit HTML tab:
.main .Blog {
margin: 0;
padding: 0;
width: 484px;

1. change the padding (or margin, either one) to, example:
padding: 10px 5px 20px 15px;
the first no(10px) is for top side padding,
the 2nd no(5px) is for right,
the 3rd no(20px) is for bottom,
the 4th no(15px) is for left.

as for the unit, you can use px, em, % and cm.

2. change the width from 484px to auto.


Sanjiv June 19, 2010 at 2:41 AM    

Thank you my problem is solved by reading your post.

Ika December 12, 2011 at 10:49 PM    

thank you friend! this is very helpful...

Anonymous,  May 15, 2013 at 5:26 AM    

I checked around and tried three other suggestions to add a caption. This is the one which worked! Thank you

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.