Cara Cepat Memasang Widget Sidebar Multi Tab

Selamat sore sobat blogger semuanya. Untuk membantu sobat blogger yang sedang mendesain blognya (khususnya pemula) coz kalo master pasti udah pada bisa saya akan berbagi sedikit tips cara gampang memasang widget sidebar multi tab.

Cara Memasang Widget Sidebar Multi Tab

Tutorial yang akan sampaikan sangat mudah sobat hanya perlu mengikuti langkah-langkahnya saja, dan selebihnya anda hanya tinggal mengutak-atik kode CSSnya saja. Langsung saja simak turorialnya!

Langkah-langkah Memasang Widget Sidebar Multi Tabs:

1. Login ke akun blogger anda lalu pilih menu Template - Edit HTML.
2. Tambahkan script di bawah ini sebelum kode </head>
   

   <script type='text/javascript'>
   $(function() {
   $(".set-1").mtabs();                                
   });
   </script>

3. selanjutnya copy kode CSS di bawah lalu pastekan tepat diatas kode ]]></b:skin> untuk mempermudah mencarinya gunakan Ctrl+F
   

   /* Tab Menu */
   .set, .panel {margin: 0;}
   .tabs .panel {padding:0;}
   .tabs-menu {border-bottom:3px solid #009900;text-transform:uppercase;margin:0;}
   .tabs-menu li {width:25%;;text-align:center;display: inline-block;*display: inline;zoom: 1;margin: 0;padding:6px 10px;background:#fff;border:1px solid #e5e5e5;border-bottom:none !important;color:#000000;cursor:pointer;position:relative;}
   .tabs-menu .active-tab {background:#009900;border:1px solid #eeeeee;border-bottom:none !important;color:#fff;}
   .tabs-content {padding:10px 0;}
   .tabs-content .widget li {float:none !important;margin:5px 0;list-style:none}
   .tabs-content .widget ul {overflow:visible;}

4. Selanjutnya letakkan kode berikut ini pada bagian sidebar yang diinginkan.

   <div class='set set-1'>
   <b:section class='panel panel-1' id='panel-1' maxwidgets='1' preferred='yes'/>
   <b:section class='panel panel-2' id='panel-2' maxwidgets='1' preferred='yes'/>
   <b:section class='panel panel-3' id='panel-3' maxwidgets='1' preferred='yes'/>
   </div>

   Misalnya anda meletakkan seperti gambar berikut:
   
5. Selanjutnya copy script berikut dan letakkah sebelum kode </body>
   

   <script type='text/javascript'>
   //<![CDATA[
   /*! Matt Tabs v2.2.1 | https://github.com/matthewhall/matt-tabs */
   !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>

6. Lalu Simpan template.
7. Langkah selanjutnya klik menu Page Elemen / Tata Letak, maka akan terdapat panel-1, panel-2, dan panel-2. Silahkan tambahkan Gadget pada masing-masing panel sesuai keinginan sobat seperti: Popular Post, Archive, Label, dll.

Untuk menyesuaikan dengan template blog sobat, sobat bisa mengganti kode CSS yang dianggap perlu. Demikian sedikit tutorial cara mudah memasang widget sidebar multi tabs. Semoga bermanfaat!

Jika ada yang kurang jelas silahkan ditanyakan dikolom komentar.