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.
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!
Jika ada yang kurang jelas silahkan ditanyakan dikolom komentar.
Cara Memasang Widget Sidebar Multi Tab |
Langkah-langkah Memasang Widget Sidebar Multi Tabs:
- Login ke akun blogger anda lalu pilih menu Template - Edit HTML.
- Tambahkan script di bawah ini sebelum kode
</head>
<script type='text/javascript'> $(function() { $(".set-1").mtabs(); }); </script>
- 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;}
- Selanjutnya letakkan kode berikut ini pada bagian sidebar yang diinginkan.
Misalnya anda meletakkan seperti gambar berikut:<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>
- 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>
- Lalu Simpan template.
- 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.
Jika ada yang kurang jelas silahkan ditanyakan dikolom komentar.
Posting Komentar untuk "Cara Cepat Memasang Widget Sidebar Multi Tab"