Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » Divide Your Blogger Header Into Two Parts

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Divide Your Blogger Header Into Two Parts

Divide Your Blogger Header Into Two Parts

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,523 views

This tutorial will show you how to divide the header of your Blogger blog into two parts, so you can add two gadgets or widgets to both areas and maximize precious header space by adding more functions to your site.

NOTE: This code works best with the Minima template, so if you’re using it with another template, you might have to do a trial-and-error test, or use a different code altogether.

  • Login to your Blogger admin dashboard.
  • Go to Design.
  • Go to Template.
  • Click on Edit HTML, then click on Proceed.
  • Using Ctrl+F, locate #header-wrapper to check your header’s default size (example: 660px):
#header-wrapper {
 width:660px;
 margin:0 auto 10px
 border:1px solid $bordercolor;
 }
  • Now that we’ve confirmed the header’s size, set the width of the main header section to 300px in the following code below:
#header  {
 float:left;
 width:300px;
 margin: 5px;
 border: 1px solid $bordercolor;
 text-align: center;
 color:$pagetitlecolor;
}

Notice that we indicated float:left; above the new width. This will relocate one half of the header to the left.

  • Let’s create the section for the right half, also at 300px width:
#header2 {
float:right;
width:300px;
}
  • Then place it under the #header class as such:
#header  {
 float:left;
 width:300px;
 margin: 5px;
 border: 1px solid $bordercolor;
 text-align: center;
 color:$pagetitlecolor;
}
#header2 {
float:right;
width:300px;
}

Lastly, locate the <div id=’header-wrapper’> tag and paste the following code below it. It should look like this:

<div id=’header-wrapper’>
 <b:section class=’header’ id=’header’ maxwidgets=’1’ showaddelement=’no’>
<b:widget id=’Header1’ locked=’true’ title=’my blog title (Header)’ type=’Header’/></b:section>
<b:section class=’header’ id=’header2’ maxwidgets=’1’ showaddelement=’yes’/>
<br style=’clear:both;’/>
 </div> <!-- end header-wrapper -->
  • Save the template.
  • Go to Design.
  • Go to Layout.
  • The new section on the right side of your header should be visible now.

You can try experimenting with different header widths to see what sizes suit your design and widget preferences best.

NOTE: As with any template changes, it is always recommended that you save a backup of your original template first.

 

Liked It ? Please Share

Comments

One Response | Post A Comment | Subscribe To Comments RSS Feed

  1. souno says:

    Thanks for this very easy Header Divide post.

    This is very easy method thus search on search engine and was find very complecated methods.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here