3 Tabbed Menu With jQuery And CSS

Introducing a great Multi tabbed space efficient widget for blogger blogs. This multi tabbed widget will help you in decreasing your blog load time by combining your three Popular posts, Recent Posts and Random Posts widget into one. This tabbed menu widget features a tabbed content area with jQuery & CSS. When clicked to the tabs, content area switches to the new content with a slick accordion type effect. You can see the live demo of this widget in my blog sidebar. Nettuts is a great website for web design and development has created this tabbed widget by using jQuery & CSS and comptable with all major browsers. Follow below easy steps to add this widget in your blog.

How To Add 3 Tabbed Menu To Blog

1. Go to your Blogger Dashboard click on ---> Design tab ---> Page Elements tab.

2. Click on "Add a Widget" then select "HTML/Javascript" Widget.

3. Paste the entire following code inside the widget. (Note: If you already using jQuery script in your template then erase blue line of code.)

<style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXC83YA30t-9EB0FdsdCnEN2o70ohTTiuwTber2x-zL4jVnEraUPVr155FYptanZD4mOVETDToYBBpWpUArMTkTcRZ5O44LAHoN0ly4GDAeRBwK3B-aCd91Ve0AwRIMiyIREOktx8WvSA/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN03UihH4kMpWixnQAYgX10wXgOC4XN5Ae2ZQQS7pxaWxskRsKa1HzQQReJAsDdYifhDcXsxbG1H_h_k1LeCG1F7Y3uE10mWKyM7VBLDPhkIUgR9MtUOjRI-vtlUgqv0OaPvyI2iXy8ZU/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1GsSICl5BDmSkP3J-CFUzSSRxlARYvACreavADzJu45TiNxtGA11sHCebxd4sZw-Lg6wH-f_ULsny0BodwZ702ciiAf66CRKPCgCHyrVzgrC_SKBIDEqwXVwvELxSpIzZLo2cDCOr994/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content 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;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="content_1" class="tab active">Tab 1</a></li>
<li><a href="javascript:void(0);" title="content_2" class="tab">Tab 2</a></li>
<li><a href="javascript:void(0);" title="content_3" class="tab">Tab 3</a></li>
</ul>
<div id="content_1" class="content">

YOUR CONTENT GOES HERE

</div>
<div id="content_2" class="content">

YOUR CONTENT GOES HERE
 
</div>
<div id="content_3" class="content">

YOUR CONTENT GOES HERE

</div>
<span style="color:#ddd; font-weight:bold; font-family:arial; font-size:11px;">Widget by: <a style="color:#f7f7f7; font-weight:bold" href="http://www.ravisaive.in">Ravi Saive</a></span>
</div>

4. Replace Tab 1, Tab 2, and Tab 3 texts with your own texts.

5. Replace YOUR CONTENT GOES HERE with your own content.

6. Save your widget.

If you are looking for three in widget like Recent Posts, Random Posts and Popular Posts widget into one together like shown in below screenshot, then follow below steps:

3 Tabbed Menu With Recent, Random and Popular Posts

1. Paste the following code inside the "HTML/Javascript" Widget.

<style>
/* Tabbed Menu CSS by www.ravisaive.in */
 #tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(http://nettuts.s3.amazonaws.com/001_Tabbed/site/images/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(http://nettuts.s3.amazonaws.com/001_Tabbed/site/images/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(http://nettuts.s3.amazonaws.com/001_Tabbed/site/images/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content 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;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}

/* Recent, Random & Popular Posts CSS by www.ravisaive.in */
#featured { color:#000;  margin: 1px 5px; line-height:1.5em;  font-size:13px}
#featured ol{ margin:0 15px; padding:0}
#featured li{border-bottom: 1px dashed rgba(0, 0, 0, 0.1);font-family: "Droid Sans",arial,sans-serif;font-weight:normal;font-size: 12px;line-height: 1.2em; margin:0 5px; padding:0 0 0.25em 0px}
#featured ol li a{color:#333; text-decoration:none}
#featured ol li a:hover{color:#dc0771; text-decoration:none}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="content_1" class="tab active">Recent</a></li>
<li><a href="javascript:void(0);" title="content_2" class="tab">Random</a></li>
<li><a href="javascript:void(0);" title="content_3" class="tab">Popular</a></li>
</ul>
<div id="content_1" class="content">
<script type="text/javascript">
function showrecentposts(json) {

  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = "(more)";
    readmorelink = readmorelink.link(posturl);
    var postdate = entry.published.$t;
    var cdyear = postdate.substring(0,4);
    var cdmonth = postdate.substring(5,7);
    var cdday = postdate.substring(8,10);
    var monthnames = new Array();
    monthnames[1] = "Jan";
    monthnames[2] = "Feb";
    monthnames[3] = "Mar";
    monthnames[4] = "Apr";
    monthnames[5] = "May";
    monthnames[6] = "Jun";
    monthnames[7] = "Jul";
    monthnames[8] = "Aug";
    monthnames[9] = "Sep";
    monthnames[10] = "Oct";
    monthnames[11] = "Nov";
    monthnames[12] = "Dec";
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g; 
    postcontent = postcontent.replace(re, "");

    document.write(""+posttitle+"");
    if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

    if (showpostsummary == true) {

      if (postcontent.length < numchars) {
          document.write('');
         document.write(postcontent);
          document.write('');}
      else {
          document.write('');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...' + readmorelink);
          document.write('');}
}
}
}
</script>
<script style='text/javascript'>var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;</script>
<div id="featured">
<script src='http://www.ravisaive.in/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
<span id=rcw-cr><a href="http://www./2012/01/3-tabbed-menu-with-jquery-and-css.html">Recent Posts Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>
</div>
</div>
<div id="content_2" class="content">

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ol>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ol>');}
</script>
<div id="featured">
<script src="http://www.ravisaive.in/feeds/posts/default?orderby=updated&alt=json-in-script&start-index=1&max-results=500&callback=randomposts" type="text/javascript"></script>
<span id=rcw-cr><a href="http://www.ravisaive.in/2012/01/3-tabbed-menu-with-jquery-and-css.html">Random Posts Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>
</div>
 
</div>
<div id="content_3" class="content">
<script language='JavaScript'>
aBold = true;
numposts=200;
maxshowresult=5;
home_page = "http://ravisaive.in/";
</script>
<script type="text/javascript">
/*
 * Popular post or most comment for blogger
*/

var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');document.write('<br/><span id=rcw-cr><a href="http://www.ravisaive.in/2012/01/3-tabbed-menu-with-jquery-and-css.html">Popular Posts Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>');
</script>
</div>
<span style="color:#ddd; font-weight:bold; font-family:arial; font-size:11px;">Widget by: <a style="color:#f7f7f7; font-weight:bold" href="http://www.ravisaive.in">Ravi Saive</a></span>
</div>

2. Make following changes to each tab.

1. Recent Posts Tab : If you like to display date, post summary and number of posts then change values as shown in red color for recent posts tab.
2. Random Posts Tab : Change numofpost=10; as shown in green color to any, if you like to show more random posts tab.
3. Popular Posts Tab : Show more popular post then change maxshowresult=5 as show in purple color to any for popular posts tab.

3. Final step change www.ravisaive.in as show in blue color (3 times) with your blog link.

4. Save your widget and preview your blog.