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:
Step 2 – Installing jQuery Library
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:
As you have noted you’ll get a few lines that can be customized, those are:
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:
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.
Method 3 – Using Web developer Firefox Plugin
This is another great extension, if you don’t have it, get it here.
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:
Check images below for better understanding:
In this case, Widget 3 and 4 will not get any tabs, because your finishing number was 2. Very easy huh?
- 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.
Related Articles :
- Moving Box Slider for Popular Post Blogger (121)
- Blogger Widget: LofsiderNews – Slider for Popular Post Blogger Part 3 (28)
- Blogger Widget: LofsiderNews – Slider for Popular Post Blogger Part 2 (20)
- Blogger Widget: LofsiderNews – Slider for Popular Post Blogger Part 1 (23)
- Dynamic View Google Blog Template (30)
- All my Accordion Effect for Blogger (15)
- Horizontal Accordion for Popular Post in Blogger (18)
PLEASE DONATE MY BLOG