How To Add Tabbed Navigation In Your Blog Sidebar
Many of you might have seen beautiful tabs in the sidebar of some blogs, which holds two to three sections in a single area, thereby saving a lot of space in your sidebar. This will also enhance the appearance of your blog, also helps the readers to have most thing in a single place, rather that scrolling up and down for to navigate through your site.
This really frees up some space for you to place some advertisements, in the space which was earlier occupied by some widgets. We will see in this post how to add a SIDEBAR TAB in your blog.
STEP 1 :Back-Up you existing Template. This is extremely important as you are going to play with the code and if something bad happens you can always revert back to your existing template.
If you don't know how to make a backup of your template follow these steps.
STEP 2 : Copy the below given code and paste it above the ]]> part in your existing code.
/*==================== SIDE TABBER =========================*/
/*==========================================================*/
#tabsidebar-wrapper{
width: 320px;
/* This will manage the width of the tab content. Usually this be smae as your sidebar*/
float: left;
margin: 0px 0px 15px 10px;
border: 1px none #E6F0F2;
}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {
border-bottom:2px solid #5B0;
margin-bottom: .3em;
padding: 0;
line-height:1.2em;
}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 0px;}
ul.tabbernav{
margin:0;
padding: 8px 0;
border-bottom: 1px solid #ccc;
}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a{
padding: 8px 0.5em 7px 0.5em;
margin-right:2px;
border: 1px solid #CCC;
background: #fff;
text-decoration: none;
}
ul.tabbernav li a:link { color:#00638d;}
ul.tabbernav li a:visited { color: #00638d;}
ul.tabbernav li a:hover{color:#45A100; background: #E6F0F2; border-color: #ccc;}
ul.tabbernav li.tabberactive a{
background-color: #E6F0F2;
color: #45A100;
border-bottom: 1px solid #E6F0F2;
}
ul.tabbernav li.tabberactive a:hover{
color: #369;
background: #E6F0F2;
border-bottom: 1px solid #E6F0F2;
}
.tabberlive .tabbertab {
background: #E6F0F2;
padding:5px;
border:1px solid #ccc;
border-top:0;
}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}
This is the CSS code that renders the appearence - colors, fonts and borders - for the tabs.
STEP 3 : Copy the below given code and paste it below the ]]> part in your existing code.
This is the Javascript file that contains the code which actually displays the contents you specify in tabs.
NOTE :If posssible plase download the javascript file HERE and host it with your preferred provider.
STEP 4 : Copy the below given code and paste it in the sidebar division in your code. In almost all the templates the sidebar division starts with this statement <div id='sidebar'>. Find for this piece of code in your template.
Copy the below given code and paste it below the <div id='sidebar'> statement.
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' preferred='yes' showaddelement='yes'>
<b:widget id='Feed1991' locked='false' title='Recent Posts Articles' type='Feed'/>
</b:section>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' preferred='yes' showaddelement='yes'>
<b:widget id='Feed2112' locked='false' title='Recent Comments' type='Feed'/>
</b:section>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' preferred='yes' showaddelement='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
</div>
</div>
Now that the Editing the template code is done, click on the SAVE TEMPLATE button. This button appears at the bottom-left corner of the HTML Editor box.
STEP 5 : Now we need to add some thing in the three tabs we just added, click on the Page Elements link which appears at the top of the page left to the Edit HTML link. The layout will of the blog will be shown to you.
Look out for the TABS in the sidebar section of your blog layout. They normally appear like as shown below.
NOTE : You might be wondering that you have added three widgets and its showing only one in the Layout >> Page Elements. Don't be panic. All the three widgets are there. Click on the numbers 1,2 or 3 above the widget in the tabs section to navigate between the widgets.
Now click on Edit link on the widget to edit the widget, add the feed URL for Recent Posts and recent Comments of your blog. The feeds URL will normally comes like this for Blogger blogs.
Recent Comments : http://YOURBLOGNAME.blogpost.com/feeds/comments/default
After making the changes in the widgets click on save and that's it. A new tabber tab with three tabs is added to the sidebar section of your blog. The tabber tabs as it appears in my blog looks like this.
There is another post about adding tabs in your sidebar by Amanda of BloggusBuster.com.
"Thank You!!! You’ve reached the end of this post. Seeing you made it this far, we hope you enjoyed this post. If so, please consider leaving a comment or subscribing to the feed to have further articles deliverd to your feed reader. You can also follow me on Twitter."-
Also can you tell how to add a colour hover effect on these tabs.
Thanks again.
Anonymous | Monday, November 10, 2008
-
Nicely described tutorial, but somehow the code only made 3 page elements bellow each other without a tab display. I didn't get the 1 2 3 numbering in thetemplate area either, any thoughts on what might have gone wrong?
-
This looks good, but I have two issues: 1) how do I change the font color? 2) can I remove the 3rd tab?
www.milehighbuzz.com
-
To change the font colors you need to make changes in the following pieces of code.
ul.tabbernav li a:link { color:#00638d;}
ul.tabbernav li a:visited { color: #00638d;}
ul.tabbernav li a:hover{color:#45A100; background: #E6F0F2; border-color: #ccc;}
ul.tabbernav li.tabberactive a{
background-color: #E6F0F2;
color: #45A100;
border-bottom: 1px solid #E6F0F2;
}
To remove the third tab delete the third division. In the code given above it is as given below
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' preferred='yes' showaddelement='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
-
I may be missing something, but that appears to me to just change the color of the fonts on the tabs themselves, but not the body of the content. Am I missing something?
-
Well, I added it to http://www.milehighbuzz.com. I was still unable to edit the color of the text in the feed. Not sure why I wasn't able to figure this out. I instead, simply changed the background color. It still seems to load extremely slowly. any thoughts?
-
wat is feed URL??
-
How do I change the width of the tabs?
-
#tabsidebar-wrapper{
width: 320px;
/* This will manage the width of the tab content. Usually this be smae as your sidebar*/
float: left;
margin: 0px 0px 15px 10px;
border: 1px none #E6F0F2;
}
-
your tutorial it´s very conffusing
what it is ]]>????
-
I tried Amanda's with all the possible changes and nothing worked for me. I can never save because I always get one error or another. I tried your tutorial and I got the error: The new widget id "Feed1991" is invalid for type: Feed
Any ideas of what is wrong or what I could change it to?
-
Try changing the Feed1991 to some other ID, may be Feed5005?
-
Or else yous end me the blog layout code and I will look into it.
-
How can I have more than 3 tabs ... I'd like 4?
Thanks for this great post. Can you also tell us how to position it according to our needs like I want it to be in between adblock and and other ads. I tried to reposition it but it got messy.
Thanks in advance.