Skip to main content

How To Add Category Wise Label Button Widget In Blogger Blog

Make your blog more attractive and user-friendly with this Stylish Categories/Label Widget. This widget allows your readers to easily find posts based on their labels or topics.

With modern, colorful buttons and hover effects, navigation becomes simple and engaging. Whether your content is about Technology, Mobile, Blogging, Finance, Apps, or any other category, your visitors can reach their favorite topics in just one click.

Key Features:

  • Attractive and professional design
  • Interactive buttons with smooth hover effects
  • Fully responsive for all devices
  • Improves blog navigation and SEO

Simply add it to your Blogger dashboard as an HTML/JavaScript Gadget and enhance your blog’s user experience instantly.

Also Read : 

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.

Also Read: 

Labels:

Comments

Post a Comment