22 Using a "Tab View" widget to streamline content November 14, 2007 /

Highlighting your recent posts, comments and label feeds is a great way of ensuring readers will stay on your blog for a longer period of time. However, featuring too much content in your sidebar or above the main posts column can often make your blog appear cluttered.

A more streamlined method for presenting such content is to use a tabbed navigation widget, like this:

This widget was designed by Hoctro, and uses JSON calls to gather recent posts, recent comments and labels feeds from your blog. Once installed, readers can click on a tab and the relevant content will appear in the section beneath.

Hoctro's Tab View widget ensures that your readers can easily access other areas of interest in your blog: when the tab labels are clicked, the section beneath is updated with relevant lists of posts or comments so your readers can easily navigate to other areas of your blog. This widget is based on the Yahoo! TabView application, and uses Javascript to call the clickable titles of recent posts, comments and label feeds which are quickly loaded into the space beneath the tabs.

To install this widget in your own blog, head on over to Hoctro's Place where you will find full instructions and all the code required for the Tab View widget to work. There are no externally hosted files for this widget, as all of the code is provided for you to paste into your template.

At first glance, the array of code may seem confusing, so to make this easier to understand, I will outline the five steps for installation here:

How to install Hoctro's Tab View Widget

1. Back up your blog template by going to Template>Edit HTML and clicking on the "Download full template" link.
2. Install the latest version of Hoctro's Javascript core library: This is a large portion of code which you need to copy and paste just before the closing </head> tag in your blog's template.
3. Install the Yahoo! Tab View requirements: This portion of code can be found on the Tab View widget page, and should be pasted immediately after the Javascript core library, but before the closing </head> tag.
4. Install the Tab View widget code: Again, this portion of code can be found on the Tab View Widget page in Hoctro's blog. Paste this whole section of code between any two <b:section> and </b:section> tags in your template (for example, in the sidebar section). It is easiest to do this while the widget templates are not expanded, to make it easier for you to locate the correct area in which to paste the code.
5. Finally, you will need to change the title of the widget, the labels and the URL of your blog:
   • For the labels, ensure the labels match the exact label names of your own blog's labels. These are case sensitive, so ensure you use the same uppercase or lowercase labels as appear in your own blog.
   • For your blog's url, simply enter your blog URL without the "http://" part. For example: yourblog.blogspot.com or www.yourblog.com
   Then save your template and take a look at your new Tabs View widget!

You can easily move the position of the widget simply by moving it in the Layout section of your Blogger dashboard. I feel the optimum place for this widget is above the main posts section, or as an extra element in the header. I did experiment with this in a widened sidebar, but the space was simply not wide enough for the five tabs to be presented well (although this did still work as it was intended!).

While I have found Hoctro's Tab View to be a very useful widget, I would prefer to be able to customize such a widget with different content, such as "Popular Posts", Archives and "Featured Posts". Currently I am working on a modification of the original Yahoo! TabView application, which can be installed directly into an HTML/Javascript widget. Although this widget will require more customization to suit your individual blog and preferences, it will be much easier to modify after the initial installation. I hope to be able to post a full tutorial and installation guide for this by the weekend once I've perfected the style of the tabs.

I hope this post has been useful in explaining the use and benefits of the Tab View widget. Please feel free to leave your comments and suggestions below.