How To Add Widget Widget/Gadget Inside Blog's Header?

Advertisements

How To Add Widget Widget/Gadget Inside Blog's Header?

• Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface it is Dashboard > Template)
• As always download a copy of your template before making any changes.
• Now find for below code in your template

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

• If you can't above code then find for below code :

#header

• Now replace above code with below piece code

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

• If you want to change height and width of the logo then edit the lines in blue from above code.
• To change position of the logo to right the change float: left; to float: right;

• Now find for below code in your template

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

Note - Above code will little different in your template as coding of each is differ.The best way to find above code is search for only half piece code i.e. till id='header'.

• And replace above code with below code

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

• Now "Preview" your template, you will find that the background color of Blogger's header is not visible or it's missing. To bring it back, you need to add some more snippets:

• Find the following code:

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

• If you can't find above code then only find for below piece of code in your template.

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

• And paste below code just below of above code

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

Now save your template.

Go to your Layout page you will watch "Add a Gadget" link inside your header.

Enjoy....