How to add a gadget or widget inside blogger header or above post (body)

If you are using default blogger template for your blog, then you can not add any gadget/widget inside header section or just above blog posts (body) section. Only few blogger templates allow you to add one more widget except blog header under Header section. Typically blogger default template looks like below
create Add a Gadget option under Header or Blog Post - blogtlog.com
Default blogger template allows us to add widget only in sidebar and footer. Here we will discuss how to add 'Add a Gadget' option beside header or above blog post section.

To create 'Add a Gadget' option inside header section, follow below steps:
Step 1: Go to blogger dashboard and then click on Template > Edit HTML option

Step 2: Before doing any changes in blogger html, take a backup of blogger template. If anything goes wrong during script change, we can always restore our blogger template from backup copy.

Step 3: Click anywhere inside the code and search (ctrl+f) for the string '<b:section class='header' id='header' maxwidgets='
Add a Gadget in blogger Header - blogtlog.com

Step 4: Now change maxwidgets='1' to any number (more than 1). Blogger will allow you to add that many number of widget under Header section. I am not sure about maximum limit of widget but it could be 10.

Step 5: Change showaddelement='no' to showaddelement='yes', now your code should look like below
           <div class='region-inner header-inner'>
           <b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
           <b:widget id='Header1' locked='true' title='Techonestop (Header)' type='Header'>
           <b:includable id='main'>

Step 6: Once all changes are completed, click on 'Save Template' to save the template 
Now go to 'Layout', refresh page and check you can see 'Add a gadget' rectangular box under Header or not. Also you can try to add widget and see the preview.

To create 'Add a Gadget' option above Blog Post section (Body), follow below steps:
Step 1: It is almost same as Header section, here search for '<b:section class='main' id='main' showaddelement='no'>'

Step 2: Now change showaddelement='no' to showaddelement='yes', there is no maxwidgets parameter here
Old statement: <b:section class='main' id='main' showaddelement='no'>
New statement: <b:section class='main' id='main' showaddelement='yes'>

Step 3: Click on 'Save Template' to save all changes, go to 'Layout' and refresh the web page to see 'Add a gadget' rectangular box above Body section
Add a Gadget in blogger body - blogtlog.com
You can use this widget to display Adsense ads or Social Sharing button or another other 3rd party gadget.

If you want to add gadget beside header, like it is displayed on this website, check our article on how to add banners, adsense or search box in blogger header.

If you face any challenge here, let us know. To get more updates on recent activities, follow 'BlogTlog' on Facebook / Twitter / LinkedIn or join our website as follower.

No comments:

Post a Comment

Thank you for your valuable comment. It will be published soon.