How to: Add Menu Tabs Widget of Wordpress to Blogger

Wordpress Templates are very stylish and well worked coded. But Customizing Template is very difficult, even having coding language skill webmasters don’t prefer for Customizing Wordpress Templates because of lots of time consuming. Whereas in Blogger Webmaster finds individuality to upload their choice template. Here BlogTariff presents “Wordpress Style Menu Tabs Widget” for Blogger. In the earlier post we discussed about adding Stylish Multi Tabbed Widget for Blogger. Yet another Multi Tabbed Widget with eye-catching CSS and JQuery effects. It’s easy to install on blogger platform without any hard work. Doesn’t waste space on blogger template just install this Multi Tabbed Widget on your blog and enable readers/visitors to browse their choice Tab items. Let’s begin the Tutorials.

You may like to view Authors experiment before you implement on your blog just watch our Demo

Live Demo

You may also like the below related posts
1. Editable and Stylish Multi Tabbed Widget for blogger

How to Add Multi Tabs Widget for Blogger?

Step1
Sign into your blogger account
Click on “EDIT HTML” link tab
(Before you do implement on your blog Backup your Template if anything goes wrong you can reuse it again)
Search for code

]]></b:skin>

After finding code add after this Download Code
After Successful adding the Downlod file code "Save the Template"
Now Search for code

]]></b:skin>

After finding code copy the below code and paste above to it

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

Customization

If need replace color of Tabs background with #A46F38 your choice color by using our Color Chart
After adding the above code "Save the Template"
Step 2
Now search for code

<div id='sidebar-wrapper'>

After finding code just copy the following code and paste below to <div id='sidebar-wrapper'>

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

Customization

Replace "Subscribe, Blog Archieve and Labels with your Widget Title ID
After successful pasting and replacement "Save the Template"
Now Check your experiment on "Page elements" where you can find the below "Add a Gadget" Tabs as shown in the image below.

Just drag your widget on created Tabs which you want to show on Multi Tabbed widget.
Appreciation
If you enjoyed this article let know your views and suggestions via comments.
Don't forget to Subscribe to US we always appreciate that. Don't miss our ensuing posts.