Utilizing the unused part of header by splitting Header Section at Blogger.

Do you want to use that unused header so that you can install widget just side to to Header.Then here is the tutorial.In this tutorial we will split Header section to two part first for header and second for adding widget.There will be not effect on your header.Just it will affect your header section.This method works perfectly if you are using layout Template.For doing so follow this steps.

Adding Widget Container.

1. At first we should add the widget container in Header.For that follow this.
2. Go to Blogger Dashboard>Template>Edit HTML
3. Back up your Blog.
4. Do not Tick on Expand Widget.
5. Find these Codes.

   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='HeaderName' type='Header'/>
   </b:section>

6. Add this below codes just under it.

   <b:section class="secondheader" id="secondheader" showaddelement='yes'/>
   <div style="clear:both"/>

7. After Adding click on Save Template.Now in another tab you must be seeing a additional container below header.Go to add CSS for make side of Header

Adding CSS codes.

CSS is Heart of HTML.To make side follow this

1. Just add these below CSS to make Secondheader side of previous original header.

2. #header, body#layout #header {
   float:left;
   width:40%!important;
   display:inline-block;
   }
   
   #secondheader, body#layout #secondheader {
   float:right;
   width:40%;
   display:inline-block;
   float:right;
   padding:5px;
   }
   
   .secondheader {
   /*Add more CSS by replacing this lines*/
   margin:0px;
   padding:0px;
   }
   

3. If you don’t know how to add CSS then refer to here.
4. Where,
   • Change width that suits your Template.If it doesn't suits Second header may not go to side of original header.For that find the width of orginal header using measure it(Click here to learn how to use measure it).Replace line 3 width:40% with width is pixel that you got using measure it.And again replace line 9 width with the width of second header.
   • Change margin and padding that suits your taste.Remember it affect the layout of header section.
5. After adding CSS go to layout there you can see header and widget container like this.
   

Enjoy installing widget by using unused space of Header.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.