Are you trying to add caption on blogger thumbnail but not getting successful results? You've come to the right place! In this tutorial, we will show you how to add caption on blogger thumbnail images. The tutorial was requested on our forum for an example of the result, like the one below.
How to Create a Standard Caption with Picture
To add a Standard caption, You can use figure and figcaption, for example the HTML code is like this-
<figure> <img src="https://tutorial.kang-ismet.com/img/pelabuhanratu.webp" alt="Thumbnail Image Caption" style="width:100%"> <figcaption>Thumbnail Image Caption.</figcaption> </figure>
Look below image for idea!
How to Create Caption on Thumbnail Image
In the above HTML code, the caption position is below the image on the left side, to add caption on images, you need to use CSS code for better result. To better understand, we will explain briefly, so that in future you don't need to directly copy and paste the code
Demo
Want to see it working?
You can check Add Caption on Thumbnail Image before you apply it on your Blogger Website.
Let's have a look at it!
Create Figure as a Container
Step : 1 The key factor of this container must use position:relative, let's say we make the .css like this
figure {
display: flex;
flex-flow: column;
max-width: 500px;
max-height: 250px;
margin: auto;
position:relative;
}
Make Responsive Thumbnail Image Caption
Step : 2 To add responsive image, You remember that it doesn't exceed the container, namely the figure, so that add img CSS code or you can specific your image like below css.
img {
width:100%;
}
Specific css code example
figure img {
width:100%;
}
Create Figcaption for Caption Position
Step : 3 Next we will add css code for position of the caption in the right corner, or you can add position according to your need.
figcaption {
background-color: rgba(0, 0, 0, .5);
color: #fff;
font: italic smaller sans-serif;
padding: 5px 10px;
position:absolute;
bottom:0;
right:0;
border-top-left-radius: 7px;
}
How to Add Caption CSS Code in Templete
Adding a Caption CSS Code to your website is a simple and easy process that doesn't require HTML or CSS knowledge. We've already prepared a codes above, so all you need to do is copy and paste the provided codes at right place in your Theme XML.
Important! Before we begin adding codes to XML, I highly recommend taking a backup of your theme. If any issues arise, you can easily restore it later on.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: From Blogger Dashboard, select the blog you wish to customize and click on the "Theme" option.
Step 3: This will take you to the Blogger Theme Editor, Click the arrow down icon next to 'customize' button.
Step 4: In the Theme Editor, Click Edit HTML, you will be redirected to editing page.
Don't worry if you're not familiar with HTML; the changes we'll make are simple and easy to understand.
Step 5: Once you're in the HTML editor, Now search the code ]]></b:skin> or </style> and paste the following CSS just above to it.
You can use the search function (Ctrl + F or Command + F) to make it easier to find the code place.
figure {
display: flex;
flex-flow: column;
max-width: 500px;
max-height: 250px;
margin: auto;
position:relative;
}
img {
width:100%;
}
figcaption {
background-color: rgba(0, 0, 0, .5);
color: #fff;
font: italic smaller sans-serif;
padding: 5px 10px;
position:absolute;
bottom:0;
right:0;
border-top-left-radius: 7px;
}
Step 6: Save the changes by clicking on this icon
How to Use on Posts/Pages
Step 1: To add caption on thumbnail for your blog posts using HTML view, follow these simple steps
Step 2: Select the HTML view of your blog post editor.
Step 3: Copy and paste the following HTML codes, where you want to show the image will appear.
< figure >
< img alt = "Thumbnail Image Caption" src = "https://tutorial.kang-ismet.com/img/peluhanratu.webp" >
< figcaption > Thumbnail Image Caption </ figcaption >
< figure >
Step 4: Save your changes and preview your blog post to see the caption thumbnail in action.
That's it! By following these steps and adding the provided HTML codes, you'll have a neatly Added Caption on Thumbnail Image in your blog posts. Hope it Helpful!
Conclusion
In this article, I have shared How to Add Caption on Blogger Thumbnail With You. I hope you have liked it Please do share it with your friends and follow our blog for more.
Follow Us On Telegram Channel to get the latest posts and updates daily. Thank you!
All Posts Are Protected By DMCA. So Don’t Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.