Home
Blogger Widgets

How to Add an HTML/JavaScript Widget in Blogger

Learn how to add an HTML/JavaScript widget in Blogger, insert custom HTML or scripts, position gadgets safely and troubleshoot code that does not work

The HTML/JavaScript widget in Blogger lets you add custom HTML, JavaScript, buttons, banners, tracking snippets and other small components without editing the complete Blogger template.

It is one of the most useful Blogger gadgets because you can add custom functionality from the Layout screen and move the widget to supported areas of your theme.

This guide explains how to add an HTML/JavaScript widget in Blogger, where to place it, how to edit or remove it and what to check when your custom code does not work.

How to add an HTML JavaScript widget in Blogger using the Layout section

What Is the HTML/JavaScript Gadget in Blogger?

The HTML/JavaScript gadget is a Blogger widget that accepts custom code.

You can use it for content such as:

  • Custom HTML
  • JavaScript snippets
  • Buttons and banners
  • Social links
  • Small custom widgets
  • External embeds
  • Some tracking or verification scripts

Because it is managed through Blogger Layout, you can often add these elements without modifying your theme XML.

How to Add an HTML/JavaScript Widget in Blogger

Follow these steps:

  1. Sign in to Blogger.
  2. Select your blog.
  3. Open Layout.
  4. Find the section where you want the widget.
  5. Click Add a Gadget.
  6. Select HTML/JavaScript.
  7. Enter a title if you want one.
  8. Paste your HTML or JavaScript into the content area.
  9. Click Save.
  10. Save the Layout if required.

Open your published website afterward and confirm that the widget displays correctly.

Example: Add Custom HTML to Blogger

You can add a simple message or custom component:

<div class="custom-box">
  <h3>Blogger Tutorials</h3>
  <p>Browse our latest Blogger guides and resources.</p>
</div>

Paste the code into:

Layout → Add a Gadget → HTML/JavaScript

Then save the widget.

Example: Add a Custom Link or Button

You can also create a simple button:

<a href="https://www.example.com/" class="custom-btn">
  Visit Website
</a>

The visual appearance of the button depends on your theme CSS.

For example:

.custom-btn{
  display:inline-block;
  padding:10px 18px;
  text-decoration:none;
  border-radius:6px;
}

Theme styling is generally better kept in your main CSS when the same style is used in several places.

How to Add JavaScript to a Blogger Widget

The HTML/JavaScript gadget can also contain JavaScript.

For example:

<script>
  document.addEventListener('DOMContentLoaded', function () {
    console.log('Blogger widget loaded');
  });
</script>

Save the gadget and test the website carefully.

Only use JavaScript that you understand or obtain from a trusted source. Third-party scripts can affect performance, privacy and website security.

Do You Need to Enter a Widget Title?

No. The title is usually optional.

If your widget is simply running a script or displaying a custom component that already contains its own heading, you can normally leave the Blogger gadget title empty.

This is especially useful for invisible scripts where you do not want an unnecessary heading displayed on the website.

Where Can You Place an HTML/JavaScript Widget?

The available positions depend on your Blogger theme.

Common widget areas include:

  • Header area
  • Sidebar
  • Above or below posts
  • Footer

After adding the gadget, you can usually drag it to another supported position from:

Blogger → Layout

If Blogger does not allow the widget to move to a particular location, that area may not contain a compatible widget section.

Why Is Add a Gadget Missing?

Blogger themes are built from sections and widgets.

A section can contain settings similar to:

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

The setting:

showaddelement='yes'

allows the Layout screen to offer an Add a Gadget option for that section.

If the theme uses:

showaddelement='no'

you may not be able to add another widget there through Layout.

A maxwidgets limit can also prevent more gadgets from being added once the section reaches its maximum.

How to Move an HTML/JavaScript Widget

Go to:

Blogger → Layout

Drag the HTML/JavaScript gadget to another available widget position.

Then save the arrangement and check your website.

If the gadget cannot be dragged into a particular area, the limitation is usually caused by the theme structure rather than the HTML/JavaScript gadget itself.

How to Edit an HTML/JavaScript Gadget

Open:

Blogger → Layout

Locate the HTML/JavaScript gadget and open its settings.

You can then edit:

  • The gadget title
  • HTML markup
  • JavaScript
  • Links
  • Embed code

Save the changes and test the published site again.

How to Remove an HTML/JavaScript Widget

If you no longer need the widget:

  1. Open Blogger → Layout.
  2. Find the gadget.
  3. Open its settings.
  4. Choose Remove.
  5. Save the Layout.

If the Remove option is unavailable, the widget may be locked by your theme.

HTML/JavaScript Gadget vs Edit HTML

