How to add widget in Blogger | Blogger layout HTML codes

Hello Friends we are again with some other easy tutorial submit asked by one in all our user. In This publish we can educate you to feature a widget container inside the layout. With this  lines of codes you may upload any widget inside the section. You can add everywhere you like as in line with your preference.

Adding a widget to your Blogger layout involves editing the HTML of your template or using the Blogger interface. Here's how you can do both:

Adding a Widget Using Blogger Interface

Log in to Blogger:

• Go to Blogger and check in with your Google account.

Go to Layout:

• In the left sidebar, click on on "Layout."

Add a Gadget:

• Click on "Add a Gadget" inside the place where you want to add the widget (together with the sidebar, header, or footer).

Choose a Gadget:

• A pop-up window will seem with a listing of to be had devices. Select the form of gadget you need to add (e.G., HTML/JavaScript, Text, and many others.).

Configure the Gadget:

• Fill in the required info and click on "Save."

Save Layout:

• Once you have brought and configured the machine, click "Save association" on the pinnacle right of the layout page.

Adding a Widget Using HTML Code

If you need to feature a custom widget the use of HTML code, you could edit the template's HTML without delay:

Log in to Blogger:

1. Go to Blogger and check in along with your Google account.
2. Click at the "Template" tab on the left sidebar.
3. Click at the "Edit HTML" button.
4. Locate the preferred region in the HTML code wherein you need to feature the widget.
5. Use the following primary HTML structure to add a widget:

<b:widget id='WidgetID' locked='false' title='Widget Title' type='HTML'>

  <!-- Your HTML code here -->

</b:widget>

 Replace WidgetID with a completely unique ID, Widget Title together with your favored name, and add your HTML code inside the widget tag.

6. Click "Save Template" to apply changes.

Common Blogger Layout HTML Codes

• Sidebar: <b:section id='sidebar' preferred='yes'/>
• Footer: <b:section id='footer' preferred='yes'/>
• Header: <b:section id='header' preferred='yes'/> 

Note: Replace preferred='yes' with preferred='no' to make the section optional.

Tips and Variations

• Use locked='true' to lock the widget in place.
• Use mobile='yes' to make the widget visible on mobile devices.
• Use title='Widget Title' to set a custom title for the widget.
• Experiment with different HTML codes and gadgets to create custom widgets.

By following these steps and using the provided HTML codes, you can add widgets to your Blogger layout and customize your blog's design.