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. You should check this out…

    I saw this really great post today….

  2. sano says:

    One of the more unique neurotransmitters released by chocolate is phenylethylamine as phenylethylamine is found in chocolate and it causes feelings of excitement in my heart its what I feel

  3. EDGAR says:

    the plug is wrong, does not work

  4. EDGAR says:

    hi, this gadget is malfunctioning

  5. key says:

    I researched the issue, because I robbed so many times that there remained nothing to steal, but at times, I find his lock broken, because there seems misguided thieves who check prophylactically, if I bought something to steal.
    ключар

  6. Thanks for them truly valuable blog post

  7. I have been surfing online greater than 3 hours lately, but I never found any fascinating article like yours. It’s lovely price enough for me. Personally, if all website owners and bloggers made good content material as you did, the net can be a lot more useful than ever before.

  8. Badar says:

    Thanks for the tips,.. :D

  9. I have tried this but didnt worked may be my templates is differnt or something else wrong

  10. working fine ! sur u have again created a wonderful plugin u take blogging to a new level i admire u

  11. It works but it is in bullet points, not tabs. How do I fix this?

    Please help soon.

  12. shaon says:

    Its not working my site template properly.Bro would u visit my site and give me advice plz.

  13. shaon says:

    Its not working my site template properly.Bro would u visite my site and give me advice plz.

  14. I’m honored to get a call coming from a friend when he found out the important points shared on your own site. Studying your blog write-up is a real wonderful experience. Many thanks for considering readers at all like me, and I hope for you the best of success as a professional topic.

  15. Thanks a lot for being my personal lecturer on this theme. I actually enjoyed your current article very much and most of all enjoyed the way you handled the aspect I regarded as controversial. You are always incredibly kind to readers really like me and assist me to in my life. Thank you.

  16. I’m honored to receive a call coming from a friend as he observed the important ideas shared on your own site. Looking at your blog publication is a real brilliant experience. Thanks again for thinking about readers at all like me, and I hope for you the best of success as a professional topic.

  17. I would like to use the chance of thanking you for your professional guidance I have continually enjoyed checking out your site. I am looking forward to the commencement of my school research and the general preparation would never have been complete without visiting your website. If I could be of any help to others, I might be ready to help by what I have gained from here.

  18. العاب says:

    I see something truly interesting about your site so I saved to my bookmarks .

  19. NL09 says:

    Your work is AMAZING! Thank you so much for creating such beautiful works for us to use.

  20. seo ky says:

    Thanks sure is a ton of info you have for seo!

  21. Horier says:

    thanks for the trick, i will save this code this time coz i still don’t understand about the flow :)

    i am a beginner ..

  22. I became honored to get a call coming from a friend as soon as he discovered the important suggestions shared in your site. Going through your blog article is a real great experience. Many thanks for thinking of readers at all like me, and I hope for you the best of achievements as being a professional arena. pizza boca raton

  23. Jen Carl says:

    Hi! Thanks for the tutorial. I installed in on my other 2 blogs – but when I installed on my main blog lehighvalleymomma (dot) com there were no tabs – just bullet points… I know the code was the same, because I copy and pasted it just like the other two. The bullets work, however, I needed the tabs. Please help:)

  24. [...] san antonio bacon alyson hannigan timberland kyle xy oblivion mods This entry was posted in Uncategorized. Bookmark the permalink. ← [...]

  25. Easiest Way to Make Tabbed Sidebar for Blogger | Abu Farhan…

    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 sp…

  26. Interesting ! says:

    Thank you for this useful trick !
    But I have one question : How to delete Jquery ? I want to use this tabbed sidebar widget but I I don’t want to install jQuery. Is it possible ?
    Thanks in advance, you are doing a great work ;)

  27. aby says:

    KK ko ga bisa kenapa yah.tollong dong “pleace!”

  28. ena says:

    mas tolong dong ga bisa kenapa yah udah di praktekin tapi tetep ga bisa “tolong di balas”

  29. [...] Classic Education A Fine Frenzy Cabin [...]

  30. Alan says:

    terima kasih abu farhan sukses slalu, tempatku sudah jadi ni. silahkan dlihat hasilnya

  31. Eduardo says:

    Great! But doesn’t work in new models of Blogger. The CSS styles not applicable for tabs! Why?

  32. thaaanks

    can you tell us how to change

    the colors , font size , width

    you can visit our blog to see what we want to say

  33. pligg.com says:

    Easiest Way to Make Tabbed Sidebar for Blogger | Abu Farhan…

    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 sp…

  34. Personally, I do much like the name, I think it’s sort of neat. I do think it’s just a little better to say. I do believe they may be being very consistent with a few and that i connect with them whenever I see the purchase price preceding the name.But, much like other things, we all have our own personal preferences. Each to his or her own, I always say. What’s your choice?

  35. I entirely adore listening to free classical songs…

  36. Online courses can be a great way to get your education if you are on a budget.

  37. I just added your weblog to my blogroll, I pray you’d look at doing the same.

  38. reyad010 says:

    Amazing! Its really perfect. Using two of your great work in my blog

  39. good article. Easiest Way to Make Tabbed Sidebar for Blogger have made ​​more sense for me about the script. I continue to learn. I learn to make templates. thank you for the tutorial.

  40. Ahmed says:

    i really don’t understand the last step i added all the codes in it’s places but nothing was happened and i installed addons for my fire fox and i didn’t know what to do

  41. gilagame says:

    thx, work in my blog, let’s cek it out

  42. ahmed says:

    al salam 3alykom brother abu-farhan , thx for the awesome widget but i wanna change the width of this tabbed sidebar ???
    thanks again >>> ahmed sabri

  43. Garrett H. says:

    Hello there. Thanks so much for this script–I installed it and it runs smoothly, but I do have a question.

    I notice that in Internet Explorer when I go to my site and use the tabs, unsightly bars crop up below the second and third tabs. When I view my blog with these tabs in Firefox and Chrome, pressing each tab doesn’t bring these bars up.

    Is there a specific place in the script where I can eleminate, or at least change, these bars in Explorer, and if so could you please tell me where?

    Thanks a lot. My website is:

    anomalousskies.blogspot.com

  44. thanksss my friend
    جزاك الله خيرا

Leave a Reply


three + = five

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen