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.
0 Komentar