This tutorial is  divided  in three parts which are,

1. Adding the JQuery and JavaScript to your Blogger templates
2. Adding the CSS
3. Adding the HTML

1- Adding the JQuery and JavaScript to your Blogger templates

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

2- Adding the CSS

1. Inside your template search for ]]></b:skin> again
2. 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

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

<div class='MBT-tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
                $(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
                $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
                    $(this).addClass(&quot;MBT-tabs-current&quot;);
                    $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(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;'/>

Please Replace Subscribe, Latest Tricks and Search with your Widget Titles that you will be adding.
   4.  Now Go To Page Elements. You will see something like this,
Start adding your widgets and after you have added all your widgets then simply view your blog to see it in action. Done! :-)

Wapp – Premium Theme by ThemeForest

• 
  
• 
  
• 
  
• 0

Wapp is a theme made especially for phone app websites, whether it be a specific app, or the developer portfolio. It has a plethora of features that make it stand out from the crowd. This is possibly the best theme in terms of the customizability, while still maintaining its’ ease of use.
Wapp demo: http://wapp.monkify.com/wp/

download