Customizing the Blogger Labels Widget

Administrator

Author

Last edited: Saturday, October 24, 2026

Do you want to customize your Labels Widget but aren't sure where to start, or are you looking for a design that complements your blog's style? Customizing the Labels Widget in Blogger is a great way to improve your blog's navigation and aesthetic appeal. By default, Blogger's built-in label gadget is quite plain, but with a bit of HTML, CSS, and some Layout tweaks, you can turn it into a modern cloud, a stylish list, or category pills.

In this tutorial, you'll learn how to customize your Labels Widget using CSS. I'll also provide several style examples for you to choose from. If you're familiar with basic CSS rules, you can easily customize it to suit your preferences.

Customizing the Labels Widget in Blogger

What is a Blogger Labels Widget?

A Labels Widget is one of Blogger’s most useful built-in gadgets. It displays all the labels/tags assigned to your blog posts in a list or cloud format. Learn more about Blogger Dashboard.

When visitors click a label, Blogger automatically filters your posts to show only those related to the selected topic. This improves your site’s navigation and makes it easier for readers to find relevant content quickly.

Default Labels Widget Settings

When you add the Labels Widget through Layout > Add a Gadget > Labels, Blogger provides several standard configuration options in its dashboard:

Title: Sets the custom heading displayed above the widget on your blog (e.g., Categories or Topics).
Label sorting: Orders the labels alphabetically (Name) or by how many posts use that tag (Frequency).
Display:

List: Shows labels in a vertical column (one below the other).
Cloud: Shows labels in a horizontal, tag-cloud layout where font sizes vary based on post frequency.

Show number of posts per label: Adds the number of posts associated with each label in parentheses (e.g., Blog (12)).
Show:

All Labels: Displays every tag you've used.
Selected Labels: Allows you to pick and choose specific labels to display.

How to Style Your Labels Widget Using CSS

Go to your Blogger Dashboard and click on Layout.
Click Add a Gadget in your sidebar or footer area and select Labels.
Choose your preferred settings and click Save.

Adding Custom CSS to Blogger

Go to Theme in your Blogger dashboard.
Click the down arrow next to Customize and select Edit HTML
Click anywhere inside the HTML editor and press Ctrl + F (or Cmd + F on Mac)
Search for the </b:skin> or </style> tag in your template.
Paste the following CSS rules right above ]]></b:skin> or inside your custom CSS stylesheet area:
Click Save

Custom Labels Widget Styles to Choose From

While browsing personal blogs built with Blogger, I was inspired to create easy ways for bloggers to customize and style their label widgets. I hope you enjoy the styles and examples I’ve shared here!

