What is a jQuery Tabbed Widget?
You would bring seen a lot of websites that has a tabbed widget at the really overstep of their sidebar that keeps 3 widgets at simply 1 house providing you lot the mightiness to choose 1 to thought amid them. It non only allows you lot to salve a chip of infinite inwards the sidebar but every bit good keeps your weblog pattern build clean together with 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 together with would direct you lot through each together with every mensuration inwards detail.
Creating jQuery Tabbed Widget inwards Blogger:
The really outset affair you lot need to produce is to larn to Blogger >> Template >> Edit HTML together with glue the next CSS coding simply inwards a higher house the ]]></b:skin> tag. If you lot bring a split CSS Style canvas file together with then you lot tin every bit 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 mensuration alone depends on the coding of your blogger template every bit dissimilar designers bring dissimilar agency of coding but nosotros volition part a agency that is used to a greater extent than normally inwards the template. You bring to await upwards to the code of your Sidebar widget area. Search for <div id='sidebar-wrapper'> and simply 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();
supply 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 together with dusted, salve the template past times pressing “Save Template” at the top. Now larn to Layout expanse together with you lot would uncovering 3 widget areas simply inwards a higher house your sidebar. You tin add together widgets 2 those 3 areas together with it look inwards cast of tabs when you lot thought it alive on your site.
We promise this tutorial bring helped your biggest upshot that how to add together a jquery tabbed sidebar widget inwards blogger. With CSS, you lot tin agency the tab widgets according to the await of your blog. Share your thoughts together with suggestions virtually this widget inwards the comment below, you lot tin meet the demo of this widget here.
No comments:
Post a Comment