Back to Top

1 How to Add Widgets/ Gadgets, Codes Inside Blogger's Header

Have you ever noticed an AdSense unit or widget in a Blogger header? It is quite simple and much productive. Below image is an example of it. Instead of using full size custom header try to shortened it and utilize the remaining space for your additional gadget, social links or an advertising unit. In blogger's default templates there is no facility available to shrink or reduce the header and to adjust another widget inside, but surely it is possible with modifying codes.

Attractive website header quickly gains the visitor's attention and it is one of the best places to utilize with interesting widgets, notice, share and advertise bars.

This article will guide you to edit Blogger's top header to resize and add multiple widgets/gadgets or even buttons aside to it.

AdSense Unit in Blog's Header

Note: Always backup your full template before proceeding changes with the codes.

Changing Header Size

Go to Blogger > Dashboard > Templates > Edit HTML
1. Hit Ctrl+F (within code area) and search following code

/* Header
----------------------------------------------- */

2. Now Replace this code with below sets.

/* Header
----------------------------------------------- */
display: inline-block;
height: 40px;
width: 400px;
float: left;
.header-right {

Change float: left; float: right; to custom positions and height/width sizes as per your requirements.

3. Now find below code sets.

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

4. Replace with  below changed codes.

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>

5. Now find the following code sets.

    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>

6. Paste this code just above it.

<div style='clear:both;'/>

7. If you don't find codes from step 5 then find below code sets.

<b:include name='description'/>

8. Paste codes from step 6 just below it.

Save template.

Adding Gadget in the newly created Section

Go to Blogger > Dashboard > Edit HTML

Find below code sets

<div style='clear:both;'/>

Paste following code just above it.

<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>

Now find


Add this CSS code just above it.

.header-right {
Added bar near Header

Change the width 350px to something as per your requirements. Save the template. Go to Blogger Layout section and add the required code snippet, widget in the new bar near Header. Don't worry about its current position, it will be fitted adjacent to Header.

If you have any difficulty or it is not showing up, just ask us, we will certainly help you, Alternatively share with us if you like the article!
Related Posts Plugin for WordPress, Blogger...