Friday, November 28, 2008

Add captions to your Blogger Posts Images

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/AVvXsEjhN4oSj08BlC9LPOy5nsDBlGJ6R1omYj6MKqenibOPoPI_1q9YXAcJLAc4vw_0PMP1NkqSh9v1T28sxjZy76QpW8-TIvYzpVMVQmFn0XFt8U2XDSVMQnPMAyAcM71ERUVzHqEYx1s6SkE/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
Posted by at
Labels:

4 comments:

  1. AnonymousDecember 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

    ReplyDelete
  2. கார்த்திக்December 3, 2008 at 9:15 PM

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

    ReplyDelete
  3. AnandApril 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/

    ReplyDelete
  4. Helen M. BascomJuly 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

    ReplyDelete

Subscribe to: Post Comments (Atom)