In blogger new designs and widgets are developing which is fully professional and awesome like this you can add new jQuery sidebar tabbed...
In blogger new designs and widgets are developing which is fully professional and awesome like this you can add new jQuery sidebar tabbed widget in blogger, it is so awesome and covered with multi navigation tabs now you can see that every web designer has started to add this jQuery sidebar tabbed widget on his blogger templates cause of his good look and lots of benefits.
Now add any three widget on it and check it perfectly all things are working fine or not.
Also Read:
This jQuery Sidebar widget tabbed surely increase your site reputation and professionalism, now customize this widget by your own CSS styles share this amazing article with your other friends and don’t forget to give a review of this widget in the comment below.
What's Special Features in This Widget?
This widget usage is increasing day by day and becoming more trendy and useful for blogger users cause of its lovely benefits as mentioned below.
- It save your lots of space on sidebar by Multi tabbed navigation.
- It is fully made from smooth jQuery code which would never reduce your blog page speed.
- You can add any widgets in this tabbed easily from blogger layout.
- It creates eye touch and awesome experience among your readers and upcoming visitors.
- It is not compressed from heavy jQuery so you can customize it as you want.
Check out the demo below and make sure that you are selecting a best jQuery widget.
How to Add a jQuery Tabbed Sidebar widget in Blogger
To implement this widget in blogger, you will have to add jQuery latest plugin in blogger because its main function is in jQuery which will save your blog page speed.
Safety Recommend is to first backup your blog template.
Then open your blogger account>> Template>> Edit HTML>> Click on HTML viewer and then press CTRL+F for visible the hidden search box.
Now search the below code.
The above code is the end tag of your b skin style sheet, so add the following code just before the above code. If you are using External CSS styles in your blog template so you can also add this CSS styles in external styling.]]></b:skin>
Afterwards, you have to find your blog template right sidebar div tag because every designers has its own id and class, first find the below code because it is mostly present in blog templates if you succeed to found that code so Congrats and move forward on next step and if your blog template doesn’t has the below code so don’t worry search the word sidebar or side and try to find its div tag./* 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 copy and add the below code just after the above code and finally click on save template.<div id='sidebar-wrapper'>
After done the above steps, move on layout here you will be see three widgets tab as shown in below image.<!-- 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();
&nnbsp; 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] -->
Also Read:
This jQuery Sidebar widget tabbed surely increase your site reputation and professionalism, now customize this widget by your own CSS styles share this amazing article with your other friends and don’t forget to give a review of this widget in the comment below.
COMMENTS