How to Add Ad, Search Box or Widget Beside the Header

1.Go to Blogger Dashboard the Click Template the HTML and look for the following code below

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

2.Add the following code below right after the code above

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Your final code will look like this:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR OWN HEADER TITLE/IMAGE' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

3.Copy the code below and paste it above this code ]]></b:skin>

#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

(Parties in red can be used to adjust the size of your widget and that in blue to adjust your header)

4.Save your Template

5.Then go to the blogger dashboard then lay-out you will see new widget place added beside or below your header. So you can add whatever you want and will appear beside your header

6. Done

SHARE THIS