Blogger Widgets: How to Add Html Codes in Blogger

Table of Contents

BlogSpot Widgets are also known as “Gadgets”. In blogger, gadget allows you to customize or change the design of your blog, without changing HTML, CSS and JavaScript codes on your template.

blogger gadget widgets

In the simple sense, Gadget enables the drag-drop feature in your layout page. Thus, it makes easier for a beginner to design a blog and move widgets anywhere, including under a post article.

You can easily drag and drop your widgets anywhere in your layout page, depending on your template’s layout. But if you’re using default classic blogger themes, consider changing your template to SEO-friendly, fast-loading templates so that your visitors get the best user experience.

It also help you to create categories for your articles using labels. Thus, it’s very important for customizing your blog to look more attractive.

What is a Widget?

 “Widget is a sidebar box used to modify the design and contents of the blogs using a simple drag-and-drop system without changing template’s HTML, CSS and JavaScript codes”.

In short, blogger widget contains JavaScript codes to show related posts, popular posts, Featured post, subscribe us form, Contact us form, sign up button and many more. It’s almost same as WordPress plugins.

In order to insert a gadget on your blog, go the layout > In the Sidebar click on Add a Widget and select the widget you want to show to your readers.

How to add any widget to blogger site

1. Go to Blogspot site and Sign in using your existing Gmail account.

adding widgets to blogger

2. Once you’re signed in, go your dashboard and click on Layout

adding gadgets to blogger

3. In the sidebar click on +Add a Gadget

adding blogger widget

4. Select the widget you want to use and click on  & customize it and then Save  it.

insert blogger widget

5. Click on Save Arrangement It’s an orange button in the upper-right portion of the window. This saves your gadget and takes it live on your blog.

insert blogger gadgets

Now, you have successfully add gadgets in sidebars on your blog.

inserting blogger widgets

How to Add Custom JavaScript Codes to Blogger Gadget

1. To add the JavaScript codes in blogger, open your blogger dashboard > Layout > In sidebars add a widgetSelect HTML/JavaScript.

adding html codes to blogger gadget

2. Paste your javascript codes > save it.

javascript codes to blogger gadgets
How to add widgets On blog posts

1. To insert a widget between your posts, click on new post and select HTML mode.

widgets between blogger posts

2. Paste the JavaScript code in your desired place, anywhere between your articles. Now, select Compose mode > Save > publish or preview & it’s done!

widgets between blog posts

Widgets enable additional features, like visitor counters or social media sharing buttons to your blog. The more widgets you use, the more exposure you gain from your visitors.

Getting error while saving your widgets? let me know in the comment box below! If you find it useful, share it on social media sites.

Leave a Comment

Your email address will not be published. Required fields are marked *