Blogger Magazine Templates

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.



Steps:

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; }
</style>

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