How to Add a Widget or Gadget in Blogger

Blogger widgets, also called gadgets, let you add useful content and features to your website without manually editing the complete Blogger template.

You can use widgets for navigation, labels, popular posts, followers, custom HTML, JavaScript, links and many other website elements.

This guide explains how to add a widget or gadget in Blogger, move and edit widgets, add custom HTML/JavaScript, remove unwanted gadgets and troubleshoot situations where the Add a Gadget option is missing.

What Is a Blogger Widget or Gadget?

A Blogger widget is a page element that can be placed inside supported sections of your Blogger theme.

Examples include:

• Popular Posts
• Labels
• Pages
• Followers
• Blog Archive
• Featured Post
• HTML/JavaScript
• Link lists

Blogger often uses the word gadget in the dashboard, while developers commonly refer to the underlying template element as a widget.

For normal Blogger users, the two terms usually describe the same type of layout component.

How to Add a Widget in Blogger

To add a new Blogger gadget:

1. Sign in to Blogger.
2. Select the blog you want to edit.
3. Open Layout.
4. Find the section where you want the widget.
5. Click Add a Gadget.
6. Select the gadget you want to add.
7. Configure its available settings.
8. Click Save.
9. Save the layout if Blogger displays a separate Save option.

The available widget positions depend on your Blogger theme.

Typical positions include:

Header
Sidebar
Main content area
Footer

How to Move a Blogger Widget

Most movable Blogger gadgets can be repositioned directly from the Layout screen.

Go to:

Blogger → Layout

Click and drag the widget to another supported position.

For example, you could move a Labels gadget from one sidebar position to another or move an HTML/JavaScript gadget further down the sidebar.

Whether you can move a widget into a particular area depends on the structure of the theme.

How to Edit an Existing Blogger Widget

Open:

Blogger → Layout

Find the gadget and click its edit control.

Depending on the widget type, you may be able to change:

• Widget title
• Number of items displayed
• Sorting options
• Selected labels
• Links
• HTML or JavaScript code
• Display preferences

Save the gadget after making your changes and check the published website.

How to Add an HTML/JavaScript Widget in Blogger

The HTML/JavaScript gadget is one of Blogger's most useful widgets because it lets you add custom code without editing the complete template.

Go to:

Blogger → Layout → Add a Gadget → HTML/JavaScript

You can then enter a title if needed and paste your code into the content field.

For example:

<div class="custom-message">
  Welcome to our website.
</div>

You can also use the gadget for supported JavaScript snippets:

<script>
  console.log('Blogger widget loaded');
</script>

Only add scripts from sources you trust. Third-party JavaScript can affect security, privacy and website performance.

What Can You Add With an HTML/JavaScript Gadget?

Common uses include:

• Custom text and banners
• Buttons
• Social links
• External widgets
• Tracking or verification snippets when appropriate
• Custom navigation components
• Small JavaScript features

If a feature needs to appear only in a specific area of the page, an HTML/JavaScript gadget can often be safer and easier to maintain than editing the entire theme XML.

For more advanced template changes, see our guide to editing Blogger HTML and CSS safely.

How to Add a Labels Widget

The Labels gadget can display the categories used across your Blogger posts.

Go to:

Blogger → Layout → Add a Gadget → Labels

Configure the available options and save the widget.

This can give visitors another way to browse your content by topic.

For example, a Blogger tutorial site might display categories such as:

SEO
Blogger Tips
Blogger Widgets
Customization
Documentation

See our guide to creating Blogger categories with Labels for the complete category setup.

How to Add a Pages Gadget

Blogger's Pages gadget can be used to display navigation links to static pages and supported links.

Go to:

Blogger → Layout → Add a Gadget → Pages

You can then configure which pages or links appear in the navigation.

Depending on your theme, the Pages gadget may appear as a horizontal menu or another navigation component.

How to Add a Popular Posts Widget

If your theme supports Blogger's standard gadget, open:

Blogger → Layout → Add a Gadget → Popular Posts

You can configure the options available in the widget and place it in a sidebar or another supported area.

Popular Posts can help visitors discover additional content, but avoid overloading the sidebar with too many competing widgets.

How to Remove a Blogger Widget

If you no longer need a gadget:

1. Open Blogger → Layout.
2. Find the widget.
3. Open its edit settings.
4. Choose Remove if the option is available.
5. Save the layout.

Some widgets may be locked by the theme and cannot be removed normally through Layout.

In that situation, changing the widget may require editing the Blogger theme code.

