The easy way to make a great blog header!

In yesterday's post, I wrote about what makes a great blog header. As I'm sure many of you will agree, a great blog header doesn't only include your blog's title and logo. Visitors need to know what your blog is about (branding) and how easily they will be able to find the information they need (navigation, and possibly search elements).

So in this installment of the blogger template design series, I'm going to show you a quick and easy way for you to add more than just your header image to your Blogger blog: adding extra sections for widgets, in which you can place anything you want!

If you take a look at the Blogger Template Design blog now, you'll see the bare bones of a header beginning to take shape. The title and description for this blog are now featured in the left-hand section, while on the right you can find a search box, and a simple navigation bar:

The search box and navigation links are actually widgets which can be edited through the layouts section, rather than being built into the template itself. This is by far the easiest way to change elements of the header section, and it's really easy to install this in your own blog template!

How to add more elements to your header section

In this tutorial, there are only three essential steps needed to add these extra elements to your own blog:

1. Copy and paste a section of code in the header section of the template.
2. Add some styling code to the CSS portion of the template
And finally...

3. Add some widgets to your newly created widget sections!

Trust me when I tell you that this is a really easy hack. You can be up and running with a new, more interactive header in no time at all, and once the basic structure is in place, you can begin styling each section to best suit your needs.

Step by step instructions

1. Go to Template>Edit HTML in your Blogger dashboard, and find this section of code:

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Your blog title will appear here (Header)' type='Header'/>
   </b:section>
   </div>

   Highlight this entire section of code, and replace it with this instead:
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Blogger template Design Series (Header)' type='Header'/>
   </b:section>
   <div id='header-right'>
   <b:section class='header' id='header-right-top' showaddelement='yes'>
   </b:section>
   </div>
   <div id='header-right-bottom'>
   <b:section class='header' id='header-right-bottom-section' showaddelement='yes'>
   </b:section>
   </div>
   </div>
2. Next we need to change some of the style in the <b:skin> section. So find this entire section of code:

   #header-wrapper {
   border: 1px solid #000000;
   margin:0 auto 10px;
   border:1px solid $bordercolor;
   clear: both;
   word-wrap: break-word;
   overflow: hidden;
   }
   
   #header-inner {
   background-position: center;
   margin-left: auto;
   margin-right: auto;
   }
   
   #header {
   margin: 5px;
   border: 1px solid $bordercolor;
   text-align: center;
   color:$pagetitlecolor;
   }

   Note: the code which appears in your own template may have slightly different styling attributes to the example above. The important thing here is to replace the #header-wrapper, #header-inner and #header sections, and add some extra styling code.
   
   Once you have found this section, highlight it and replace it with the following section of code:
   #header-wrapper {
   width: 950px;
   border: 1px solid #000000;
   margin:0 auto 10px;
   border:1px solid $bordercolor;
   clear: both;
   word-wrap: break-word;
   overflow: hidden;
   }
   
   #header-inner {
   background-position: center;
   margin-left: auto;
   margin-right: auto;
   }
   
   #header {
   width: 500px;
   float: left;
   margin: 5px;
   border: 1px solid $bordercolor;
   text-align: center;
   color:$pagetitlecolor;
   }
   
   #header-right {
   width: 400px;
   float: right;
   border: 1px solid $bordercolor;
   color: $pagetitlecolor;
   margin: 5px;
   }
   #header-right-top {
   padding: 0 5px 10px;
   }
   
   #header-right-bottom-section {
   padding: 0 5px 10px;
   }
   
   #header-right ul {
   margin: 0;
   padding: 5px;
   }
   
   #header-right ul li {
   display: inline;
   padding: 5px;
   }
   
   #header-right-bottom {
   width: 400px;
   float: right;
   border: 1px solid $bordercolor;
   color: $pagetitlecolor;
   margin: 5px;
   }
   
   #header-right-bottom ul {
   margin: 0;
   padding: 5px;
   }
   
   #header-right-bottom ul li {
   display: inline;
   padding: 5px;
   }
   
   Note: if your own blog template is narrower than 950px, you may want to make some alterations to the styling code above. Change the width of the #header-wrapper to match the width of your outer-wrapper, so that it will not disrupt the overall width of your blog. You may also want to lessen the widths of the #header section, and the #header-right and #header-right-bottom sections too.
   
   If you preview your template you will see that the title and description are now aligned to the left, with space on the right for you to add your new widgets. So save your template, and let's add some widgets to these new sections!
3. Adding widgets to these new sections is the easiest part of this tutorial. Simply go to Template>Page Elements and add your widgets in the new sections which have appeared beside your header!
   
   Both of these sections now have styling for list items, so if you want to add a navigation bar, choose to add a "Links List" page element. Add your links as required and save. When you preview your template, you'll see that this display inline (horizontally) rather than in a long list.
   
   To add a search box to your header, you could either choose to add a Google Custom search widget, or use a simple blog search widget instead.

Width these extra widget sections in place, there are endless possibilities for what you may add to your header section! I used a search box and navigation links as an example, but you could easily substitute these for a description, feed links or anything else you choose instead.

Your blog logo/custom header image

As before, you can still add your custom logo or header image to the header widget. This will be resized to the new width of your header section (in the example above, this is 500px wide), so for best results you should upload an image of the same size.

If your image is wider than this, you should check the "Shrink to fit" box inside the widget editing box to ensure the header doesn't overshadow the other widgets on the page.

Coming soon...

The next two installments of the Blogger Template Design series will focus on styling your new header elements:

• Creating a more interesting search box
• Adding style and icons to the navigation links

If you'd like to see the progress of this series to date, you could check out the demonstration blog to see the what we have accomplished, along with links to all previous tutorials in this series.

To keep up to date with this series, be sure to subscribe to the feed or sign up for email updates!

As always, your comments and opinions are much appreciated. I'd love to know what you think of this series so far!