Bismillah, Alhamdulillah

Skip to Content

Easiest Way to Make Tabbed Sidebar for Blogger

October 10th, 2009

Bismillah, Alhamdulillah. After long time this trick I release, I have this idea when Webitect made tutorial for Tabbed Sidebar.
Until yesterday I didn’t make tutorial yet, because I’m busy and difficult for me to make good tutorial for this trick special for blogger.
I modified this trick special for Bloggertuts after that Dantearaujo made tutorial and CSS Style for this TAB and put it in bloggertuts.
Alhamdulillah he made great tutorial for this Trick, everyone will understand easily. You can read here

Actually between this Trick and Webitect is completely different I only got inspiration from that. Because they made for general website.

If you search from Google you will found many way to make Tabbed Sidebar but Difficult to implement in blogger, because we have to modify HTML or XML in Sidebar Part. This Trick is very easy only put CSS and JS. The JS will automatic make structure for Tabbed and we don’t have to modify in Sidebar Part.
So this trick will not mess up you html and disturb your sidebar. After put js You can change position or content of sidebar, it was very easy.

Here are some features of my method:

  • Easy to install.
  • No need edit html in Sidebar part.
  • Automatically place your handpicked widgets inside tabs.
  • Freedom to set what widgets stay out of the tabs.
  • After implementing, Widgets are normally edited from Page Elements section.

The Final Result

If you want to see it working please check the live demo.

Step 1 – Placing the styles on your CSS

The style of the tabs can be easily changed anytime just using CSS, but this is not the main reason for this tutorial, It’s up to you to change or not, use your own CSS skills. We’ve made a general layout for it, to install it just place the following code right before the ]]></b:skin> line:

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}

.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}

.widget-tab  ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab  ul li:last-child {
border-bottom:none;
}
.widget-tab  ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab  ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content  ul li a:hover {
color:#a59c83;
}
.tab-content  ul li a:hover small {
color:#baae8e;
}

.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;        

}

ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

Step 2 – Installing jQuery Library

This script needs the jQuery JavaScript library, if you already have it installed, you can skip this step, if you don’t just paste the code below right before your </head> line:

<!-- jQuery Call -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<!-- End of jQuery Call -->

Step 3 – Installing the Script

Ok now that you’ve made sure that you have jQuery installed, you need to install the script that will do all the magic for us, just place the following code right before your </head> line:

<script type="text/javascript"> 
var starttab=0; 
var endtab=2; 
var sidebarname="sidebar1"; 
</script> 
<script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js"></script> 

Customizing

As you have noted you’ll get a few lines that can be customized, those are:

var starttab=0;
var endtab=2;
var sidebarname="sidebar";

Very quickly: starttab is the starting number for your chosen widgets, it starts counting from 0. endtab is the number for your last included widget. sidebarname is your sidebar’s id, it is generally just “sidebar”, but just in case you have a different id, we’ll help you finding the right one to place here.

How to find your sidebar’s ID

Ok if you have installed the script and it is not working, you may have a different sidebar ID that is not only “sidebar”, use the following methods to find he right id of your sidebar.

Method 1 – Getting from the HTML

This one may be the fastest one, if you use Minima template, or any template derived from it, just go to Layout > Edit HTML > Search for “sidebar-wrapper” and you may get something like this:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

Just take a closer look and you will find it id=’sidebar’.

Method 2 – Using Firebug

Firebug is the most wonderful Firefox extension for web developers, If you dont have it, just download it from here.

image

Method 3 – Using Web developer Firefox Plugin

This is another great extension, if you don’t have it, get it here.

image

Ok now that you have installed the script on your blog, you should be able to normally edit your widgets on your page elements section.

What are the Gadget Numbers

Here is a simple explanation for those who haven’t understand the numbers yet. Let’s say that you want make tabs out of your first 3 widgets, so your starting number will be 0 and your finishing number will be 2:

var starttab=0;
var endtab=2;
var sidebarname="sidebar";

Check images below for better understanding:

image

image

In this case, Widget 3 and 4 will not get any tabs, because your finishing number was 2. Very easy huh?

Advices

  • This script works for only one sidebar per blog.
  • We have included a general styles for your tabs, however, you can use your CSS skills to customize them, but be aware that CSS related errors will not be supported here, make sure you do the right thing.
  • All the tabbed widgets need to have a title.


Categories: Blogger Tricks, Featured, Widget

Tags: , ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

180 Responses to “Easiest Way to Make Tabbed Sidebar for Blogger”

  1. What’s up, constantly i used to check blog posts here in the early
    hours in the dawn, as i like to learn more
    and more.

  2. hotels uk las vegas hotels hotels with jacuzzi in

    Easiest Way to Make Tabbed Sidebar for Blogger | Blogger Templates and Tricks by Abu Farhan

  3. facefx.com says:

    facefx.com

    Easiest Way to Make Tabbed Sidebar for Blogger | Blogger Templates and Tricks by Abu Farhan

  4. i mean it’s easier way to change/make sidebar just go to blogger templates setting option and then layout option. really this is Good tutorial and nice clean code. another way is to use plugin to make sidebar for blogger. Thanks a lot!

  5. washing machine covers

    Easiest Way to Make Tabbed Sidebar for Blogger | Blogger Templates and Tricks by Abu Farhan

  6. the full details

    Easiest Way to Make Tabbed Sidebar for Blogger | Blogger Templates and Tricks by Abu Farhan

  7. contemporary Coffee table designs

    Easiest Way to Make Tabbed Sidebar for Blogger | Blogger Templates and Tricks by Abu Farhan

  8. Hey! Someone in my Facebook group shared this site with us so I came to take
    a look. I’m definitely loving the information.

    I’m bookmarking and will be tweeting this to my followers!
    Superb blog and fantastic design and style.

    My web blog … purchasing software online

  9. Living There says:

    Found your amazing blog via Google search Engine
    Great article with useful information

    Greeting and Regards

  10. as evidenced in the film, Some Like It Hot with Tony Curtis and Jack Lemmon.
    John Roberts Powers has, for a long time, been recognised as an institution which provides acting classes
    and a range of skills which help in comprehensive personality development of your children.
    “The Nutcracker” was one of the last teen roles Macaulay had, and the
    reviews for the movie were mixed at best.

  11. Hi there the design of the site is good, really like to bookmark this site.

  12. […] • Menu em abas O efeito das abas no menu só foi possível graças ao script desenvolvido por Abu Farhan • Efeito Sombra nos textos com CSS3 • Bordas Arredondadas nos títulos do menu Uso de CSS3, […]

  13. jasa seo says:

    Everyone loves what you guys tend to be up too. This type of clever
    work and exposure! Keep up the terrific works guys I’ve added you guys to
    my blogroll.

    My website; jasa seo

  14. Therasnore says:

    Do you know if this still works in 2013 with the latest version of Blogger?

  15. Bekantan says:

    thnks for sharing..

  16. [...] Result: chosen nickname “Innornpaxyner”; success (from first page); http://www.abu-farhan.com/2009/10/easiest-way-to-make-tabber-sidebar-for-blogger/comment-page-3/#com… Result: chosen nickname “plulfighigo”; success (from first [...]

  17. Thanks for this widget and the archive page widget as well. Both the widgets have saved a lot of time and effort of mine. Thank you so much!

  18. Karthik says:

    Hi,
    I followed the steps but when I click Preview, I am asked to authenticate myself to use the jquery from your svn repository. What should I do for that?

    Thx
    Karthik

  19. Cinemages says:

    nice code very easy to pu in blogger and make use of it thankz for sharing

  20. Wong says:

    What can I do to make it no conflict with my other jQuery script? When I put this script, all of my jQuery plugin become unfunctional.

    If you are still active, please answer this brother.

    Jazakallah.

  21. Good tutorial and nice clean code. I’ll try this on my site

  22. Agaz says:

    Bang,Gimana Caranya membuat 2 buah simple tabber di sidebar bang??
    Misalnya Tabber 1:Recent Post,Popular Post,Archieve.

    Tabber 2:Categories,Link Friend,My Banner….

    Ditunggu Bang Tuttorialnya,Makasih.

  23. Imam says:

    can you change the colour to orange?

Leave a Reply


nine − four =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen