How to Add a Gadget beside Your Blog Header?

Adding a gadget inside or beside your blog header or title can helps you to reduce your page size a little. If your blog title or blog picture (header) is small, you can put a gadget just beside that; it can be anything which may suits or require the presence at top. The procedure of adding is very simple which can be done by two steps; one by resizing the header and second by adding extra gadget at that place. However you need to concentrate on the steps and need to re-size the gadget height and width by seeing through preview option before saving. 

• At first, open your blog’s dashboard page; then click on ‘Design’ and then on ‘Edit HTML’ option; (better back up your template before changing) 
• Click on the tick mark symbol to expand the widget template box;
• Now search the below mentioned code with using Ctrl + F option

/* Header

----------------------------------------------- */

And, paste this code just below the above code:
 

.header-left{
display: inline-block;
height: 35px;
width: 350px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

# You can change the header size by changing the height and width pixels mentioned in the code and change the alignment of header by changing the float options.  

• Now find this code:

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

And paste below code instead of this.

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

• Now paste this code:  <div style='clear:both;'/>  just above the below written code:

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

Or else, just below this code: 

      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
</b:widget>
</b:section>

• Now save the template to complete the process of resizing the template

• To add an extra gadget beside your blog header, search this code <div style='clear:both;'/> and paste the below mentioned code just above it:

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

Find the code: ]]></b:skin> and paste the below mentioned code just above it;
.header-right {
display:inline-block;
float:right;
width:400px;
}
 

# Change the width of your new header (as per its size) by changing the value of red marked value

• Save the template and go to ‘Layout’ option to set the new gadgets appropriately beside your blog header

You’ll see your header has been re-sized and an extra space for gadget (Add a Gadget) just beside your blog header.

You can create a new gadget there or put your existing gadgets by just dragging with your mouse to there. 

Now save and see your new page style. Change the size and alignment by opening the ‘Edit HTML’ page and editing the above mentioned code values.