How To Add Category Wise Auto Updated Label Widget In Blogger Blog

How To Add Category Wise Auto Updated Label Widget In Blogger Blog : 

Follow the steps below :

1. Log In Blogger >> 2. Dashboard >> 3. +add a Gadget >> 4. HTML/JavaScript

Copy the below code and paste it in HTML/JavaScript content 

<!-- ✅ Stylish Auto-updated Blogger Label Widget -->
<style>
.label-widget {
  font-family: 'Segoe UI', sans-serif;
  background: #ffffff;
  padding: 20px;
  border-radius: 15px;
  border: 1px solid #ddd;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  margin-bottom: 30px;
  text-align: center;
}
.label-widget h2 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #1a1a1a;
  position: relative;
}
.label-widget h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: #1a73e8;
  margin: 8px auto 0;
  border-radius: 3px;
}
.label-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.label-list a {
  text-decoration: none;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(45deg, #1a73e8, #4a90e2);
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}
.label-list a:hover {
  background: linear-gradient(45deg, #ff4081, #ff1744);
  transform: translateY(-2px);
}
</style>
<div class="label-widget">
  <h2>🏷️ Explore Categories</h2>
  <div class="label-list" id="autoLabelList">Loading...</div>
</div>
<script>
  async function fetchLabels() {
    const url = '/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=showLabels';
    const script = document.createElement('script');
    script.src = url;
    document.body.appendChild(script);
  }
  function showLabels(data) {
    const allLabels = {};
    const posts = data.feed.entry || [];
    posts.forEach(entry => {
      const categories = entry.category || [];
      categories.forEach(cat => {
        const label = cat.term;
        allLabels[label] = (allLabels[label] || 0) + 1;
      });
    });
    const labelList = document.getElementById('autoLabelList');
    labelList.innerHTML = '';
    const sortedLabels = Object.keys(allLabels).sort();
    sortedLabels.forEach(label => {
      const link = `/search/label/${encodeURIComponent(label)}`;
      const a = document.createElement('a');
      a.href = link;
      a.textContent = label;
      labelList.appendChild(a);
    });
  }
  fetchLabels();
</script>

• Now Save the HTML/JavaScript and also Save the layout settings. 

Now refresh your blog and see that the Categories Wise Auto Updated Label Button Widget will have been added.