Responsive | Split Your Blogger Header In Two Sections

For many blogger templates, it's more important to add a new section right next to the header. Such a widget section is used for advertisements or for menus or for other important reasons.

Here, I'll present a different way to split the blogger's Header section. Because when I tried to split my Blogger Header in Two section, I tried to see many such tutorials. But maybe because of the variation of my template or because of many other reasons, I have faced many complications.

However, let's introduce you a way to successfully split your blogger header in two section without being too complicated.

STEP 01: As you know, for the change of Blogger template, go to Blogger Dashboard > Theme > Edit Html

STEP 02: Then, click anywhere on template code and press Ctrl + F and find out the given code below by searching "Header1" text.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>

<-------------------- place the following code here
</b:section>

STEP 03: Now just change your b:section class and div tag with  'headerleft'
STEP 04: Then just paste code just above that b:section  'headerleft' line.

</div><div class='headerright'>
<b:section class='headerright nav-menu' id='headerright' maxwidgets='5' name='Ads of Karukaj' preferred='yes' showaddelement='yes'>
<b:widget id='Text81' locked='false' title='New Widget' type='Text' version='1'><b:widget-settings>
<b:widget-setting name='content'><![CDATA[<a href="https://goo.gl/9DcKz1" target="_blank"><img alt="Web Blog" border="0" height="60" src="https://goo.gl/sTHcJi" width="468" / /></a>]]></b:widget-setting></b:widget-settings>
<b:includable id='main'><!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'><data:content/></div>
<b:include name='quickedit'/></b:includable>
</b:widget>
</b:section>
</div><div style='clear: both;'/>

STEP 05: Paste this CSS Code just before ]]></skin>

/* ######## Header Css ######### */
#header-wrappers {padding: 75px 0px 5px 0px; height:80px; z-index:-3 !important;}
.headerleft {float: left; margin: 0; padding: 0; max-width: 400px;}
.headerright { float: right; margin: 0; padding:0; max-width: 700px;}
/* ##### Responsive Css ####### */
@media only screen and (max-width: 1130px) {
#header-wrappers {height: 100%;}
.headerright, .headerleft {float: none;width: 100%;text-align: center;
height: auto;margin: 0 auto;clear: both;}
.headerleft img {margin: auto;padding-bottom: 5px;}
.headerright {margin: 10px auto 0;}}
@media screen and (max-width: 880px) {
#header-wrapper {margin-bottom: 4px;}}
@media only screen and (max-width: 360px) {
.Header .description p{display:none}}

STEP 06 (optional): and then paste this code just before ]]></b:template-skin>

body#layout #header-wrappers { height: auto; padding: 0;}
body#layout .headerleft { float: left; width: 30%; max-height: none; margin: 0; padding: 0;}
body#layout #headerleft { background-color: #E97C81 !important;}
body#layout .headerleft .widget-content { border-color: #8a52a1;}
body#layout #headerright { background-color: #FFDFAE !important;  }
body#layout .headerright { float: right; width: 60%; margin: 0;}

STEP 07: Now save the template and now notice the change of your layout and blogger blog.

 Split Your Blogger Header Into Three Sections

Hopefully, you've successfully completed, if you have any problem, you can write in the comment box, I'd be glad to help. Happy Blogging.