How to Create your own widget from Code??

0
127
Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

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.
Don't miss out!
Subscribe To Newsletter

Receive top technical news, lesson ideas, travel tips and more!

Invalid email address
Give it a try. You can unsubscribe at any time.

Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

LEAVE A REPLY

Please enter your comment!
Please enter your name here