How to Split Blog Header in New Template

To split blog header in new blogger template it is required to edit few HTML code in blog. To split blog header in new blogger template you must  follow the steps.

             So what should I do

1. Login to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Make sure the Expand Widget Templates checkbox is TICKED.
5. In that template code, use "CTRL+F" to find

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

    Then, right under it, copy and paste the code below:

        

7. In that template code Once again, use "CTRL+F" to find 

                                        ]]>

                           

8. cope and paste the following CSS right on top the above code

#header, body#layout #header {width:60%;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;}

9. Save the Template.
10. Now go back to Design > Page Elements.   
11. Click the new 'Add a Gadget' link from right of the blog header and add your widget.
12. Save and view your blog.

Divided Blog Header in New Blogger Template

Note: If the added widget shows up under the blog title instead of on the same level, on it’s right, go back to the CSS code in step 8.

Change header width from line 1 and header-right width from line 2. Test  different values until you get optimal split result in blog header.

Sources digitalpoint