Add Multi Menu Tabs Widget in Blogger Sidebar

Hello guys, I wanna share you a trick about adding Multi Menu Tabs Widget in  your Blogger sidebar. This widget looks similar to Wordpress blog and therefore it is more good looking. Some features here are:
  • You can add as many widgets as you want inside a single tab/line.

  • Beautiful and highly customizable CSS.

  • Jquery effects are added this time to the tab views.
add wordprees multitab widget in blogger

Without much word to say, let us now learn how to add this professional looking tab widget into your Blogger sidebar . Don't worry dear because we will make this tutorial easy and simple to install.

How To Add this Multi Tabbed Widget To Blogger?


We will divide tutorial  into   three easy parts which are:

  • Adding  JQuery and JavaScript to your Blogger templates

  • Adding the CSS

  • Adding the HTML

Adding the JQuery and JavaScript to your Blogger Templates


Step 1. Go To Blogger >> Design >> Edit HTML ( Backup your template for reference)
Step 2. Search for
]]></b:skin>
Step 3. Just below or after that code in (Step 2) paste this code
Step 4. Save your template and your halfway done!

Adding the CSS


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


/*---- Multi Tab Widget for Sidebar  by BTT ----*/

.BTT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.BTT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.BTT-tabs li:first-child{margin:0}
.BTT-tabs li a{color:#fff;background:#158aee;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;border-radius:5px;-webkit-box-shadow: 0 -2px 30px #1751ff;
box-shadow: 0 2px 6px #1751ff;
border-top: 1px solid #1484fc;
border-bottom: 1px solid #1484fc;}
.BTT-tabs li a:hover,.BTT-tabs li a.BTT-tabs-current{background:#8168FD;color:#fff;text-decoration:none}
.BTT-tabs-content{border: 1px dotted #ddd}
.BTT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Adding the HTML


Step 1.  Search/look for  the code below
<div id='sidebar-wrapper'>

or
<div class='column-right-inner'>

Step 2. Just below that code in step 1. paste the code below,

<div class='BTT-tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.BTT-tabs-content-widget-BTT-id&quot;).hide();
                $(&quot;ul.BTT-tabs-widget-BTT-id li:first a&quot;).addClass(&quot;BTT-tabs-current&quot;).show();
                $(&quot;.BTT-tabs-content-widget-BTT-id:first&quot;).show();
                $(&quot;ul.BTT-tabs-widget-BTT-id li a&quot;).click(function() {
                    $(&quot;ul.BTT-tabs-widget-BTT-id li a&quot;).removeClass(&quot;BTT-tabs-current a&quot;);
                    $(this).addClass(&quot;BTT-tabs-current&quot;);
                    $(&quot;.BTT-tabs-content-widget-BTT-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='BTT-tabs BTT-tabs-widget-BTT-id'>
<li><a href='#widget-BTT-id1'>About</a></li>
<li><a href='#widget-BTT-id2'>Blog Archive</a></li>
<li><a href='#widget-BTT-id3'>Follow by Email</a></li>
</ul>
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                    
</div>
<div style='clear:both;'/>                      
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                      
</div>
                     
<div style='clear:both;'/>
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                      
</div>
</div>
<div style='clear:both;'/>
You can replace About Me, Blog Archive and Follow by Email with your Widget Titles that you will be adding.

Step 3.  Now Go To Page Elements and you will see something like the screenshot below,
add multitab widget ti blogger sidebar


Let me know how you find it?

Hope this tutorial help you in some other ways. Peace and blessings buddies =D
Credits from: MBT



About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...