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.
.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.
</p></div>
Here I have used width 410px for the image.always use width 10px more than the width of the image.Enjoy
Consider to Subscribe to our RSS feed or Follow us at Twitter or Join our Facebook Fan Page.Enter your Email below to subscribe to our updates via Email.
Similar Posts
- Create Popup Image Viewer Using CSS in Blogger
- A blogger hack to show related Posts below Each blogger Posts
- Sidebar with rectangular Border and Round Header
- Create Table of Contents in Blogger
- Create CSS popup Image Viewer in Blogger
Article by Dinesh Dhakal
Dinesh has written 310 awesome articles for us. Dinesh Dhakal(Deineshd) is the Admin of this blog.He is from Kathmandu, Nepal who is blogging since complete 4 years.You can catch him on twitter at Twitter.com/deineshd and in Facebook at Facebook.com/deineshd.
{ 6 comments… read them below or add one }
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
Hai Deinesh..Are u see this Site ? Revolution Tech template is free download here…
That was good. I hv implimented this recently and I’m liking it.
Rock on.
Andy.
http://takeuplaces.blogspot.com/
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
Really cool
.-= Thaman´s last blog ..Apple iPod Touch 32 GB – IInd Generation – Old Model =-.
I did that… Let me try that on another of my blogs… I’ll keep you updated..