My Photo

Technical Architect with over 15 years experience in a wide range of technologies.

@TheCodeKing

rss feed

Blogger Hacks Part 2: Creating a navigation structure | Wednesday, February 09, 2011

Introduction

In Part 1 I showed how to create a static homepage. In this article I'll explain a way to gain more control over the navigation of your site. This is for users like myself who may want to get more out of Blogger than purely the journal functionality.

Update

This article has been updated to reflect the techniques I'm currently using on this site.

The Principle

OK so here's the basic principle, relax it's not rocket science.

With a static homepage in place users entering the site will be faced with a single post (rather than usual list of latest posts). If we then remove the Blog Archive gadget from the template, then we can remove the default blog based navigation. This leaves us with a clean slate to build our own navigation structure.

To remove the default navigation, login to the admin console and navigate to Design -> Page Elements. Locate the Archive gadget, click edit and then remove.

Simple Navigation

This is the technique I'm currently using to create the menus on the left-sidebar of my site. It's done by simply adding a Links gadget to the Blogger template, and then using the gadget to create links to the various posts as desired. You can add multiple gadgets to the template in order to create multiple menus.

With this technique it's a good idea to also disable the auto-archive function of Blogger. Do this by logging into the admin console and navigating to Settings -> Archiving. Set the Archive Frequency setting to "No Archive".

A further enhancement you may wish to implement is to disable the footer navigation via some custom CSS. This further restricts navigation in the site, and avoids the ugly list view.

Static Pages

A quick & easy way to create 2-tier navigation is to create a post (or static page) that simply contains links to other posts in your site. This can then be added to a menu as described above to create a second level navigation.

Personally I prefer not to use this technique as think the experience is a little clunky.

Label Navigation

This technique creates a similar experience to the Static Pages technique described above as is no longer used on my site. I've included it for reference, but don't recommend it.

To implement label based navigation use the Blogger designer to add a Labels gadget to your template. When creating posts you can then label them as desired to form the navigation structure.

Now by default the gadget will display each label with a post count, and provide a link to all posts with the corresponding label. To avoid this unwanted list view of posts you can implement a hack to create an interstitial navigation page. This is a more advanced set-up so you should only proceed if you are comfortable editing the Blogger template and understand CSS.

The following steps implement conditional CSS based on the view type, and is used to hide the post body content in the list view to form a list of formatted links.

To implement the behaviour login to the console and navigate to the template editor Design -> Edit HTML.

Backup your existing template before making changes.

Using the editor scroll down to the <head> tag, and insert the following code directly beneath this line. You may need to change the CSS to work with your particular template.

<style>
   <b:if cond='data:blog.pageType == "item"'>
  .post-footer, .post-body 
  { 
   display: inline;
  }
 <b:else />
  .post-footer, .post-body 
  { 
   display: none;
  }  
 </b:if>
</style>

Posts without labels do not appear in the categorized navigation menu, and therefore we can use these hidden pages as static pages which we link to from other posts.

Summary

The techniques described above vary greatly in complexity and can be used together or individually to customise the Blogger navigation. This can help change the look & feel from a standard blog site into a more conventional website structure. Hopefully the sample code included also gives you some ideas for how you can further customise the Blogger templates using the markup. See here for more info: http://code.blogger.com.


No comments:

Post a Comment