How To Add CSS Text Captions To Images in blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>
.picturecaption { background-color: #000000;
filter:alpha(opacity=80);opacity:0.8;border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif;color:#ffffff; }
.picturecaption 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>

4.Now save your template.

5.Now when your add a image add your image html tag inside a <div> tag as below.

<div style="width:302px;" class="picturecaption left"><img width="300" alt="Image short description" src="Image Address" height="225"/><br/>Enter Image Caption Text Here</div>

Look at the example below.

<div style="width:302px;" class="picturecaption left"><img width="300" alt="CSS Text Captions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5J7TVoADRsdRFB_vOY1Dox-3o_Uf8XRUUrtbufxVBTde53MhfFmn3pR_Q1aJJo2lw7h08JfKAtowL6OURXRx4UIcp4OQrqXCUyq6aGDHx3sWVw2BQ3Fm0oZ0BAuitE3gOtELe8hZCjfHQ/+Light,Canada.jpg" height="225"/><br/>Autumn Light,Canada-Nature Scene</div>

Note:Change width,height,color,.. as your choice.

It will look like this: