How to Add a jQuery Tabbed Sidebar Widget in Blogger

Advertisements
Have you ever seen those blogs that has a tabbed widget area in the sidebar consisting of popular, recent and features posts within a single click? It is more commonly known as jQuery Tabbed widget, which allows you to save a lot of space in the sidebar keeping the interface user friendly for your users by combining 3 different widgets into just one. In this article, we will be showing you how to add a jQuery Tabbed Sidebar Widget in Blogger.

What is a jQuery Tabbed Widget? 

You would have seen a lot of websites that has a tabbed widget at the very top of their sidebar that keeps three widgets at just one place providing you the ability to select one to view among them. It not only allows you to save a bit of space in the sidebar but also keeps your blog design clean and professional.

A lot of big named popular websites are using the same technique to display more widgets within less space. In this article, we will be showing you a way how to add a jQuery tabbed sidebar widget in blogger and would guide you through each and every step in detail.

Creating jQuery Tabbed Widget in Blogger:

The very first thing you need to do is to go to Blogger >> Template >> Edit HTML and paste the following CSS coding just above the ]]></b:skin> tag. If you have a separate CSS Style sheet file then you can also add the following CSS to it.

/* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 80px;
text-align: center;
}
.about_tab {
width: 96px;
text-align: center;
}
li.laster {
border: 0px;
width: 120px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}

Now this step entirely depends on the coding of your blogger template as different designers have different way of coding but we will share a way that is used more commonly in the template. You have to look up to the code of your Sidebar widget area. Search for <div id='sidebar-wrapper'> and just below it paste the following piece of coding.


<!-- Tab Widget [start] -->
<div class='tabviewsection'>
<script type='text/javascript'>
  jQuery(document).ready(function($){
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
     
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
                    $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
                    $(this).addClass("tabs-widget-current");
                    $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                    var activeTab = $(this).attr("href");
                    $(activeTab).fadeIn();
                    return false;
                });
            });      
 </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
  <li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
  <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
  <li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>Popular</a></li>
</ul>
<!-- Tab Widget 1 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
 </b:section>                                    
</div>
                       
<!-- Tab Widget 2 -->              
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
 
 </b:section>                                      
</div>                          
                             
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<!-- Tab Widget 3 -->
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                      
</div>
</div>
<!-- Tab Widget [endt] -->

Once everything is done and dusted, save the template by pressing “Save Template” at the top. Now go to Layout area and you would notice three widget areas just above your sidebar. You can add widgets two those three areas and it appear in form of tabs when you view it live on your site.
We hope this tutorial have helped your biggest issue that how to add a jquery tabbed sidebar widget in blogger. With CSS, you can style the tab widgets according to the look of your blog. Share your thoughts and suggestions about this widget in the comment below, you can see the demo of this widget here.

Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

15 comments

April 8, 2014 at 7:52 PM

Not *WordPress. It's Blogger. Please change it, brother.

April 9, 2014 at 7:32 AM

Nice widget but i don.t think it can be used on responsive templates.

April 9, 2014 at 8:28 AM

Awesome Widget Bro. Thanks for sharing.
Bro tell me what to do if I want to add 4 tabs instead of 3 tabs?

Stay Blessed!

April 9, 2014 at 9:14 AM

for me div id='sidebar-wrapper' is not found in template,,, sidebar is present at below places

1) div class='column-right-outer'
div class='column-right-inner'
aside>
macro:include id='main-column-right-sections' name='sections'>
macro:param default='2' name='num'/>
macro:param default='sidebar-right' name='idPrefix'/>
macro:param default='sidebar' name='class'/>
macro:param default='true' name='includeBottom'/>
macro:include>
aside>
div>
div>


Can you please suggest any alternative

Regards
www.udzial.com
Udzial Means Share

Editorial Team MOD
April 9, 2014 at 1:16 PM

Go to Blogger >> Template > EDIT HTML And Search for <aside> and then paste the code below it

Editorial Team MOD
April 9, 2014 at 1:17 PM

Repeat the 3rd Widget, And Its Controller, Give unique id to both Controller and 4th Widget.

Editorial Team MOD
April 9, 2014 at 1:18 PM

Corrected!

Editorial Team MOD
April 9, 2014 at 1:18 PM

Works fine on responsive too, Check this

http://rdesigntheme.blogspot.com/2013/11/the-artist-black-man.html

July 29, 2014 at 5:41 AM

Hello,
can anybody explain what to do after we save the template. actually after saving the template i got bullet like icon in layout and now not able to figure it out how to proceed. http://cybermuch.blogspot.in/

August 7, 2014 at 7:16 PM

Hi Syed, could you help me, as installing the tabbed widgetand add some gadgets inside, the widget appears strange; the content (gadgets) do not apply inside the box. Instead, they appear in the bottom/outside of the box. So, the bottom border is on the top of gadgets installed inside. You can see on my blog named 'Langue Estuary'. Thanks!

Editorial Team MOD
August 13, 2014 at 11:23 PM

Can you please provide your blog URL?

August 23, 2014 at 12:52 AM

thanks for kind assistance! this is my blog url http://latuary.blogspot.com/

Editorial Team MOD
August 25, 2014 at 6:08 AM

I dont see the tabbed widget on your blog.

August 26, 2014 at 1:28 PM

Pardon me, I've just deleted it.

September 13, 2014 at 11:33 PM

Very Nice and attractive, thank you.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.