How to Customize Blogger Widgets With CSS

Blogger widgets can be customized with CSS to match the design of your website without changing how the gadget itself works.

You can change widget colors, fonts, spacing, borders, images, headings, links and buttons by targeting the widget's ID or CSS classes.

This guide explains how to customize Blogger widgets with CSS, find widget IDs, add custom CSS safely and style common gadgets such as Popular Posts, Labels, HTML/JavaScript and Contact Form.

How to customize Blogger widgets with CSS using widget IDs and classes

How CSS Customization Works in Blogger

Each Blogger widget has a unique ID.

For example:

PopularPosts1
Label1
HTML1
ContactForm1
FeaturedPost1

You can target a widget by adding # before its ID.

For example:

#PopularPosts1{
  background:#f7f7f7;
}

This CSS affects the Popular Posts widget with the ID PopularPosts1 without applying the same background to every other widget.

Back Up Your Blogger Theme First

Simple CSS changes are usually easy to reverse, but you should still create a theme backup before making larger modifications.

Go to:

Blogger → Theme → Backup

Download the current XML template and keep it somewhere safe.

See our Blogger theme backup and restore guide if you need help.

How to Find a Blogger Widget ID

Open:

Blogger → Theme → Edit HTML

You can use Jump to Widget to locate a specific gadget.

You may find code similar to:

<b:widget id='PopularPosts1'
          title='Popular Posts'
          type='PopularPosts'>

The important part is:

id='PopularPosts1'

The CSS selector for that widget becomes:

#PopularPosts1

Common Blogger Widget IDs

Your exact IDs may differ, but common examples include:

Widget	Example ID	CSS Selector
Popular Posts	PopularPosts1	`#PopularPosts1`
Labels	Label1	`#Label1`
HTML/JavaScript	HTML1	`#HTML1`
Contact Form	ContactForm1	`#ContactForm1`
Featured Post	FeaturedPost1	`#FeaturedPost1`

Always check your own theme instead of assuming the widget ends with the number 1.

Where to Add Custom CSS in Blogger

Depending on your Blogger theme, you may have a custom CSS option under:

Blogger → Theme → Customize → Advanced → Add CSS

If your theme provides this option, you can add simple CSS there and save the theme.

Some custom or newer themes may not display an Add CSS option. In that case, use:

Blogger → Theme → Edit HTML

and add your CSS in the theme's CSS area.

Add CSS Directly to the Blogger Theme

In many Blogger templates, you can search for:

]]></b:skin>

Add your custom CSS immediately before it.

For example:

/* Custom Widget CSS */

#PopularPosts1{
  background:#f7f7f7;
  padding:20px;
}

]]></b:skin>

Keep your custom rules together and add a comment such as:

/* Custom Widget CSS */

This makes your changes easier to find later.

Change a Widget Background

To give one widget a different background:

#PopularPosts1{
  background:#f7f7f7;
}

You can also add padding:

#PopularPosts1{
  background:#f7f7f7;
  padding:20px;
}

Add a Border and Rounded Corners

For a card-style widget:

#PopularPosts1{
  border:1px solid #e5e5e5;
  border-radius:10px;
  padding:20px;
}

Use the same design language as the rest of your website rather than giving every sidebar component a different style.

Customize Blogger Widget Titles

Many Blogger templates use a heading element inside widgets.

For example, your theme may support a selector such as:

#PopularPosts1 .title{
  font-size:20px;
  font-weight:700;
  margin-bottom:15px;
}

However, inner class names vary between templates.

Inspect the published widget before copying a selector from another Blogger theme.

Change Widget Link Colors

You can target links only inside a specific widget:

#PopularPosts1 a{
  color:#222;
  text-decoration:none;
}

#PopularPosts1 a:hover{
  color:#0066ff;
}

This avoids changing every link on your website.

Customize Popular Posts With CSS

For example:

#PopularPosts1 ul{
  list-style:none;
  margin:0;
  padding:0;
}

#PopularPosts1 li{
  margin-bottom:15px;
}

#PopularPosts1 img{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:6px;
}

This creates consistent thumbnails while keeping the changes limited to Popular Posts.

For the full widget setup, see our Blogger Popular Posts guide.

Customize the Blogger Labels Widget

A simple category-style treatment could use:

#Label1 ul{
  list-style:none;
  margin:0;
  padding:0;
}

#Label1 li{
  border-bottom:1px solid #eee;
}

#Label1 li a{
  display:block;
  padding:10px 0;
  text-decoration:none;
}

This can turn the Labels gadget into a cleaner category navigation list.

Customize an HTML/JavaScript Widget

If you have several HTML gadgets, targeting only one by its ID prevents your CSS from affecting the others.

For example:

#HTML3{
  background:#111;
  color:#fff;
  padding:25px;
  border-radius:10px;
}

#HTML3 a{
  color:#fff;
}

This is useful for promotional boxes, newsletter sections or custom sidebar content.

Customize the Blogger Contact Form

You can target Contact Form fields inside the widget:

#ContactForm1 input,
#ContactForm1 textarea{
  width:100%;
  box-sizing:border-box;
  padding:12px;
  border:1px solid #ddd;
  border-radius:5px;
}

