Membuat Sidebar Multi Tab Ala Arlina Design

Membuat Sidebar Multi Tab Ala Arlina Design - Oke kali ini saya akan memposting cara Membuat Sidebar Multi Tab Ala Arlina Design, sebenarnya tutorial ini saya dapat dari blog Click and Skip dan saya edit edit dikit ngambil source dari blog Arlina Design, 

Oke langsung saja kita lihat toturialnya : 

1. Masuk ke blogger

2. Pilih template >> Edit HTML

3. Cari kode ]]></b:skin> atau </style>

4. letakkan kode dibawah ini tepat diatasnya

/* CSS Multi Tabs */
.vitabs, .vita-list {margin:0;}
.vitabs .vita-list {padding:0;}
.vitabs-menu {padding:0 0;margin:0;margin-bottom:0;border:1px solid #f1f1f1;border-bottom:0;}
.vitabs-menu li{margin:0;font-size:13px;font-family:'Open Sans';font-weight:400;text-transform:uppercase;height:40px;line-height:40px;width:29%;list-style:none;text-align:center;display:inline-block;padding:5px;background:#29abe2;color:#fff;cursor:pointer;position:relative;transition:all .3s}
.vitabs-menu li:nth-child(3) {background:#2c3031;color:#fff;width:32%;}
.vitabs-menu li:hover {background:#29abe2;}
.vitabs-menu li:nth-child(3):hover {background:#34393a;}
.vitabs-menu .active-tab,.vitabs-menu .active-tab:nth-child(3){background:#fff;color:#858d8f;transition:all .3s}
.vitabs-menu .active-tab:hover,.vitabs-menu .active-tab:nth-child(3):hover {background:#fff;color:#333;}
.vitabs-menu li:before{font-family:Fontawesome;text-align:center;margin-right:5px}
.vitabs-menu li:nth-child(1):before {content:'\f006';}
.vitabs-menu li:nth-child(2):before {content:'\f09e';}
.vitabs-menu li:nth-child(3):before {content:'\f0e6';}
.vitabs-content{padding:10px;background:#fff;margin-bottom:15px;border:1px solid #f1f1f1;border-top:0;}
.vitabs-content .sidebar li {margin:0 0;padding:0 0 0 0;}
.vitabs-content .widget li {background:#fff;color:#333;float:none;}
.vitabs-content .widget li:last-child {border-bottom:none;}
.vitabs-content .widget ul {background:#fff;color:#333;overflow:visible;}

Untuk font awesome, silahkan ganti ke-3 kode seperti \f055 dengan kode font awesome yang sobat inginkan

Untuk Warna, silahkan ganti warna biru #29abe2 dengan warna yang sobat inginkan
 untuk memilih warna sobar bisa klik disini

5. Letakkan Script dibawah ini diatas kode </head>

<script type='text/javascript'>
$(function(){$(&quot;.vitabs-1&quot;).mvitabs()})
</script>

6. Letakkan script dibawah ini diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Simple Tab
!function(a){"use strict";var b=function(b,c){var d=this;d.element=b,d.$element=a(b),d.vitabs=d.$element.children(),d.options=a.extend({},a.fn.mvitabs.defaults,c),d.current_tab=0,d.init()};b.prototype={init:function(){var a=this;a.vitabs.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.vitabs.wrapAll('<div class="'+c.vitabs_container_class+'" />'),b.vitabs.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.vitabsmenu_el,f=c.tab_names,g="<"+e+' class="'+d.vitabsmenu_class+'">',h=0,i=f.length,j=function(){var a=arguments;return d.tmpl.vitabsmenu_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.$vitabs_menu=a(g).prependTo(c.$wrapper),b=c.$vitabs_menu.find(":first")[0].nodeName.toLowerCase(),c.$vitabs_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.vitabs.hide().filter(":eq("+b+")").show(),c.$vitabs_menu.children().removeClass(e).filter(":eq("+b+")").addClass(e),a.isFunction(d.onvitabselect)&&b!==c.current_tab&&d.onvitabselect.call(c.element,b),c.current_tab=b},destroy:function(){var a=this,b=a.options.tab_text_el;a.$vitabs_menu.remove(),a.vitabs.unwrap().unwrap(),a.vitabs.removeAttr("style"),a.vitabs.children(b+":first").removeAttr("style"),a.$element.removeData("mvitabs")}},a.fn.mvitabs=function(c,d){return this.each(function(){var e,f=a(this),g=f.data("mvitabs");e="object"==typeof c&&c,g||f.data("mvitabs",g=new b(this,e)),"string"==typeof c&&g[c](d)})},a.fn.mvitabs.defaults={container_class:"vitabs",vitabs_container_class:"vitabs-content",active_tab_class:"active-tab",tab_text_el:"h1, h2, h3, h4, h5, h6",vitabsmenu_class:"vitabs-menu",vitabsmenu_el:"ul",tmpl:{vitabsmenu_tab:'<li class="tab-{0}"><span>{1}</span></li>'},onvitabselect:null}}(window.jQuery,window,document); //]]> </script> 

7. lalu letakkan HTML dibawah ini diatas kode <aside id='sidebar-wrapper'> atau  <div id='sidebar-wrapper'> atau <div class='column-right-inner'> atau juga <div class='sidebar-inner'>

<div class='vitabs vitabs-1'>
<b:section class='vita-list vita-list-1 section' id='vita-list-1' showaddelement='yes'/>
<b:section class='vita-list vita-list-2 section' id='vita-list-2' showaddelement='yes'/>
<b:section class='vita-list vita-list-3 section' id='vita-list-3' showaddelement='yes'/>   
</div>

8. Simpan Template 
9. Untuk mengatur widgetnya masuk ke halaman tata letak > tambahkan widget
10. .::SELESAI::.

Result

Sekian tips cara Membuat Sidebar Multi Tab Ala Arlina Design, selamat mencoba

Share this