How to align your gadget to your

header in Blogger step by step

www.freelancelifehack.com

Go to Template

www.freelancelifehack.com

Click Edit HTML

www.freelancelifehack.com

Your window will look like this

www.freelancelifehack.com

Click inside

www.freelancelifehack.com

CTRL + F

www.freelancelifehack.com

Click inside the search box

www.freelancelifehack.com

Type inside

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

maxwidgets=
Or
<b:section class='header'

www.freelancelifehack.com

Press ENTER

www.freelancelifehack.com

Search result highlighted

www.freelancelifehack.com

Replace class=header

www.freelancelifehack.com

To class=header-left

www.freelancelifehack.com

Create space under </b:section>

www.freelancelifehack.com

Press ENTER

www.freelancelifehack.com

Paste this code

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

www.freelancelifehack.com

CTRL + V

www.freelancelifehack.com

Paste this code

<b:section class='header-right crosscol' id='header-right'

maxwidgets='1' showaddelement='yes'/>

www.freelancelifehack.com

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

www.freelancelifehack.com

CTRL + F for search bar

www.freelancelifehack.com

Search </head>

www.freelancelifehack.com

Press ENTER

www.freelancelifehack.com

Scroll up

www.freelancelifehack.com

Above </html> create a space

www.freelancelifehack.com

Paste this code

<style>
.header-left{
display: inline-block;
float: left;
}
#header-right {
display:inline-block;
float:right;
}
</style>
www.freelancelifehack.com

CTRL + V

www.freelancelifehack.com

To move widget to right

www.freelancelifehack.com

Add this code

www.freelancelifehack.com

Click Save Template

www.freelancelifehack.com

Try to add gadget into your

header

www.freelancelifehack.com

Search box gadget align with the

header

www.freelancelifehack.com