You can also customize the submit button according to the classes used by your theme.

Do not remove important form elements simply for visual reasons, as this can interfere with the form's functionality.

How to Find Inner Widget Classes

The widget ID identifies the complete gadget, but sometimes you need to style something inside it.

For example:

#PopularPosts1 img
#PopularPosts1 a
#PopularPosts1 li

The easiest way to identify more specific classes is to use your browser's developer tools.

Open your published Blogger website.
Right-click the widget.
Select Inspect.
Find the widget ID.
Check the HTML elements and classes inside it.

You can then create a more accurate CSS selector.

Widget ID vs CSS Class

An ID normally identifies one specific widget:

#PopularPosts1

A class may apply to several elements:

.widget

Therefore:

.widget{
  background:#f7f7f7;
}

could affect many widgets, while:

#PopularPosts1{
  background:#f7f7f7;
}

targets only one.

Use the narrowest selector necessary for the design you want.

Avoid Styling Every .widget Unless Necessary

A broad rule such as:

.widget{
  padding:30px;
}

may unexpectedly affect:

Header widgets
Navigation
Blog Posts
Sidebar gadgets
Footer widgets

If you only want to modify one component, target its unique ID instead.

Use !important Only When Necessary

You may see CSS tutorials using:

color:#000 !important;

on almost every property.

Avoid this unless you actually need to override a stronger existing theme rule.

First try a more specific selector:

#PopularPosts1 a{
  color:#222;
}

instead of immediately using:

#PopularPosts1 a{
  color:#222 !important;
}

Excessive !important rules make future customization harder.

Customize Widgets for Mobile Devices

You can use CSS media queries to change widget styling on smaller screens.

For example:

@media (max-width:600px){
  #PopularPosts1{
    padding:15px;
  }

  #PopularPosts1 img{
    width:60px;
    height:60px;
  }
}

This lets the same widget adapt to desktop and mobile layouts.

CSS Does Not Change Widget Functionality

CSS controls presentation.

It can change things such as:

Colors
Spacing
Fonts
Borders
Width
Images
Alignment

CSS cannot normally change what data Blogger retrieves or how a widget works internally.

For example, CSS can change the appearance of Popular Posts, but it cannot change how Blogger decides which posts are popular.

Don't Delete Widget Code Just to Change Its Design

If your goal is simply to change colors, spacing or typography, you usually do not need to edit the complete widget markup.

Start with CSS.

Edit Blogger XML or widget markup only when CSS cannot achieve the required result.

For advanced template editing, see our Blogger HTML and CSS editing guide.

Why Is My Blogger Widget CSS Not Working?

Check these common causes:

The widget ID is incorrect.
The CSS selector does not match the actual HTML.
Another theme rule has higher specificity.
The widget uses different markup on your theme.
The CSS contains a syntax error.
Your browser is showing cached styling.

Use Inspect in your browser to verify which CSS rule is currently controlling the element.

Why Did My CSS Affect Other Widgets?

Your selector may be too broad.

For example:

ul{
  margin:0;
}

can affect lists across the entire website.

Instead use:

#Label1 ul{
  margin:0;
}

This limits the rule to the Labels widget.

Blogger Widget CSS Checklist

Back up your theme.
Identify the correct widget ID.
Use the widget ID as the main CSS selector.
Inspect inner elements when necessary.
Keep selectors as specific as needed.
Avoid broad global CSS rules.
Avoid unnecessary !important.
Keep custom CSS together and clearly commented.
Test desktop and mobile layouts.
Check other widgets after making changes.
Use CSS for design changes before editing widget markup.

Questions About Customizing Blogger Widgets With CSS

Can I customize Blogger widgets with CSS?

Yes. Blogger widgets can be targeted through their IDs and internal CSS classes to change colors, fonts, spacing, borders, images and other visual properties.

How do I find a Blogger widget ID?

Open Theme → Edit HTML and use Jump to Widget, or inspect the published page in your browser. Widget IDs may look like PopularPosts1, Label1 or HTML1.

Where should I add custom CSS in Blogger?

Use Theme → Customize → Advanced → Add CSS when your theme provides that option. Otherwise, add the CSS to the appropriate style area in Theme → Edit HTML.

How do I customize only one Blogger widget?

Target its unique ID. For example, #PopularPosts1 affects that specific Popular Posts widget instead of every widget on the website.

Why isn't my custom Blogger CSS working?

Check the widget ID, selector, CSS syntax and existing theme rules. Browser developer tools can show which CSS declaration is overriding your customization.

Should I use !important in Blogger CSS?

Only when necessary. First try using a more specific selector because excessive !important rules can make future theme customization difficult.

Final Recommendation

When customizing Blogger widgets, start by identifying the widget's unique ID and use CSS that affects only that component.

Make visual changes with CSS before modifying the underlying Blogger widget XML, and always keep a backup before making major theme changes.

Use responsive CSS for mobile devices and avoid broad selectors that unintentionally affect other parts of your website.

The safest Blogger widget customization is targeted CSS: style exactly the widget you need without rewriting functionality that already works.