31 December 2009

Tabbed Sidebar widget for blogger

Advertisements

I previously posted about Tabbed Navigation widget for Blogger sidebar.  But it has some limitations like, you can't add some common elements to it such as Blog Archive, poll, Labels etc. But with this new tabbed sidebar widget you can add these features easily.

Tabbed Navigation widget is helpful for you as it saves space of your blog sidebar. You can provide more features in single area of your blog like sidebar. You can include contents like Search, About Me/Us, Recent Posts, Recent Comments, Random Posts, Labels/Categories, Favorite Links and many more.

So visit live Demo Site.


The method I describing bellow is inspired by Abu Farhan and Webitect. 

1.Go to Edit HTML and look for ]]></b:skin> Now add following code before this ]]></b:skin>


/* 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;
}

Above is the CSS style part. You can modify the looks of tabs here.

2. Second part is Installing jQuery Library. If you already have it then skip this step. If you do not have it then -
Look for </head> . Add following code just before </head>

<!-- jQuery Call -->

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

<!-- End of jQuery Call -->

3.Finally add following Script just above </head>

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://free.blogger.help.googlepages.com/bloggertabv1.0-min.js.txt"></script>

It's done.

Following are the 3 customizable units:

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

starttab is starting number of widget and endtab your number ast widget.
sidebarname is your sidebar id. And you have to find correct sidebar id to work this Tabbed Sidebar Widget.

Just look for following code

<div id='sidebar-wrapper'>

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

id='sidebar' is the sidebar name.

It's all done now. You can add this feature per one blog. All tabbed widgets should have name.

Happy New Year!!

Related Posts

17 comments

December 31, 2009 at 6:58 AM

Please check where I have gone wrong and kindly instruct me how to rectify it.
regards and thanks for your great help in blogging.

Amy
December 31, 2009 at 4:53 PM

I'm excited about this widget...but just adding the code doesn't magically add it to the blog. What step am I missing? And how would I actually put content in each tab as well? Thanks!

December 31, 2009 at 11:24 PM

Hi gopakumar menon

Did you added this widget?

You need to find correct var sidebarname. It may be id='sidebar'

so the line

var sidebarname="sidebar1";

will be

var sidebarname="id='sidebar'";

December 31, 2009 at 11:29 PM

Hi Amy

After you added all codes correctly just go to Add page element and add gadgets on very first Add a Gadget.
Also check the above comment.

January 9, 2010 at 8:58 PM

I want to add this, but this just doesnt work with me, i dont know why, i already made all you said

January 9, 2010 at 10:15 PM

the 2nd and 3rd code should be above </head> as follows


<!-- jQuery Call -->

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

<!-- End of jQuery Call -->



<script type='text/javascript'>
var starttab=0;
var endtab=3;
var sidebarname=id=&#39;sidebar&#39;;
</script>
<script src='http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js' type='text/javascript'/>









</head>

January 10, 2010 at 4:23 PM

thanks now it works =D!

June 12, 2010 at 1:40 PM

Hi
I installed this tabbed sidebar and it was working perfect until I changed my domain to dot.com but still remaining in blogger and the sidebar stopped working. Can you please help?

June 12, 2010 at 6:47 PM

@ harfy

Well some of the third party widgets not work properly when you change to custom domain. Try to reinstall it.

June 13, 2010 at 3:56 AM

Hi
thanks for reply.
No I have two ticker html codes which work all right. I did reinstall it but it does not work. I have left the address

June 14, 2010 at 1:52 AM

Here is another one:
http://free-blogger-help.blogspot.com/2009/12/tabbed-navigation-widget-for-blogger.html

January 10, 2011 at 7:22 PM

not working for me

January 10, 2011 at 11:48 PM

@ sop

Describe your problem.

March 25, 2011 at 3:53 PM

Hey drraman. Thanks so much for this code--I installed it and it works 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 and this tab 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 there are, could you please tell me where?

Thanks a lot. My website is:

anomalousskies.blogspot.com

August 31, 2011 at 2:51 PM

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

September 1, 2011 at 9:10 PM

Create a test blog and add all code of this hack carefully.

Anonymous
September 11, 2011 at 4:49 AM

Me too.. They are in bullet points... please help me!

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More