What is a jQuery Tabbed Widget?
You would convey seen a lot of websites that has a tabbed widget at the real hand of their sidebar that keeps 3 widgets at but 1 house providing you lot the might to conduct 1 to thought with them. It non only allows you lot to salve a chip of infinite inwards the sidebar but equally good keeps your weblog pattern build clean as well as professional.Influenza A virus subtype H5N1 lot of large named pop websites are using the same technique to display to a greater extent than widgets inside less space. In this article, nosotros volition live showing you lot a agency how to add together a jQuery tabbed sidebar widget inwards blogger as well as would guide you lot through each as well as every measuring inwards detail.
Creating jQuery Tabbed Widget inwards Blogger:
The real starting fourth dimension affair you lot involve to produce is to become to Blogger >> Template >> Edit HTML as well as glue the next CSS coding but higher upwardly the ]]></b:skin> tag. If you lot convey a split upwardly CSS Style sail file therefore you lot tin dismiss equally good add together the next CSS to it./* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px corporation #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 corporation #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 corporation #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}
Now this measuring alone depends on the coding of your blogger template equally dissimilar designers convey dissimilar agency of coding but nosotros volition part a agency that is used to a greater extent than normally inwards the template. You convey to hold back upwardly to the code of your Sidebar widget area. Search for <div id='sidebar-wrapper'> and but below it glue the next slice 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();
furnish 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 as well as dusted, salve the template yesteryear pressing “Save Template” at the top. Now become to Layout expanse as well as you lot would respect 3 widget areas but higher upwardly your sidebar. You tin dismiss add together widgets ii those 3 areas as well as it look inwards shape of tabs when you lot thought it alive on your site.
We promise this tutorial convey helped your biggest consequence that how to add together a jquery tabbed sidebar widget inwards blogger. With CSS, you lot tin dismiss mode the tab widgets according to the hold back of your blog. Share your thoughts as well as suggestions nearly this widget inwards the comment below, you lot tin dismiss encounter the demo of this widget here.
Comments