How to Add a Premium Icon Badge to Blogger Post Thumbnails in JetTheme (2025)

🏷️ How to Add a Premium Icon Badge to Blogger Post Thumbnails in JetTheme (2025)

Do you want to visually highlight special or high-value posts on your Blogger site? If you're using the JetTheme template, adding a Premium icon badge to post thumbnails can help draw attention to important content.

In this tutorial, you’ll learn how to display a golden premium icon badge on any post that has the label "Premium". This simple customization uses only CSS and HTML, and works perfectly with JetTheme. Let’s get started.

🧰 Step 1: Add the CSS Code

Go to your Blogger theme and insert the following CSS. You can do this via:

• Theme > Customize > Advanced > Add CSS
• Or inside <style> tag in Edit HTML

/* Premium Icon Badge Style */
.post-thumbnail {
  position: relative;
}

.premium-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  background-color: #ffc107;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
  border: 2px solid #fff;
}

.premium-badge svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

🧩 Step 2: Insert the Conditional HTML Code

Now, go to your theme's HTML code editor and search for this line:

<div class='item-thumbnail'>

Right below that line, insert this conditional code:

<b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.name == "Premium"'>
    <div class='premium-badge'>
      <svg fill='#FFD700' height='48' viewBox='0 0 24 24' width='48' xmlns='http://www.w3.org/2000/svg'>
        <path d='M5 16L3 7l5 3 4-6 4 6 5-3-2 9H5zm0 2h14v2H5v-2z'/>
      </svg>
    </div>
  </b:if>
</b:loop>

This code checks if the post has the label Premium. If yes, show the premium badge on the post thumbnail.

🏷️ Step 3: Add the "Premium" Label to Your Posts

Every time you publish a blog post, simply add the label:

Premium

The badge will automatically appear on the post thumbnail, visually distinguishing it from regular posts.

🎯 Why Use a Premium Badge?

• ✔ Visually highlight premium or important content
• ✔ Increase click-through rates by grabbing attention
• ✔ Improve user experience with clear content prioritization

🧪 Bonus: Customize the Badge

Want to tweak the design? You can change:

• background-color in .premium-badge for color
• Replace the <svg> with another icon

✅ Conclusion

This simple tweak lets you professionally highlight content on your Blogger site using the JetTheme template. Make sure to use the "Premium" label only on top-tier content so readers know it’s worth their attention.

Happy customizing!

🔍 Meta Information

• Author: Mr Anwarul Islam
• Website: https://www.therealanwarul.com.bd