How To Add Category Wise Label Button 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 Label Widget for Blogger -->

<style>

.label-widget {

  font-family: 'Segoe UI', sans-serif;

  background: #fff;

  padding: 15px;

  border-radius: 12px;

  border: 1px solid #ddd;

  box-shadow: 0 4px 10px rgba(0,0,0,0.08);

  margin-bottom: 20px;

}

.label-widget h2 {

  font-size: 20px;

  margin-bottom: 15px;

  color: #222;

  text-align: center;

  border-bottom: 1px solid #eee;

  padding-bottom: 10px;

}

.label-widget .label-list {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  justify-content: center;

}

.label-widget .label-list a {

  text-decoration: none;

  background: #f5f5f5;

  color: #333;

  padding: 8px 14px;

  border-radius: 30px;

  font-size: 14px;

  transition: 0.3s ease;

  border: 1px solid #ddd;

}

.label-widget .label-list a:hover {

  background: #1a73e8;

  color: #fff;

  border-color: #1a73e8;

}

</style>

<div class="label-widget">

  <h2>🏷️ Categories</h2>

  <div class="label-list">

    <a href="/search/label/Technology">Technology</a>

    <a href="/search/label/Mobile">Mobile</a>

    <a href="/search/label/Earn%20Money">Earn Money</a>

    <a href="/search/label/Apps">Apps</a>

    <a href="/search/label/Blogging">Blogging</a>

    <a href="/search/label/Finance">Finance</a>

    <a href="/search/label/Tools">Tools</a>

    <a href="/search/label/News">News</a>

  </div>

</div>

Note : Add the link to your blogger label widget where Highlighted and write the name of the label

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

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