18 A tabbed navigation widget for your blog (version 1) Monday, November 26, 2007 /

To help you streamline the content of your blogs sidebar, I have developed a "tabbed navigation widget" which can include any content you would like to appear in your blog, such as recent posts, recent comments and much more besides.

This is based on Hoctro's original Tab View widget, though this version is much easier to install and allows you to completely customize the widget with your own content. This works by displaying different content within the widget depending on which tab is highlighted, so rather than have a long sidebar full of widgets, you can have them all in one smaller widget so readers will be able to find the information they need more easily.

You can see an example of this widget in action on the Red Web 2.0 demonstration blog. Read on for full instructions and an explanation of how this widget can be customized to suit your needs.

The tabbed navigation widget features tabs and a content window; when clicking on the tabs, different content is visible in the window beneath. My version is a much simplified version of Hoctro's original Tab View widget, and requires that you manually insert the content relative for each tab. This will then allow you to feature any content you wish to appear inside the content window, such as popular posts, an "about this blog" text or a feed of your recent posts/comments.

The basic installation of this widget is quite simple, so you can get this up and running within minutes. However, you must add your own content to this widget, as this version does not support recent posts, recent comments and labels by default. I will explain how to add this content later.

Basic instructions for installing the Tabbed Navigation widget

Here are the basic installation instructions for installing a tabbed navigation widget in your blog. This will get the widget up and running, so you will be able to customize the content afterwards:

1. First you should make a full backup of your blog template, just in case something goes wrong during the installation and you need to revert back to your original template. To make your template backup, go to Template>Edit HTML in your Blogger dashboard and click on the "Download full template" link near the top of the page.


2. Next, go to the Edit HTML section of your template and find the closing </head> tag. Just before this tag, paste the following lines of code:
   

   
   <link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>
   
   
   
   
   <link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/>
   
   
   
   <script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
   
   <script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/>
   
   
   
   <script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/>
   
   
   
   
   
   <style type='text/css'>
   
   
   .yui-content {
   padding:1em; /* pad content container */
   
   }
   
   
   .yui-navset .yui-content {
   
   border:1px solid #ccc;
   
   }
   
   .yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
   
   background-color:#fff;
   
   }
   
   
   .yui-navset .yui-nav li a {
   
   background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
   
   }
   
   .yui-navset .yui-nav li a em {
   
   background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
   
   padding:0.5em;
   
   }
   
   
   /* top oriented */
   
   
   .yui-navset-top .yui-nav { margin-bottom:-21px; } /* for overlap, based on content border-width */
   
   .yui-navset-top .yui-nav li a {
   
   border-bottom:1px solid #ccc;
   
   }
   
   
   .yui-navset-top .yui-nav .selected a { border-bottom:0; }
   
   .yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
   
   </style>
   

   
   This code features the CSS styling and javascript calls required to operate this widget correctly in your template. Once you have added this code, simply save your template.


3. Next, go to the Page Elements section of your dashboard (Template>Page Elements). Choose to add a new HTML/Javascript widget in your blog sidebar, and in this widget, paste the following section of code:
   

   <div id="demo" class="yui-navset">
   
   <ul class="yui-nav">
   
   <li><a href="#tab1"><em>Tab1</em></a></li>
   
   <li class="selected"><a href="#tab2"><em>Tab2</em></a></li>
   
   <li><a href="#tab3"><em>Tab3</em></a></li>
   
   </ul><br/>
   
   <div class="yui-content">
   
   
   
   <div id="tab1"><p>Tab One Content</p></div>
   
   <div id="tab2"><p>Tab Two Content</p></div>
   
   <div id="tab3"><p>Tab Three Content</p></div>
   
   </div>
   
   </div>
   
   <script>
   
   (function() {
   
   var tabView = new YAHOO.widget.TabView('demo');
   
   
   
   YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
   
   })();
   
   </script>

   
   Save your widget and take a look at your blog. The resulting widget should something like this:
   
   
   
   Now you will be able to customize the widget to suit your needs.

