How to add a Gadget above your Blog's Header in Blogger | Step by Step guide

Blogger is a widely used blogging platform. Blogger's Dashboard feature allows users to adjust the appearance of their blog. Within the Dashboard is the Layout feature, which lets bloggers add gadgets such as Popular posts, any HTML/JavaScript, Images, Blog's Traffic, RSS feeds etc.

By default almost all of the Blogger's templates start out with a nav-bar at the top of the screen, followed by a Header section showing your blogs title & description, or a custom header image. If you go into the layout option in Blogger where you can re-arrange the layout by drag-and-dropping items, you cannot add or drag any gadgets to above the header.

But you can allow for the addition of a Gadget above the header by editing your Blog's HTML code.

Adding a Gadget Above the Header in Blogger

Follow the below steps to add " Add a Gadget " icon above the header of your Blog :-

1. Log in to your Blogger account which will take you to your Blogger's Dashboard.

2. Select the Blog, in which you want to "add a Gadget" above the Header (if you have more than one Blog).

3. Select "Template", then click "Edit HTML" to Edit your blog's template.

4. By using Ctrl+F, search for the following code in your template’s code:-

<b:section class='header' id='header'

5. Now you will find the detailed fragment. The code will be like this --

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

6. In the above Code, change maxwidgets='1' to maxwidgets='5'.

7. Just next to maxwidgets - in showaddelement='no', change 'no' to 'yes'.

8. Now the Code will look like this, after changes -

<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

9. Save your changes and return to your Dashboard. Select "Layout". you will find a link titled "Add Gadget" Above your header.

10. Now you can add or drag-and-drop up to four gadgets to the Heading section of the blog, making a total of five.

If you want to add more gadgets, you can do it by changing the number for "maxwidgets" to your desired number.