Use the HTML/JavaScript gadget when you only need a small component or script in a supported widget area.

For example:

Task Recommended Method
Sidebar banner HTML/JavaScript gadget
Custom button HTML/JavaScript gadget
Small external script HTML/JavaScript gadget when suitable
Change overall page structure Edit theme HTML
Modify Blogger widget markup Edit theme HTML
Change site-wide template logic Edit theme HTML

If you need deeper template changes, see our guide to editing Blogger HTML and CSS safely.

Why Is My HTML Code Not Working?

If custom HTML does not display correctly, check for:

  • Missing closing tags
  • Incorrect quotes
  • Broken links
  • CSS hiding the element
  • Invalid nested HTML

For example, make sure:

<div>
  Content
</div>

contains both an opening and closing tag.

Why Is My JavaScript Not Working?

If JavaScript fails, common causes include:

  • A syntax error
  • The script runs before the required HTML exists
  • A required external library is missing
  • Another script creates a conflict
  • The browser blocks an external resource
  • The script uses an insecure HTTP resource

Open your browser developer console to look for JavaScript errors before changing unrelated parts of your Blogger theme.

Be Careful With Third-Party Widget Code

Do not paste unknown JavaScript into Blogger simply because a website tells you to copy and paste it.

A third-party script may:

  • Track visitors
  • Load advertisements
  • Inject external content
  • Slow down your website
  • Stop working later

Use scripts from trusted providers and understand why the code is required.

Can HTML/JavaScript Widgets Slow Down Blogger?

The widget itself is not necessarily slow, but the code placed inside it can be.

For example, a simple HTML link adds very little overhead, while a third-party social feed may download multiple scripts, images and tracking resources.

Remove gadgets that no longer provide meaningful value.

For performance optimization, see our Blogger page speed guide.

Back Up Before Making Larger Changes

Adding a basic gadget through Layout normally does not require editing the complete theme.

However, if you start modifying theme sections to create new widget positions, download a backup first.

See our Blogger theme backup and restore guide.

HTML/JavaScript Widget Checklist

  1. Open Blogger → Layout.
  2. Choose the correct widget section.
  3. Click Add a Gadget.
  4. Select HTML/JavaScript.
  5. Leave the title blank when it is unnecessary.
  6. Paste only trusted HTML or JavaScript.
  7. Save the gadget.
  8. Move it to the correct position if needed.
  9. Test the published website.
  10. Check desktop and mobile layouts.
  11. Remove unnecessary third-party scripts.

Questions About HTML/JavaScript Widgets in Blogger

How do I add HTML to Blogger?

Open Blogger → Layout → Add a Gadget → HTML/JavaScript, paste your HTML into the content field and save the gadget.

Can I add JavaScript to Blogger?

Yes. JavaScript can be added through an HTML/JavaScript gadget when appropriate, or through the Blogger theme HTML when the script needs deeper site-wide integration.

Do I need a title for an HTML/JavaScript gadget?

No. The title is normally optional. Leave it blank when the widget does not need a visible heading.

Why can't I add an HTML/JavaScript gadget in a certain position?

The theme may not provide a widget section there, the section may disable additional elements, or it may have reached its maximum number of widgets.

Why is my JavaScript widget not working?

Check for JavaScript syntax errors, missing dependencies, incorrect execution timing, blocked external resources and conflicts with other scripts.

Can HTML/JavaScript widgets make Blogger slower?

Yes, especially when they load heavy third-party scripts, tracking code, advertisements or external content. Keep only widgets that provide useful functionality.

Final Recommendation

Use Blogger's HTML/JavaScript gadget for small custom components whenever the Layout system already provides the position you need.

This is generally easier to maintain than modifying the full Blogger XML template for every small button, banner or script.

For larger structural changes, edit the theme carefully and keep a backup.

Most importantly, only paste code you understand or trust. A custom widget should improve your website without introducing unnecessary scripts, performance problems or maintenance issues.

Nikz Naveed is the founder and lead developer of BloggerTheme9, creating professional Blogger templates and custom websites since 2013. With more than a decade of hands-on experience in front-end web development, he specializes in building responsive, fast-loading and SEO-friendly websites for businesses, creators, publishers and online stores. His work covers Blogger template development, custom business websites, e-commerce stores, landing pages, UI/UX design, HTML, CSS, JavaScript, jQuery, XML, SEO, website performance optimization, hosting and DNS management. Through BloggerTheme9, Nikz has developed dozens of premium and free Blogger templates across business, magazine, portfolio, real estate, e-commerce and other niches, along with many custom-designed Blogger websites for clients. He also works on broader custom website projects through Craft-Site, helping businesses create professional, mobile-friendly websites focused on usability, credibility and growth.