Adding a simple image caption
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:
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.
To copy code, click <> icon on the right
view sourceprint?
1 <table style="float: left; margin: 0px 10px 5px 0px; background-color: YOUR BACKGROUND COLOR HERE; font-style:italic"><tbody>
2 <tr><td>YOUR IMAGE CODE HERE</td></tr>
3 <tr><td align="c
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.
0 comments:
Post a Comment