Add WordPress Style Menu Tabs Widget To Blogger!

The widgets on a Wordpress Blogs surely are well designed and coded but they look even better when they are bloggerized and made compatible to work in Blogger. Last year we created Advanced Multi Tabbed Widget that was well appreciated by everyone and today we have yet another but far improved multi tabbed widget. The best thing about this widget is that you can add as many widgets as you want inside a single Tab which you could not do previously. Beautiful CSS and Jquery effects are added this time to the tab views and I have tried again to make its installation as easy as possible. So do not delay any further and learn how to add a professional looking tabber widget to your free Blogger blogs.

How To Add this Multi Tabbed Widget To Blogger?

I have divided the tutorial in three parts which are,

Adding the JQuery and JavaScript to your Blogger templates
Adding the CSS
Adding the HTML

1- Adding the JQuery and JavaScript to your Blogger templates

Go To Blogger > Design > Edit HTML
Backup your template
Search for ]]></b:skin>
Just below it paste the following code –> MBT Menu Tabs JavaScript
Save your template
Done!

2- Adding the CSS

Inside your template search for ]]></b:skin> again
Just above it paste the code below,

/*---- Wordpress Style MBT Menu Tabs----*/
.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Simply replace #A46F38 with the HexaDecimal Colour code of your template so that the tabs may blend perfectly into your template.

3- Adding the HTML

Now Search for <div id='sidebar-wrapper'>
Make sure the widgets box is unchecked.
Just below <div id='sidebar-wrapper'> paste the code below,

<div class='MBT-tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(".MBT-tabs-content-widget-MBT-id").hide();
                $("ul.MBT-tabs-widget-MBT-id li:first a").addClass("MBT-tabs-current").show();
                $(".MBT-tabs-content-widget-MBT-id:first").show();
                $("ul.MBT-tabs-widget-MBT-id li a").click(function() {
                    $("ul.MBT-tabs-widget-MBT-id li a").removeClass("MBT-tabs-current a");
                    $(this).addClass("MBT-tabs-current");
                    $(".MBT-tabs-content-widget-MBT-id").hide();
                    var activeTab = $(this).attr("href");
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='clear:both;'/>