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:
- 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.
- 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'/>
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.
<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> - 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">
Save your widget and take a look at your blog. The resulting widget should something like this:
<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>
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>
If you like, you can even use the code above as long as you change the url to match that of your blog.
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> - 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
Save as PDF
My name is Amanda Fazani and I write Blogger Buster to help other Blogger users make the most of their Blogger blogs.
Post a Comment 63 Comments:
nice!!!
I was curious in how to install an widget like this on my blog!!
now I have one :)
one thing I wanted to add was the "comments fed", but after copying your code, and changing the link, still noting appearing on it :(
you can see how it is on my portuguese blog :)
Hello Amanda
I wanted to know How I can get the read more link on my blog because my articles are very long and so I can place only 2 post on my homepage but I want to increase that number and for that I want to place a read more link like you have in your blog after every post. Please mail me on my email ashik.ratnani@gmail.com
For Dav7:
You could try using this script instead:
<script language="JavaScript" src="http://tools.bloggerbuster.com/headlines/feed2js.php?src=http%3A%2F%2Fganha-facil.blogspot.com%2Ffeeds%2Fcomments%2Fdefault&num=5&desc=200>1" type="text/javascript"></script>
<noscript>
<a href="http://tools.bloggerbuster.com/headlines/feed2js.php?src=http%3A%2F%2Fganha-facil.blogspot.com%2Ffeeds%2Fcomments%2Fdefault&num=5&desc=200>1&html=y">View RSS feed</a>
This references your correct URL for your comments and should work just fine when pasted into the widget :)
Hello Ashik,
I use Ramani's "selective expandable posts" hack in all of my blogs which you can read about here:
http://www.bloggerbuster.com/2007/06/use-selective-post-summaries-in-new.html
I hope this will be useful to you :)
amanda, looks like that script doesn't work with portuguese righting :(
as you can see on mine now
Hello Amanda,
Thats a nice sharing by you.This will surely improve my blogs look as well as serve the best for their purpose.
Also i liked that you gave the credit to the original post creater.
Thanks for sharing.
Over from : bruxism
Hi Amanda,
Thanks for publishing this useful post. I have wanted to test it, and or course link to your site, but then read:
=====================
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:
======================
I was expecting to add tabs to the top of the page, probably below the blog description. However your mention of "blog sidebar makes me wonder if I should spend my time to test it because that is not where I want the tabs to be in - in the sidebar.
Looking forward to clarification.
Peter Blog*Star
Testing Blogger Beta (now New Blogger)
Amanda,
This site is great, by far one of the easiest to understand and navigate. Thanks for this post. Do you have any idea (or is it even possible) to have a tab where the posts show up not below the tabs but actually, in one of the tabs?
I guess kind of like how you have your site set up is what I was referring to in my previous statement. is this possible on blogger?
For Teeth Grinding: Thank you for stopping by! I do always try to give credit to the original source of information, as bloggers who put their hard earned time into publishing their efforts do always deserve recognition!
For Peter: In this tutorial, I explained about putting the widget in the sidebar as not all bloggers have customized their templates to be able to add a widget above the main posts column.
You could just as easily place this widget anywhere that you could add a new page element, even in the footer if you prefer! I hope this helps clear things up for you :)
For T. Michael W. Halcomb:
Although this is not the method I use in this blog (there are actually two blogs and a PHP based website included in this package!), I believe this could be possible by using a feed widget inside the content for one of the tabs.
I haven't actually tried this yet as I'm so busy lately with the design series and other projects, but if you're willing to experiment, you could try creating a feed widget at http://tools.bloggerbuster.com/headlines
to see how this may work for you.
Hope this helps!
See that you are busy, hopefully you are going to receive these 2 comments well. Viewing this page with IE6 plus Norton Fraud monitoring on:
Warnings (many):
Problem with this page might prevent it from being displayed properly or functioning properly. In the future, you can display this message by double-clicking the warning icon in tge status bar.
Line: 536
char: 1
Error: Object expected
Code: 0
URL: (This page: not included to avoid long unbroken line)
Line: 537
char: 1
Error: Object expected
Code: 0
URL:
Line: 614
char: 1
Error: Object expected
Code: 0
URL:
Line: 653
char: 1
Error: Object expected
Code: 0
URL:
Line: 692
char: 1
Error: Object expected
Code: 0
URL:
Line: 731
char: 1
Error: Object expected
Code: 0
URL:
Line: 770
char: 1
Error: Object expected
Code: 0
URL:
Line: 810
char: 1
Error: Object expected
Code: 0
URL:
Line: 849
char: 1
Error: Object expected
Code: 0
URL:
Line: 888
char: 1
Error: Object expected
Code: 0
URL:
Line: 927
char: 1
Error: Object expected
Code: 0
URL:
Line: 966
char: 1
Error: Object expected
Code: 0
URL:
Norton Fraud Warning:
Security Information
This page contains both secure and nonsecure item.
Do you want to display the nonsecure items?
[Yes] [No] [More Info]
Clicking on [More Info] displayed a message about page using security protocaol sucth as SSL or PCT to secure the information you sent and receive
Amanda,
How did you get SdSense to display in the middle of the post? Do you have another post on that?
Hello Schooljuffrouw,
Thanks for pointing out those errors. I'll try to look into this, though I know that Blogger templates (even the default ones) are not valid XML according to W3C standards, and never can be merely by their nature. This often means the warning icon shows up in Internet explorer, but so long as content displays correctly (and no unwanted content is otherwise inserted without my knowledge!), I don't get too concerned about it.
I did write a post about AdSense in post pages, which you can read here.
There is the option to include AdSense in the layouts section of your dashboard, which would include ads above or beneath your posts, but this doesn't display in non-default Blogger templates.
Hope this helps!
Best wishes, and thanks for stopping by :)
Amanda,
with a little bit of tinkering, I created a nice, clean-looking site (unlike any blog I've yet to see). If you have a minute, check it out and let me know what you think. Thanks for helping me go in the right direction, though.
www.michaelhalcomb.blogspot.com
Hey Amanda,
Just me. Um I was wondering how this would work on a classic css blog?
Where would I put the codes?
Not biggie,
p.s hope you get back to me on the template commenting!
Thank you for everything.
Ashley
Amanda,
Thank you so much for your wonderful site. I am wondering if I can add more tabs to this widget? Thanks for the help!
Leslie
Amanda thanks for this. I've got the tabbed widget installed and displaying some useful content.
There is an issue, I'm sure someone else must have seen it?
When I first installed the widget and viewed the page I noticed the tabs did not size properly to fit the text, in fact (in Firefox) the text began before the tab and extended beyond the tab. I messed with the margins and fixed that. Also, the tabs were too far "down" and overlapped the content box. Fixed that as well.
However, now when I view the page in Safari the text is not lined up properly.
In IE its worse, the tabs are floating above the content box and for some reason are shifted to the left.
Is there a way to deal with this? I can't be the only person seeing this issue?
I have just installed this tab feature on my blog http://simpletaxindia.blogspot.com/
and found it very useful .regarding blog archive my suggestion to use buzz boost code from feed burner feed or other like service to give latest post list auto matically
Hi Amanda, wonderful widget, it is working beautifully! Thank you, thank you! I am now wondering if you can tell me how I can move my blog posts into one of the tabs? Thanks again for your help.
I use this for my recent comments
http://lvchen716.googlepages.com/rc20_eng
I hope you like it.
Amanda - thanks for this MUCH simpler version of Horcto's widget!! However, I am having the same issues that tandaina described (4 comments before me, May 7). Were you able to find a solution? I'm guessing (like tandaina is), that we are not the only ones with this issue. Also, I tried using Horcto's before finding your version, and the same problem existed in his. I'd really appreciate any help or suggestions you could give!
I made a little sidebar accordion widget I thought some of your readers might be interested in:
http://blog.benfinnigan.com/2008/06/interesting-sidebar-widget.html
Installed this widget as I absolutely love it, the only problem I am having now is the Words Tab1, etc do not line up with the boxes. I was looking through the html and the page element, though I did not see an easy fix for it.
Any suggestions?
Hi Amanda,
I have found your site invaluable in developing my blogs, and liked the idea of this widget to save space and add some more interest to my blog. However I am having the same isse as the posters above with the text not lining up. Also, I can't seem to alter the border colour of the actual tabs, only the content box. Any tips? Thanks!
Hi! How can I add archive and Label tab? Plz help.
Thank U very much, I'm going to try this step..
I got a problem. I followed the steps u said, but doesn't show up Non-English language. Isn't it unicode supported?
thanks Amanda..I've tried your step and done...You can see in my blog http://jovieblog.blogspot.com
see u
Installed this widget as I absolutely love it, the only problem I am having now is the Words Tab1, etc do not line up with the boxes. I was looking through the html and the page element, though I did not see an easy fix for it.
Any suggestions?
excellent widget:
I just implemented in my blog:
Ebooks Catalog
Hi Amanda,
Installed this widget as I absolutely love it. I've tried your step and done. Thank you very much.
Goji Berries | GoChi
could you alter the size of the boxes? where could it be located? thanks in advance!
whoops, never mind my last comment. size is relative to where you put it.
Great tutorial. I'm having trouble importing rss feeds. I tried to copy the code you had for your blog but I'm not sure exactly what to replace with what.
Fore example, if you look at my blog now, I want the rss feed of my facebook status on the status tab.
http://recoveringprocrastinator.blogspot.com/
Ok, now I tried adding a second set of tabs. There is a gap between the tabs and the content. And the content for all three tabs shows up on all three, rather than one on each. Please help!!
Your site is perfectly. Great work, I liked. Always, there is many interesting. I'll come to you once again.
forex market, recommend for you:
current foreign exchange rates, forex trading system
How do I install 2 of the tabbed menus on my blog?
I don't understand how to add my RSS posts feed/comments to the tabs :-/ Can you help me?
thanx for this post
blogger-godown.blogspot.com
Nice widget.. this is what I really need for my blog.
botsnhacks.blogspot.com
Thanks amanda.. you demonstrate very nicely! It's easy to install and working.
But few error to fix. Take a look and fix it.
Thanks again.
Awesome post. I can always appreciate a well thought-out, informative, and detailed article... and yours is no exception!
Florida plumber
Hello Amanda,,
Thanks for great tutorial,,,
I have question for you my friends,,,
How to install Tabview with "categories" and Archive" like yours.
Please give me a solution..
I hope you can understand that i means,,sory for my english.
Regards
Rihannafans
Hi, Amanda,
Your site is one of the best. I`ve been looking for this feature for ages. And now that I have found it, I`am quite happy.
I have one little problem with it, though. Just like quite a few posters above me, my tabs do not display well in Firefox. Everything is perfect on Internet Explorer. I was wondering if you have a fix for this..
Regards,
Kwame
thats a great widget! but can this widget use for my blogroll how it can be?
please give ur tips
Hi Amanda,
I am new to blogging and just setting up my first one. I am finding all this information very informative and am looking forward to trying it out hopefully this week.
I will let you know how it goes!
Thanks!
Brian
How we can change the body color?
Thanks for the detailed tutorial!
document drying
Thanks for the awesome tutorial!
woh ! so many comments, already for this useful post..so i will come directly on topic..this is an good widget but can u plz help me in making it a look cool like changin background or making that rectangular shaped tab in oval or some other shape or in simple word i just want it to look like your recent comment/category widget.. i hope one day u will read this and kindly help me..
www.gamesbug.blogspot.com
Thank u so much amanda, this is the one that i have been looking for. thank u so fukin much.. i love u. u save me.. :)
Thanks for nice sharing. Really its very help full me. again thanks
How can i change the background where the contents are shown????
Ah this is exactly what I'm looking for to put in one of my blogs. Thanks for making it so detailed. I got a bit lost towards the end but I managed alright..I think. Well at least it seems to look fine. ;)
Teeth Grinding Treatment
Alright, this is my project for tomorrow. I'm curious to see how this comes out :P Thanks so much for this. The less complicated the better.
very wonderfull widget but how i can custumize for my backlink / blogroll
Hey, I'm just curious as to how I would go about altering the background color of the content. I managed to change the color of the tab titles but can't figure out how to change the content color. It's really the only thing holding be back from officially using it on my blog. Once again, thanks for the post! :)
it's very cool sis.. nice codes.. :)
A bit complex,requres extra time.I knew a very simple method.More on www.techieway.blogspot.com
I try this script to my site and successful. Thanks for Nice Sharing.
hello, nice post for people like me. thanks for the guide