Customizing the Blogger Labels Widget

By Narasimha June 05, 2025 Categories: ,


Adding a custom "All Labels" section to our Blogger homepage wasn't exactly straightforward. Instead of building from scratch, we decided to deeply customize the native Labels widget to achieve a unique, two-column layout that matched our main post grid. Here's how we did it, what we learned, and the solutions that made it work.

General Workflow: Customizing Blogger Gadgets (Like "Labels")

  • Add the Gadget via Layout: Go to Layout, click "Add a Gadget," and select "Labels." Configure and save.
  • Find the Widget in Theme XML: In "Edit HTML," search for the widget block (e.g., <b:widget id='Label1' ...>).
  • Move the Widget (If Needed): If Blogger puts it in the wrong spot, cut and paste the widget block to your desired location (always inside a <b:section>).
  • Edit the Widget's HTML: Open the <b:includable id='main'> section to fully customize the output HTML.
  • Style with CSS: Add your custom rules in the <b:skin><![CDATA[...]]></b:skin> area.

How We Customized the Labels Widget

1. Setting Up the Widget

  • We used the standard "Labels" gadget and made sure it had a clear ID (like Label1).
  • We placed its widget block right after the posts widget in our main content area.
  • To show it only on the homepage, we added cond='data:blog.url == data:blog.homepageUrl' to the widget tag.

2. Configuring Widget Settings

Before customizing the HTML structure, we configured the widget's settings to display labels by frequency and in list format: 

<b:widget-settings>
  <b:widget-setting name='sorting'>FREQUENCY</b:widget-setting>
  <b:widget-setting name='display'>LIST</b:widget-setting>
  <b:widget-setting name='selectedLabelsList'/>
  <b:widget-setting name='showType'>ALL</b:widget-setting>
  <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
</b:widget-settings>

These settings ensure labels are sorted by how frequently they're used, displayed as a list (not a cloud), show all labels, and hide the frequency numbers for a cleaner look.

3. Building the Two-Column Layout

The default Labels widget just outputs a list. We needed two columns: headings on the left, a grid of label "pills" on the right.

We rewrote the HTML in <b:includable id='main'> to something like: 

<div class='custom-all-labels-section-wrapper'>
  <div class='custom-all-labels-content-block'>
    <div class='labels-section-headings-column'>
      <h3>Topics</h3>
      <p class='subheading'>Browse blog by topic</p>
    </div>
    <div class='labels-section-list-column'>
      <div class='labels-list-inner'>
        <!-- Label links go here, each with class 'label-link-item' -->
      </div>
    </div>
  </div>
</div>

4. CSS Styling & Troubleshooting

  • We wrote CSS for the columns, pill labels, fonts, and responsiveness.
  • Problem: The new CSS didn't apply at all at first.
  • Discovery: A syntax error in our existing CSS (nested @media rules) was blocking later styles. A simple "red border" test at the top of the CSS helped us spot this.
  • Fix: We corrected the CSS error, and all custom styles started working.

5. Aligning with the Post Grid

Our posts use width: fit-content and are centered with padding: 0 20vw; on their parent. To match this: 

#Label1 .custom-all-labels-section-wrapper {
  padding-left: 20vw;
  padding-right: 20vw;
  display: flex;
  justify-content: center;
}
#Label1 .custom-all-labels-content-block {
  width: fit-content;
  padding: 1.5rem;
  /* ...other styles... */
}
#Label1 .labels-list-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(125px, auto));
  gap: 10px 12px;
}

This made the label section expand and align perfectly with the post grid.

6. Final Touches

  • Changed the "Topics" heading to the theme's accent color.
  • Top-aligned the heading column.
  • Added a border-top: 1px solid #eee; to the content block.
  • The widget settings we configured earlier ensured labels were sorted by frequency and displayed cleanly.

Key Takeaways

  • Customizing native gadgets is powerful: You don't need to build from scratch—just rewrite the widget's HTML and add your own CSS.
  • Widget settings matter: Configure sorting, display format, and visibility options in the widget settings before customizing the HTML.
  • Widget HTML lives in <b:includable id='main'>: This is where the real transformation happens.
  • CSS errors can block everything below: If styles won't apply, check for syntax issues above.
  • fit-content sizing: To make a fit-content block wider, expand its internal grid or content.
  • Match the reference element's structure: To align with another block, copy its padding, centering, and sizing logic.

By customizing the native Labels widget with proper settings and structure, we built a flexible, visually aligned "All Labels" section that fits seamlessly into our homepage design.

Related Posts