We have been moved to http://www.bloganol.com/

You are here: Home / / Add captions to your Blogger Posts Images

Posted by Deineshd on Friday, November 28, 2008 · 4 comments

Captions means the short explanation, or description accompanying an illustration or a photograph.Using Captions for images in your blog posts will make you easy to describe that picture.So i have brought you a tutorial that helps you show the captions just below the images in the cool way.

To show the captions to your blog posts images first paste the following code between <head> and </head> Tags in your Template and save your Template.

<style type="text/css">
.caption {
border: 1px solid #DDDDDD;
text-align: center;
background-color: #EEEEEE;
padding: 4px 0px 5px 0px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.caption img {
margin: 0px 0px 5px 0px;
padding: 0px;
border: 0px;
}

.caption p.caption-text {
margin: 0px;
padding: 0px 0px 0px 0px;
font-size: 11px;
font-weight: normal;
line-height: 12px;
}
</style>

After you Save the Template you have to apply the style for the images in the posts.For that use the code in your blog posts as in the same style as below.

<div class="caption" style="width: 410px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO3Hop5cY_1J9h_TsJYUS6LutATNAZ15BPcpD3uVAkoicCrGK67b_Nf7DLLcBDsU0A2ZA5VMfPHXdgJ7CX7CmsMOqFoSnF6IiAJS9w1BNuzu6PpG_4ilJKf7uZUyqN5fbrXFQKSNN3lyA/s400/revolution+lifestyle+Blogger+Template.png"/><p class="caption-text">This is the screenshot of the Great Revolution Lifestyle Blogger Template.
</p></div>

Here I have used width 410px for the image.always use width 10px more than the width of the image.Enjoy

Filed under

comments

4 Responses to "Add captions to your Blogger Posts Images"
Anonymous said...
December 1, 2008 at 6:28 AM

Hello!
It is good that, but I do not see a great sense just to load code with the template!
The same may happen as upload photos write text into it tsentrirash and text!:)
Good luck


Karthik said...
December 3, 2008 at 9:15 PM

Hai Deinesh..Are u see this Site ? Revolution Tech template is free download here...


Razzer said...
April 8, 2009 at 5:14 AM

That was good. I hv implimented this recently and I'm liking it.

Rock on.
Andy.
http://takeuplaces.blogspot.com/


Unknown said...
July 6, 2009 at 8:34 PM

I like the caption underneath the photo - great idea. I just have one problem, When I did this it completely rearranged my post. I had text to the right of the photo, now I can not get the text to go there. Everything wants to go into the caption. Here is an example:

Active Art Post


Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

Subscribe to: Post Comments (Atom)