Style 1: Retro/Y2K Indie

 /* 
  - Blogger Labels Widget
  - Source code: https://writewhim.blogspot.com/2026/10/customizing-blogger-labels-widget.html
*/
 .list-label-widget-content ul, 
 .cloud-label-widget-content {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
 .list-label-widget-content ul {flex-direction: column;
}
 .list-label-widget-content li, 
 .cloud-label-widget-content span.label-size {
  display: inline-block;
}
 .list-label-widget-content a.label-name, 
 .cloud-label-widget-content a.label-name {
  background: #ffffff;
  color: #555555;
  border: 1px solid #ffb6c1;
  padding: 4px 10px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 2px 2px 0px #ffb6c1;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
/* Star SVG Icon */
 .list-label-widget-content a.label-name::before, 
 .cloud-label-widget-content a.label-name::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff69b4'%3E%3Cpath d='M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
 .list-label-widget-content a.label-name:hover, 
 .cloud-label-widget-content a.label-name:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px #ff69b4;
  background: #fff5f8;
  color: #db7093;
}
 .label-count {
  background: #ffe4e1;
  color: #db7093;
  padding: 1px 5px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
}

Style 2: Kawaii Cozy Green

 /* 
  - Blogger Labels Widget
  - Source code: https://writewhim.blogspot.com/2026/10/customizing-blogger-labels-widget.html
*/
 .list-label-widget-content ul, 
 .cloud-label-widget-content {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
 .list-label-widget-content ul {flex-direction: column;
}
 .list-label-widget-content a.label-name, 
 .cloud-label-widget-content a.label-name {
  background: #ffffff;
  color: #354f52;
  border: 1px solid #d8f3dc;
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
/* Heart SVG Icon */
 .list-label-widget-content a.label-name::before, 
 .cloud-label-widget-content a.label-name::before {
  content: "";
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2384a98c'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
 .list-label-widget-content a.label-name:hover, 
 .cloud-label-widget-content a.label-name:hover {
  background: #d8f3dc;
  color: #2f3e46;
  padding-left: 15px;
}
 .label-count {
  background: #eef8ef;
  color: #52796f;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
}

You can change the SVG icon as needed. I recommend checking out the iconify design, which offers a wide variety of SVG icons to choose from. Simply select an icon and copy its SVG URL from the CSS section.

Style 3: Aesthetic Desktop Folders

 /* 
  - Blogger Labels Widget
  - Source code: https://writewhim.blogspot.com/2026/10/customizing-blogger-labels-widget.html
*/
:root{
--folder-pattern: url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809?q=80&w=300'); /* Default background pattern */
--folder-tab: #68b7ef; /* Default tab color */
}
.widget.Label {
  background: transparent;
  padding: 15px;
}

.widget.Label h2.title {
  font-size: 16px;
  font-family: 'Georgia', serif;
  color: #333;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.list-label-widget-content ul, 
.cloud-label-widget-content {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 15px; /* Spacing between folders */
  justify-content: flex-start;
}

.list-label-widget-content li,
.cloud-label-widget-content span.label-size {
  display: inline-block;
}

/* --- THE FOLDER WRAPPER --- */
.list-label-widget-content a.label-name, 
.cloud-label-widget-content a.label-name {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px;          /* Folder width */
  height: 100px;         /* Folder height */
  padding: 20px 10px 10px 10px;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Brush Script MT', 'Great Vibes', 'Dancing Script', cursive, serif; /* Folder font */
  font-size: 18px;
  color: #ffffff;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8), 0px 0px 5px #000;
  text-align: center;
  line-height: 1.1;
  z-index: 1;
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* --- BACK LAYER (THE TOP TAB) --- */
.list-label-widget-content a.label-name::before,
.cloud-label-widget-content a.label-name::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  width: 100%;
  height: 30px;
  background-color: var(--folder-tab);
  border-radius: 10px 10px 0 0;
  clip-path: polygon(0 0, 48% 0, 58% 100%, 0 100%);
  z-index: -2;
}

/* --- FRONT LAYER (MAIN FOLDER BODY/PATTERN) --- */
.list-label-widget-content a.label-name::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Rounded Folder Body */
  border-radius: 4px 14px 12px 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  
  /* DEFAULT BACKGROUND PATTERN */
  background-color: #d1a153;
  background-image: var(--folder-pattern); 
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/* Hover Animation */
.list-label-widget-content a.label-name:hover,
.cloud-label-widget-content a.label-name:hover {
  transform: translateY(-4px) scale(1.02);
  filter: brightness(1.05);
}

/* Folder Count Badge */
.label-count {
  font-family: sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 1px 6px;
  border-radius: 10px;
  margin-top: 4px;
  text-shadow: none;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 480px) {
  .list-label-widget-content a.label-name, 
  .cloud-label-widget-content a.label-name {
    width: 110px;
    height: 80px;
    font-size: 15px;
  }
}

You can change the font by modifying the font-family.
You can change the default folder background and replacing the URL with your preferred image: --folder-pattern: url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809?q=80&w=300');
You can change the default folder tab color: --folder-tab: #68b7ef;

:root{
--folder-pattern: url('YOUR_DEFAULT_URL.jpg'); /* Default background pattern */
--folder-tab: #68b7ef; /* Default tab color */
}

How to customize background image/patterns for individual labels:

If you want specific folders to have different patterns (as shown in the example), you can target them in CSS using their tag links with the selector a[href*="LABELNAME"]:.

Screenshot to customize background image/patterns for individual labels

/* Folder 1 */
.widget.Label a[href*="Blog"]::after{background-image: url('YOUR_PATTERN_URL.jpg');}
.widget.Label a[href*="Blog"]::before{background-color: #000000;}
/* Folder 2 */
.widget.Label a[href*="tutorial"]::after{background-image: url('YOUR_PATTERN_URL.jpg');}
.widget.Label a[href*="tutorial"]::before{background-color: #d49561;}
/* Folder 3 */
.widget.Label a[href*="Blogger"]::after{background-image: url('YOUR_PATTERN_URL.jpg');}
.widget.Label a[href*="Blogger"]::before{background-color: #4b305e;}

Can I Create Multiple Styles for Labels Widget?

Yes, you can apply different styles to multiple Label Widgets on your blog. All you need to do is find the widget ID of each label (e.g., id='Label1').

To find the widget IDs, navigate to Theme in your Blogger dashboard.
Click the down arrow next to Customize, and select Edit HTML
In the HTML editor, click the Jump to Widget icon to view the list of widgets and their corresponding IDs.

Once you know which Label widget you want to style without affecting the other widgets, add #Label1 before each CSS class selector.

For example:

#Label1 .list-label-widget-content ul,
#Label1 .cloud-label-widget-content {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 15px;
  justify-content: flex-start;
}

#Label1 .list-label-widget-content li,
#Label1 .cloud-label-widget-content span.label-size {
  display: inline-block;
}

This scopes the styles to the widget with the ID #Label1, preventing them from affecting other widgets.

Final Thoughts

Now you know how to customize your Labels widget with different styles in less than five minutes. This simple change can make a big difference in your blog’s appearance and navigation. By using pure CSS to style the existing HTML structure, you can preserve all built-in features, including sorting, label counts, and label filtering.

Which style do you like best? If you need any help changing the font colors for the active, hover, or visited states, just let me know.

October 24, 2026 at 7:45 PM

thanks for this! love the folder style, def gonna use it for my blog. I’m trying to customize each folder but it’s not working though, any idea how to fix it? https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdYK1iVO9n964oYFx2qI6Ze_XloxDE4W1RoqdS0ltgfjf0RgwTvvxdcPEeJhWk5NPQSMMFtFmQ7JFVrY13z561hGdKbVSDNbu1Dyavk31z3GKpv1juwdBt8wVfwddrP42uoJZHxuM7X9Bn7w0H7v02zFaHXHtd1880zgdbv0MQcJed3xxtrp2gmwzEzhg/s1600/Screenshotq.png

October 24, 2026 at 9:28 PM

JB said:

Hmm, I can’t fix it without knowing your blog or theme you’re using. But I suggest checking the link and the class name wrapped around your label. Example, when you inspect the label link, you should see something like <a class="labelclass"> then your CSS would then be #Label2 a.labelclass{...}

Contact Form