What tutorial do you want for the next article! Request Here!

How to Add Caption on Blogger Thumbnail Image

Guide to add custom thumbnail image caption on your Blogger & WordPress website.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Guide to add caption on blogger thumbnail

How to Add Caption on Blogger Thumbnail

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!

Thumbnail Image Caption
Thumbnail Caption

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!

View

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.
You May Like These Posts:

Post a Comment

To avoid SPAM comments, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.