How to Create your own widget from Code??

How to Create your own widget from Code??
How to Create your own widget from Code??

How to Create your own widget from Code??

Widgets are the useful supporting blocks for a blog or website. Yesterday I tried to google a lot on how to create a widget on my own in blogger.
I understand the the blogger’s layout give much more flexibilities in terms of widget creation.

you can do a lot of things in Layout section. you can

 

  • Drag and drop widget
  • Delete widget
  • Create a new widget
  • Reposition a widget.

But now , all blogger’s need sophisticated widget and want to alter a theme. So am I.I tried to look into the code. I found a nice way to add widget from back end…from code.

Let me describe how you can create a widget..

  1. Go to template—>edit HTML—>check Expand Widget Templates
  2. Copy the entire code to a notepad.
  3. Now to to the exact location where you want to place the widget.
  4. Firefox inspect element(firebug). or chrome’s web console  can help you to find exact location.

Now let us create a structure of a widget

<b:section class=”main” id=”main” showaddelement=”yes”>
<b:widget id=”Blog1″ locked=”true” title=”Blog Posts” type=”Blog”>
<b:includable id=”nextprev”>
Your widget code here

</b:includable>
</b:widget>
</b:section>

Well this code will surely create a blank widget for you..from here you can go back to template tab of blogger and add your widget or else replace Your widget code here with your actual widget post.

Things to remember:

  • All widget should be between a section whose id should be unique
  • All widget id should be unique.

Share and Enjoy !

Leave a Comment

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