.jpg)
We daily shared different tips to make your blogger blog more professional and now today we will going to share JQuery tabbed sidebar widget that combine 3 widgets and users can easily see any widget by clinking on it. You don’t need to worry about your website speed or anything else because it’s not going to affect on your website performance, it will just make your blog more attractive.
What’s Multi Tabbed Sidebar Widget?
If you’re still don’t understand about what’s multi tabbed sidebar widget then let me explain it in few words. Tabbed sidebar is one widget that appears in your blog same as some other widgets but one amazing thing in it that it keeps three different widgets like Popular Posts, Recent Posts and Blog Comments at one place. There is different popular websites that used same method and added multi tabbed sidebar widget to their websites that save their websites sidebar space.
Adding Multi Tabbed Sidebar Widget in Blogger
- Go to Blogger Dashboard>> Template>> Edit HTML.
- Now find ]]></b:skin> tag and just above it past following CSS coding.
/* Tab Widget By MyBlogExpert */Again search below piece of code in you template.
.tabbedviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #29C621;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabbed-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabbed-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabbed-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;
}
.tabbed-widget-content {
}
.tabbedviewsection {
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;
}
.tabbed-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabbed-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabbedviewsection h2 {
display: none;
}
.tabbed-widget li a.tabbed-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #29C621;
font-size: 14px;
text-transform: capitalize;
}
.tabbed-widget li a {
background: #29C621;
}
<div id='sidebar-wrapper'>Now just below it past the follow JQuery coding.
<!-- Tab Widget [start] --><div class='tabbedviewsection'><script type='text/javascript'> jQuery(document).ready(function($){ $(".tabbed-widget-content-widget-themater_tabs-1432447472-id").hide(); $("ul.tabbed-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabbed-widget-current").show(); $(".tabbed-widget-content-widget-themater_tabs-1432447472-id:first").show(); $("ul.tabbed-widget-widget-themater_tabs-1432447472-id li a").click(function() { $("ul.tabbed-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabbed-widget-current a"); $(this).addClass("tabbed-widget-current"); $(".tabbed-widget-content-widget-themater_tabs-1432447472-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); }); </script><ul class='tabbed-widget tabbed-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='tabbed-widget-content tabbed-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='tabbed-widget-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'><b:section class='sidebar' id='sidebartab2' preferred='yes'> </b:section> </div>Remember:
<!-- Tab Widget 3 --><div class='-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'><b:section class='sidebar' id='sidebartab3' preferred='yes'></b:section> </div></div><!-- Tab Widget [endt] -->
If you’ve faced some problems to find <div id='sidebar-wrapper'> section in your template then this is because your blog may have different coding because every template designer have their own way to design template, so you can find it manually or simply drop your blog link in comment section and we will help you to find this section in your template. (Before commenting please keep in mind that don’t use any type of Tags for getting backlinks, just past your blog URL with your comment and click on publish, for more information you can read our comments policy).
After making these all changes, simply click on “Save Template” button.
Now go to Layout section and you can see three different widget areas, where you can add your different widgets and after adding them just save your blog setting and visit your blog to see that how these widgets will appears, for more detailed information you can see below screenshot.
We hope above method will help you to add tabbed sidebar in your blogger blog because this is one big issue for some newbie’s bloggers, so you can read this tutorial and solve your issue however if you’ve any other question about this topic or you’ve liked our work then feel free to share your thoughts in comment section and also share our work with your friends. Don’t forget to subscribe our feeds for getting upcoming tutorials straight to your inbox.
Sign up here with your email
ConversionConversion EmoticonEmoticon