Add a Widget or Gadget Above a Blog Post in Blogger

If you want to add a gadget or widget to Blogspot that displays above the blog posts then read on as in today's Blogger tutorial I explain how to open up the main posts section of a Blogger blog so that more gadgets can be added. Despite involving a small change to the Blogger theme it is not difficult and will only involve less than 5 minutes to unlock the main section so you can begin adding gadgets and widgets to Blogger in the Main Section.

By default Blogger themes on installation do not have the main section open to allow additional gadgets or widgets like a message or a banner to be added. Older default blogger templates have the main section locked in most cases. Therefore, in order to add gadgets the main section needs to be opened manually by tweaking the template. Whether you have a default Blogger theme or a third-party template unlocking the main section will not affect any other function.

Follow this step-by-step tutorial if you want to start adding gadgets in the Blogger posts area like a banner or a welcome message or some other widget. I suggest you also take a look at my other in-related step-by-step Blogger tutorials that show you how to do the following:

Easy Way to Add Banners to Blogger
How to Add a Welcome Message to Blogger
How to Add a Sticky Welcome Message to Blogger

How to Add a Gadget to the Main Posts Section in Blogger

In order to add a gadget or widget like a banner above blog posts in Blogger so that it displays on the homepage and all other blog pages it must first be possible to add a gadget to the main post area.

Check if the Add a Gadget Option in the Main Blogger Posts Section is Displayed

Check whether the Add a Gadget option is available by:

1. From the Dashboard select the Layout menu from the left-hand side menu


2. Scroll down to the Main Section where you will see the Blog Posts gadget in place


3. Check whether the Add a Gadget option is available in the main section.




If the Add a Gadget option is available you can skip
to Step 12

or

If the Add a Gadget option is not available it needs to be unlocked by following the steps below that will first show you how to open the main section and then add the a gadget for affiliate banners, messages and more.





Steps to Open the Main Posts Section in Blogger to Add Extra Gadgets



4. From the Dashboard select Theme from the menu on the left-hand side


5. Click on the down arrow on the orange Customize button


6. Click Backup to back up your template before proceeding then return to the drop down menu under the customize arrow





7. Choose Edit HTML from the drop down list of options


8. Click anywhere in the Blogger template


9. Enter CTRL + F to bring up the search box


10. Enter the search term class='main'
    
    You are looking for these lines:
    
    

    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>

    
    
11. Replace the no with yes to show add element and save.
    
    The code should now look like this:

    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='yes'>

    
    
12. Click Save to save the change to your template.


13. Navigate back to the Layout menu from the Dashboard


14. You will now be see the Add a Gadget link in the main blog post section. If for some reason this still isn't showing up then go back to the template and check if there is a maxwidgets attribute in the same line of code. Make sure that the maxwidgets="1" is set a number greater than one eg maxwidgets="2" and then save and go back to Layout again.




Steps to Add a Gadget Above a Blog Post in Blogger



15. To display your message or banner or other widget click on Add a Gadget above Blog Posts


16. Choose the HTML/Javascript gadget or you could choose Text Gadget if no code is being added


17. Paste the code in the content box in the pop up window that appears for the HTML / Javascript gadget.





18. Click on Save


19. Arrange your new gadget in the Main Section by dragging and dropping so that it occurs above the blog posts gadget in the Main Section


20. Click on Preview (eye icon) in the bottom right corner to see your new banner.


21. Click the Save button to apply your changes to the layout

Depending on the gadget you want to add above the blog posts you may find the following Blogger tutorials helpful:

Easy Way to Add Banners to Blogger
How to Add a Welcome Message to Blogger
How to Add a Sticky Welcome Message to Blogger

Today I have shown you how to open up the main posts area in Blogger to accommodate extra gadgets. You have learned how to add an affiliate marketing banner to your Blogger blog (Blogspot blog) that displays just above the posts on every page.

Related Articles

How to Add a Welcome Message to Blogger
How to Add a Sticky Welcome Message to Blogger
Easy Way to Add Banners to Blogger