How to make sidebar tabbed for Blogger?

Sidebar tabbed is another featured that we almost see on popular blogs. Sidebar tabbed section is an area on your sidebar which mostly have 3 tabs but can add more.

Why put sidebar tabbed on your blog?

A lot of widgets are important to be seen on your blog. But since you want to have a clean design for your blog you limit your widget to prevent the mess of your blog. With the use of  sidebar tabbed, you can add connect 3 widget at the same area without mess.

This is sample screenshot of sidebar tabbed.

It's nice to see a blog with a clean design and very nice content. Why I came to post about how to put sidebar tabbed on blog? Because, my blogger friends on a facebook comment and suggested that my blog is somewhat messy. Since, I accept the comment and suggestion it came to my mind I should put sidebar tabbed on my blog. Thanks to them

Steps on how to put sidebar tabbed for Blogger blog:

Step 1. Go to you blog dashboard >> Template >> EDIT HTML >> Proceed >> don't forget to check the expand widget...

Step 2. Find this code

]]></b:skin>

Step 3. Copy and paste the following code Directly Above / Before ]]></b:skin>

.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 4. Find this code

</head>



Step 5. Copy this code

 <!-- jQuery Call -->

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

<!-- End of jQuery Call -->
<a href='http://jomarlipon.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFVfmSzreAZm326mU7UJ6qIzKNeF9Glj6f5XiKVJzSf2Rg_LbNk7fZ-Mmm0XeFFm1Gd7BvRKebb79t0EysrzztHQRV6qhkQGm2oOJIy6Q_twiz5fJRh1BFdnp8LDhEg8GqL1RYVW3S6eP_/s1600/best+blogger+tips.png'/></a><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>



Step 6. For final set up to fit on your blog

 Find this code
 

<div id='sidebar-wrapper'> 

Below this it must similar to this code below

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

If the id is not sidebar1, change it to sidebar1.

To understand more on the javascript code.

starttab=0 <--This sets were the tabbed section will start.If you leave it at 0 the tabbed section will start at the very top of your sidebar, if you change it to 1 there will be 1 regular gadget then the tabbed section then the rest of your gadgets and so on.

endtab=2 <--This sets were the tabbed section ends or how many gadgets will be in the tabbed section.If you change the starttab to 2 you must also add 2 to this and make it 4 and so on.If you have the starttab=1 and endtab=4 you will have 5 gadgets in the section.

I would like to thanks to spiceupyourblog for the great code shared.

Share on Google Plus

About Jomar Lipon

Web Developer at your service and frustrated blogger in Cebu. Author of JomarPH.com, SEO Specialist.