Friday, August 21, 2020

How to Add Caption in Blogger Post Image

How to Add Caption in Blogger Post Image 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 1Log in to your BloggerAccount and Go to yourBloggerDashboard Step 2Click on Now click on-New postand Upload an image. Step 3Now Click on Image from Blogger Post editor. A popup image Toolbar will visible. Step 4 You will see an option on the formatting toolbar Add caption link. 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. 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. Step1Log in to yourBlogger Accountand Go to yourBlogger Dashboard Step2Click on Now click on-Template-Edit HTML Step3Now find the/b:skinby pressing Ctrl+F Step4Copy 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 5Now 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.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.