Home
Blogger

How to Add Caption in Blogger Post Image?

How to Add Caption in Blogger Post Image?
captions

Image Caption massively used in image based Blog. Generally We see different Journal or Magazine a small piece of sentence written below Image that explain the subject or theme of the Image. Similarly in Blogger Blog Post we often add caption for better understanding the Image. Suppose a Blogger has written a long paragraph and Image placed in wrong space in that case if s/he added a Caption for Blog Image then readers can easily understand. So this is very important to add caption in Image. Many Blogger add irrelevant image which is pointless to use on Post. However if Blogger become used to insert caption on image then s/he will easily  understand which image is relevant. Though Blogger has this fantastic feature but many Blogger don't know how to add caption on Blog Image. In this tutorial I will show you how we can add Image caption easily. Please follow the below steps that might be helpful for adding image caption.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> New post and Upload an image.

Step 3 Now Click on Image from Blogger Post editor. A popup image Toolbar will visible.


add caption

Step 4 You will see an option on the formatting toolbar Add caption link.
caption added


Step 5 Now click on Add caption option and write the few words about the Image. You can change Font Bold or After that finally Publish your post.

image caption

That's it. Now check your post and see your Blog post containing Caption that explaining the image.

Adding Some Style in your Caption Image

By following the above steps you will able to include simple Caption in Blog Post. But by adding CSS code we can make it more attractive. However we can able to modify the Caption text, font color etc. So just add the below code by following the tutorial.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML

Step 3 Now find the </b:skin> by pressing Ctrl+F 

Step 4 Copy the code from below and Paste the code above/before </b:skin> 

/*Custom Caption Widget by www.bloggerspice.com */
table.tr-caption-container {
padding:5px;
background: #ffffff;
color: #222222;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
table.tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
td.tr-caption {
font:100% 'Oswald',Sans-Serif;
font-style: bold;
text-transform: capitalize;
}

Step 5 Now simply hit the Save template Button. 

 Again check your Blog and see the caption image with new style. I hope by adding caption on image your Blog readers will feel comfortable to read the content. For better explaining the Image there hasn't any alternative to insert caption on image. 

5 comments

  1. How do you write long captions that stay the same size of the image? Thanks
    • For my Post's thumbnail I have designed a template by using PhotoShop software... after that just add different image and text is flexibly re-sizable. So Caption character number doesn't matter. Thank you.
  2. EXACTLY what I needed. Thank you. Love the template I have and this boarder around the caption was the only thing missing! Thank you for the code!
  3. I know it's not related, but is there a way to remove image captions not showing in post excerpts in the homepage?
    • Hi, I didn't understand. Generally image caption remain invisible in blogger homepage. However, this is depends on Blogger theme. You can contact with your theme developer.

      Thank you.
Go Up