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.
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
- Back up your blog template by going to Template>Edit HTML and clicking on the "Download full template" link.
- 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.
- 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
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!).
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.