Why Is Add a Gadget Missing in Blogger?

If you open Layout but do not see Add a Gadget in a particular section, the theme may not allow additional widgets there.

Blogger theme sections can contain settings similar to:

<b:section
  id='sidebar'
  maxwidgets='5'
  showaddelement='yes'>

The important setting is:

showaddelement='yes'

If a section instead uses:

showaddelement='no'

Blogger may not offer an Add a Gadget control for that section.

The theme may also use a maxwidgets limit that prevents additional widgets once the maximum number has been reached.

Custom Blogger Themes and Widget Positions

Third-party Blogger templates can use custom Layout structures.

This means your Layout screen may look different from screenshots taken with a default Blogger theme.

A custom theme developer can decide:

• Which sections appear in Layout
• Where gadgets can be added
• How many gadgets a section supports
• Whether a widget is locked
• How widgets are styled on the published site

Therefore, a missing widget position is not always a Blogger dashboard problem. It may simply be part of the theme design.

What Does a Blogger Widget Look Like in Theme HTML?

Inside Blogger XML, widgets use Blogger-specific markup.

A simplified example looks like:

<b:widget id='HTML1'
          locked='false'
          title='Custom Widget'
          type='HTML'>
</b:widget>

Widgets must normally exist inside a Blogger section:

<b:section id='sidebar' class='sidebar'>
  ...
</b:section>

You do not need to understand these tags to add normal gadgets through Layout, but they become useful when developing or customizing Blogger templates.

Why Can't I Move a Widget to Another Area?

Blogger only allows gadgets to move into positions supported by the current theme structure.

If you cannot drag a gadget next to the logo, inside the post body or into another specific location, that area may not contain a compatible Blogger section.

Moving it there may require modifying the theme XML instead of using the Layout drag-and-drop interface.

Why Is a Blogger Widget Not Showing?

If a widget is present in Layout but does not appear correctly on the website, check:

• Whether the gadget contains content.
• Whether the theme hides it with CSS.
• Whether it is configured for a specific page type.
• Whether its JavaScript has an error.
• Whether the widget is hidden on mobile.
• Whether a browser extension is interfering with it.

Also test the website in another browser or private browsing window before changing the theme.

Can Blogger Widgets Slow Down Your Website?

Yes, particularly third-party widgets that load external JavaScript, images, trackers or embedded content.

A simple built-in Labels widget may have little impact, while a third-party social feed or advertising widget can load many additional resources.

Only keep widgets that provide useful functionality.

If your Blogger site is becoming slow, see our Blogger page speed optimization guide.

Blogger Widget Checklist

1. Open Blogger → Layout.
2. Choose the correct widget area.
3. Click Add a Gadget.
4. Select the appropriate gadget.
5. Configure its settings.
6. Move it to the correct position if necessary.
7. Save the gadget and layout.
8. Check the published website on desktop and mobile.
9. Remove unused or slow third-party widgets.
10. Use HTML/JavaScript only for code you understand and trust.

Questions About Blogger Widgets and Gadgets

How do I add a widget in Blogger?

Open Blogger → Layout, find a supported section, click Add a Gadget, select the widget you want, configure it and save the layout.

What is the difference between a Blogger widget and gadget?

Blogger commonly calls page elements gadgets in the dashboard, while the template system refers to them as widgets. In normal use, the terms often describe the same layout components.

How do I add HTML or JavaScript to Blogger?

Go to Layout → Add a Gadget → HTML/JavaScript, paste your trusted HTML or JavaScript code into the content field and save it.

Why is Add a Gadget missing from my Blogger Layout?

Your theme may not allow new widgets in that section. Blogger sections can disable new elements or limit the maximum number of widgets they contain.

Can I move Blogger widgets anywhere?

No. Gadgets can only be moved into sections supported by the current theme. Some locations require changes to the Blogger template XML.

Can Blogger widgets affect page speed?

Yes. Third-party widgets can load extra scripts, images and external resources. Remove unnecessary gadgets and be particularly selective with external JavaScript widgets.

Final Recommendation

For most Blogger features, start with Layout → Add a Gadget instead of immediately editing your theme HTML.

Use Blogger's built-in gadgets where they meet your needs, and use the HTML/JavaScript gadget for small custom components or trusted external code.

Keep your layout simple. Too many widgets can clutter the design and some third-party gadgets can noticeably slow down your website.

Use widgets to improve navigation or functionality, not simply because your theme provides space for more gadgets.