Gadgets Inside Header

You can add a Gadgets inside your header rather it be search box or ads. Pretty much what ever you want you can place inside your header.

1. Go to Dashboard > Design > Edit HTML.
2. Find This code below.


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/>
</b:section>


3. Insert the following code just below that.


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


4. Should look something like this after your done.


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tweak My  Blogger (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>


Now we should have 2 sections to the Gadget sections in the header. But you will have to position it correctly.

5. Now you will want to locate the following code.


]]></b:skin>


6. Add the following code just above it.
(Older Templates)

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


(Newer Templates)

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

If you are using a newer template you will need to locate this code below.

]]> </b:template-skin>

Just above that code place this code below.

#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}

7. Now apply this to your blog and go to the Page Elements. In the Page Elements you should see the widgets area now available. Place a Gadget in there.

8. Now you might have to go back to the code in section 6 and change the width around in the first 2 lines. Play around with it untill you get it to your liking. You can just click preview after you changed it to see what it looks like. As for the orange padding you will need to adjust this to move the gadget around on the blog. You can view our section on padding and margin if you do not understand the values.