How to add widgets area to Blogger's Navbar, Header and Body

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 will teach you how to add gadget or widgets area on any part of blogger which include navbar,header,body and also how to delete the pre-existing ones. I am going to explain to you step by step in detail.

Step by step guide
• backup your template before trying this!
• After backing up 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 line of code:

<b: section class='navbar'

The search will bring a code example like the one below

<b:section class='navbar' id='navbar' Max widgets='1' name='Navbar' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' mobile='no' title='Navbar' type='Navbar'> </:b widgets>
</:b section >

Don't worry yours may not have all the contents but it's still the same

Change maxwidgets='20' or any number you like, change showaddelement='yes' and lastly change locked='false' to make the code look like this

<b:section class='navbar' id='navbar' maxwidgets='20' name='Navbar' showaddelement='yes'>
    <b:widget id='Navbar1' locked='false' mobile='no' title='Navbar' type='Navbar'></b: section>

You are done with the first part.

(2) Scroll down a little bit until you see the code below. You can also use the search box.

<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
        <b:widget id='Header1' locked='true' mobile='no' title='YOUR-SITE-NAME (Header)' type='Header'>
          <b:includable id='main'>

Change locked='false' showaddelement='yes'  maxwidgets='20' or any number you like to make it look like the codes below

<b: section class='header' id='header' maxwidgets='20' name='Header' showaddelement='yes'>
        <b:widget id='Header1' locked='false' mobile='no' title='YOUR-SITE-NAME (Header)' type='Header'>
          <b:includable id='main'>

Then you are also done with this part.

(3) Scroll down or use the search box until you see the code below

<b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='no'>
  <b:widget id='HTML1' locked='true' mobile='yes' title='search' type='HTML'>
          <b:includable id='main'>

Also do what you did to other codes to make it look like this

<b:section class='tabs' id='crosscol' maxwidgets='20' name='Cross-Column' showaddelement='yes'>
  <b:widget id='HTML1' locked='false' mobile='yes' title='search' type='HTML'>
          <b:includable id='main'>

(4) Then scroll down or use the search box till you find the code below

<b:section class='main' id='main' name='Main' showaddelement='no'>
            <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
              <b:includable id='main' var='top'>

Here is the tricky part, you will notice it doesn't have maxwidgets in it. Hmmmm, all you have to do is add your own or copy and past it between id='main' and name='main', also change what you changed in the previous codes to make the code look like this

<b: section class='main' id='main' maxwidgets='20' name='Main' showaddelement='yes'>
            <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
              <b:includable id='main' var='top'>

(5) Lastly search or scroll down till you find the last code below

<b:section class='foot' id='footer-3' maxwidgets='1' name='Footer' showaddelement='no'>
        <b:widget id='Attribution1' locked='true'  title='' type='Attribution'>
          <b:includable id='main'>

Do the needful to make the code look like this

<b:section class='foot' id='footer-3' maxwidgets='20' name='Footer' showaddelement='yes'>
        <b:widget id='Attribution1' locked='false' mobile='yes' title='' type='Attribution'>
          <b:includable id='main'>
   

Then save the template and check your layout, you will notice you can now add new gadgets to your blog's navbar, header, body and footer and you can also delete/remove all the pre-existing widgets. Hope this was helpful?

Note: its not compulsory to try everything at once, you may edit only the part you want to and leave the rest.

   

If you’re a first-time reader, or simply want to be notified when we post new articles and updates, you can keep up to date by social media (Facebook and Twitter)