How To Add CSS Text Captions To Images in blogger

Posted by Lasantha Bandara on November 14th, 2009 File Under : css, image0 Comment

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

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=",Canada.jpg" height="225"/><br/>Autumn Light,Canada-Nature Scene</div>

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

It will look like this:

css text caption

File Under : css, image

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.