Adding content to the Tabbed Navigation widget

If you take a look at the code for the widget content above, you will notice that I have highlighted the text of the tabs in blue and the content which appears in the box below the tabs in red. This is help you understand how to customize this widget with your own titles and content.

Notice the relationship between the tab titles and their content, so when you click on "tab 1" for example, the related content for this tab will appear in the window below the tabs.

You can change the titles of the tabs and add whatever content you like to the widget, including Javascript code. Here are a few examples of content you could use in the widget, with examples for implementation:

• An About This Blog text:
  This is the easiest type of content to add. Simply replace the blue title (eg: Tab1) with an appropriate title, like this:
  

  <li><a href="#tab1"><em>Tab1</em></a></li> becomes <li><a href="#tab1"><em>About this blog</em></a></li>

  
  
  
  Then add your content in place of the "tab content" text, for example:
  

  <div id="tab1"><p>Tab One Content</p></div>
  
  
  
  becomes
  
  
  
  <div id="tab1"><p>This is a piece of text about your blog. You can write whatever you want here</p></div>



• Add a feed of your recent posts or comments
  
  This is a little more complicated as you cannot simply add a feed widget into the existing Tabbed navigation widget. Instead you could use the Blog Headlines widget from the tools section to create an independent blog feed widget which uses only javascript code to display recent posts or comments. In this case you would paste the javascript code in place of the content as demonstrated below:
  
  

  <div id="tab1"><p>Tab Two Content</p></div>
  
  
  becomes
  <div id="tab1"><p><script language="JavaScript" src="http://tools.bloggerbuster.com/headlines/feed2js.php?src=http%3A%2F%2Fwww.bloggerbuster.com%2Ffeeds%2Fposts%2Fdefault&num=3" type="text/javascript"></script>
  
  <noscript>
  <a href="http://tools.bloggerbuster.com/headlines/feed2js.php?src=http%3A%2F%2Fwww.bloggerbuster.com%2Ffeeds%2Fposts%2Fdefault&num=3&html=y">View RSS feed</a>
  </noscript>
  </p></div>

  
  If you like, you can even use the code above as long as you change the url to match that of your blog.


• Add a list of your labels/blogroll/favorite posts:
  
  
  You can manually add a list or links to your labels/blogroll/favorite posts by pasting the HTML code into the content section too. Simply paste the HTML code to display these links in the following format:
  

  <ul><li><a href="http://yourblog.blogspot.com/search/label/yourlabel/">Your Label/Link text</a></li></ul>

  
  Here is an example of what this code would look like when pasted into the content section for your tabbed navigation widget:
  

  <div id="tab3"><p>
  <ul>
  <li><a href="http://linkone.com">link one</a></li>
  <li><a href="http://linktwo.com">link two</a></li>
  <li><a href="http://linkthree.com">link three</a></li>
  </ul>
  </p></div>

Limitations of the Tabbed Navigation widget

It is very difficult to automatically display links to the archives or labels of your blog within this Tabbed Navigation widget. This is because the code used to display these items in regular Blogger widgets will only work if the widget type matches the content to be displayed (for example, Archives can only be displayed when the widget type is "archives"). So when using this widget, you would need to create manual links to your archives or labels in order to make them display inside your widget's content section.

However, I have been experimenting with this widget, and have discovered a way of displaying either the archives or labels within the widget. Unfortunately though, this means that the widget becomes more complicated to install, and is not so easily adjusted after the initial installation. If anyone does know of a method for displaying archives and labels which does not rely on the widget type, I would love to hear how this could be achieved!

In the next few days, I will post version two of the Tabbed Navigation widget which by default will feature a tab for the archives of your blog. As I mentioned, this will be a little more complicated to install, and any post-installation customizations would need to be made from within the Edit HTML section of your blog rather than within the layouts section.

I hope you have found this (rather long) tutorial useful and easy to understand. If you have any comments or questions, please feel free to leave these below.

Technorati Tags: tabbed | navigation | widget | sidebar | content | html