How to Make a Multi Tab View Widget in Blog - Widget multi-tab is a combination of several widgets which consists of 3 columns or more. Multi tab widget is very useful and beneficial for your blog, too many have a blog widget, so it looks more messy. By using a multi tab on the blog so you can enter multiple widgets in the widget so that it becomes a multi-tab.
In addition, many of the functions of the multi-tab view this widget, you do not need much to provide columns for widgets that you post on your blog, with a multi-tab view widget you only need one empty area to create a widget multi-tab view. A blog template design must be made as attractive as possible, but not to be crowded with widgets because it could Slow Loading Blog,
therefore the benefits of multi-tab view widget to minimize widgets too much on the blog in just one box only. For those of you who want to make or install the widget multi-tab view in the blog, please read the tutorial below
1. Log in to blogger2. Select the template >> Edit HTML
3. Find the code]]> </ b: skin> or </ style>
4. place the following code right above it
/* CSS Tabs */.tabs, .tably {margin:0 0;}.tabs .tably {padding:0 0;}.tabs-menu {color:#0f9abb;padding:0 0;margin:0;margin-bottom:0;border:1px solid #e0e0e0;}.tabs-menu li {margin-bottom:0;margin-top:0;font-size:14px;font-family:'Oswald';font-weight:400;text-transform:uppercase;height:37px;line-height:37px;width:33.3%;list-style:none;text-align:center;display:inline-block;padding:0 0;background:transparent;color:#0f9abb;cursor:pointer;position:relative;transition:all 0.1s linear;}.tabs-menu li:hover {background:#363636;color:#fff;}.tabs-menu .active-tab {background:#0fa9cd;color:#fff;}.tabs-menu .active-tab:hover {background:#10b1d7;color:#fff;}.tabs-menu .active-tab:after {top:100%;left:50%;border:solid transparent;content: " ";height:0;width:0;position:absolute;pointer-events:none;border-color: rgba(136,183,213,0);border-top-color:#0fa9cd;border-width:8px;margin-left:-8px;}.tabs-content {padding:10px;background:#f9f9f9;border:1px solid #e0e0e0;border-top:none;margin-bottom:15px;}.tabs-content .sidebar li {margin:0 0;padding:0 0 0 0;}.tabs-content .widget li {background:#f9f9f9;color:#666;float:none!important;}.tabs-content .widget ul {background:#f9f9f9;color:#666;overflow:visible;}.tabs-content .Label li {background:#f9f9f9;color:#666;float:left;padding:5px;margin-left:3px;text-align:left;width:44%;transition:.3s linear;}
5. Place the following code above the </ head>
6. Place the following code just above the </ body><script type='text/javascript'>$(function() {$(".tabs-1").mtabs();});</script>
7. Then again put the following code right below the <aside id = 'sidebar-wrapper'> or <div id = 'sidebar-wrapper'><script type='text/javascript'>//<![CDATA[!function(a){"use strict";var b=function(b,c){var d=this;d.element=b,d.$element=a(b),d.tabs=d.$element.children(),d.options=a.extend({},a.fn.mtabs.defaults,c),d.current_tab=0,d.init()};b.prototype={init:function(){var a=this;a.tabs.length&&(a.build(),a.buildTabMenu())},build:function(){var b=this,c=b.options,d=c.tab_text_el,e=c.container_class;b.tab_names=[],b.$wrapper=b.$element.wrapInner('<div class="'+e+'" />').find("."+e),b.tabs.wrapAll('<div class="'+c.tabs_container_class+'" />'),b.tabs.each(function(c,e){var f,g=a(e),h=d;f=g.find(h).filter(":first").hide().text(),b.tab_names.push(f)}),a.isFunction(c.onReady)&&c.onReady.call(b.element)},buildTabMenu:function(){for(var b,c=this,d=c.options,e=d.tabsmenu_el,f=c.tab_names,g="<"+e+' class="'+d.tabsmenu_class+'">',h=0,i=f.length,j=function(){var a=arguments;return d.tmpl.tabsmenu_tab.replace(/\{[0-9]\}/g,function(b){var c=Number(b.replace(/\D/g,""));return a[c]||""})};i>h;h++)g+=j(h+1,f[h]);g+="</"+e+">",c.$tabs_menu=a(g).prependTo(c.$wrapper),b=c.$tabs_menu.find(":first")[0].nodeName.toLowerCase(),c.$tabs_menu.on("click",b,function(b){var d=a(this),e=d.index();c.show(e),b.preventDefault()}).find(":first").trigger("click")},show:function(b){var c=this,d=c.options,e=d.active_tab_class;c.tabs.hide().filter(":eq("+b+")").show(),c.$tabs_menu.children().removeClass(e).filter(":eq("+b+")").addClass(e),a.isFunction(d.onTabSelect)&&b!==c.current_tab&&d.onTabSelect.call(c.element,b),c.current_tab=b},destroy:function(){var a=this,b=a.options.tab_text_el;a.$tabs_menu.remove(),a.tabs.unwrap().unwrap(),a.tabs.removeAttr("style"),a.tabs.children(b+":first").removeAttr("style"),a.$element.removeData("mtabs")}},a.fn.mtabs=function(c,d){return this.each(function(){var e,f=a(this),g=f.data("mtabs");e="object"==typeof c&&c,g||f.data("mtabs",g=new b(this,e)),"string"==typeof c&&g[c](d)})},a.fn.mtabs.defaults={container_class:"tabs",tabs_container_class:"tabs-content",active_tab_class:"active-tab",tab_text_el:"h1, h2, h3, h4, h5, h6",tabsmenu_class:"tabs-menu",tabsmenu_el:"ul",tmpl:{tabsmenu_tab:'<li class="tab-{0}"><span>{1}</span></li>'},onTabSelect:null}}(window.jQuery,window,document);//]]></script>
8. Save Template<div class='tabs tabs-1'><b:section class='tably tably-1 section animated fadeIn' id='tably-1' showaddelement='yes'/><b:section class='tably tably-2 section animated fadeIn' id='tably-2' showaddelement='yes'/><b:section class='tably tably-3 section animated fadeIn' id='tably-3' showaddelement='yes'/></div>
9. To set the widget into the page layout
10. Then click the Add Widgets
11. Done.
