How To Add A Widget In Blogger Using Html editor?

Widgets are the co-elements of any blog or website which acts as an enhancer, you can say that widget is simply a gadget which increases the functionality of any site/blog. It can function as a barrier between your blog and social media sites to deliver the content, it may function as a navigation tool for your site or going further it can also add some more functionality to your site/blog by integrating the third-party applications or plugins. Blogger also provides a nice collection of widgets to it's users. But some times while editing the template in Bloggers it may happen that Layout of your blog may not function. And here it gets little tricky to add some widgets/gadgets.
Now in this tutorial we will be dealing with this problem, so that ever if it happens with you too then you must be able to add widget/gadget without any tension and problem. But before proceeding to Html Method we may also recall How to add widget using simple method?

#1 General Method

• Open Blogger Dashboard → Layout 

• Click on Add a Gadget

• Select the desired widget and add it to Layout panel. Now you'll see that widget has been installed to your blog.

#2 Html Method

• Open Blogger Dashboard → Template → Html Editor

• Find Sidebar Div class in your template or secondary column.

<div class='sidebar'>
.
.
.
</div>

• Now inside it find the section code like it is given below

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

 Section id and sidebar class name may be different for some of the blog templates. So easy and alternate way to find it and identify is 

• Find the Blog1 from widget menu, just below the Blog1 ends sidebar starts there.

• Now after finding the sidebar section code enter the following code.

 Instead of copying these code from here better you must remember it.

<b:widget id='HTML1' type='HTML'>
<b:includable id='main'>
.
.
.
</b:includable>
</b:widget>

• Above code is the parent container of the widget. Which is must to enter if you want to enter any widget.

 ID name Type name will be different for different-different widgets. For example we have shown here a demo of HTML/Javascript Editor of which Id isHTML1 and type defines the type of widget it is. Here it is HTML type 

• Inside the parent structure code, add the below given code which is the widget container division.

<!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
.
.
.

</div>

Congratulastions you have successfully added the widget in your Blogger site using Htmnl editor method.
Say your words for us we are eager to heaa it from you in the comment box below.