How to add captions on Blogger post Images

July 3, 2009 Leave a Comment

caption sample
Unlike Wordpress which had already offer captions on post images, Blogger still far way behind about this plug-ins. One of the best example that I saw on captioning an image is from Amit Agarwal, this are the standard that BBC and Wikipedia (see sample at the right) or even Wordpress used today.

Captions on post article images can drive more traffic from a search engine, they will rank better than those images that's just plain. Even without reading the whole article, with a simple one (1) sentence they express a lot to the story. They embodied the summary, the description and information that we can't visualize.


1. Go to Lay-out /Edit HTML.

2. Add the following CSS code, before </head>

<style type="text/css">
.picture { background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 10px/1.4em Arial, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }

3. then, Save

4. When posting an article, be sure to enclose your images using the following HTML code.

<div class="picture left" style="width:246px;"> <img src="http://IMAGELINK.COM" width="242" height="320" alt="Flower Sample" /> <br /> Image Caption</div>

You can align your images to the left of right. The size of the <div> width should always be +4.

Actual Sample:

Different kinds of flower



  • Vernon Swanepoel said:  

    Thanks for that info, it is really useful.  Thanks

  • Sandy said:  

    Thank-you very much for this :)

  • Leave your response!

    Add your comment below,or trackback from your own site. You can also subscribe to these comments via RSS.

    Be nice. Keep it clean. Stay on topic. No spam.