How to add Gadgets to blogger template?
As a blogger, how many times have you encountered that some templates do not reach our expectations? Nothing is perfect and we in fact have to start modifying each and every part of the template just to suit our needs and requirements. This article is one of my favourite of all time which is how to add a gadget or widgets above or below the header on blogger itself and I am going to explain to you step by step in detail. Usually adding a widget close to header is done when you would like to moonetize the site or adding more 'fun stuff'right below the header.


Step by step guide on how to add gadgets or widgets above or below the header:
First, you have to understand that you are going to change the layout of your template. Therefore, always backup!
  • Once backing up of the template is over, click Template and select Edit HTML for your blog.
  • A pop up will ask you to either Proceed or Cancel and select Proceed to continue editing.
  • Once the box is open and you are able to see all the codes and HTML's, press the F3 button or ctrl-F button to open the search box. Search for this code:
<div id="header-wrapper">

  • The search will bring you to a section as example below:
<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1"showaddelement="no">
<b:widget id="Header1" locked="true" title="Sample Blog (Header)" type="Header">
</b:widget>
</b:section></div>




  • See the words in red. What you got to do is to change the number of maxwidgets from 1 to any number. The number set will determine the number of gadgets you are able to place on that location.
  • The last step is to click Save and your template is all ready.

Wait! What happens if there is no such code (<div id="header-wrapper">)in the template? What should I do?
Lucky for you, that was what happened to me exactly! This is usually caused when you are using custom templates. Honestly, I couldn't find a way to solve it as I searched the whole Google but not able to find the exact solution to my problem. If you experienced this, this is what you can do:
  • Instead of searching for this code:
<div id="header-wrapper"

         Search for this instead:


maxwidgets



  • You are definitely going to find quite a number of codes with maxwidgets and thus, check manually on which is the one that has the word header close by. In my case, I found this (see the one in red):

<div id='header'>

    <b:section id='header1' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='The Big Fat Reality (Header)' type='Header'>

<b:includable id='title'>
  <a expr:href='data:blog.homepageUrl' id='logo'><data:title/></a>



  • What you can do here is simple. Just change the maxwidgets to any other number than 1 and press save.
  • Now check back your Layout and you will be able to see new Gadgets area located above and below the header.

I hope you enjoyed this article as much as I do when writing it and if you have any enquiry, feel free to drop me a line and I will get back to you as soon as possible. Also, if you like this, please use the share button to share with your friends and family.


About the writer: I am an avid blogger and close to a full time online writer. I been writing for many years and The Big Fat Reality is one of my upcoming blogs. I am also sharing all my tips and guides on blogging in this blog and if you love blogging, you should definitely check this article out: Disqus - The Best Alternative Comment System For Blogger.