Cara Memasang Multi Tab pada Sidebar Blog

Pada kali ini Blog Billy-Art akan menjelaskan secara rinci tentang Cara Memasang Multi Tab pada Sidebar Blog. Yang beberapa hari ini baru saya terapkan di Blog ini.

Demo Multi Tab Sidebar

Nah saya akan menjelaskan terlebih dahulu apasih Multi Tab pada Sidebar? Multi Tab sendiri artinya bisa dibilang Banyak Tab dan Sidebar sendiri yaaa.. disisi kanan kiri blog itu sidebar biasanya sih kebanyakan sidebar blog di bagian kanan, Fungsi dari Memasang Multi Tab Sidebar ini adalah untuk menghemat ruang, Jika sobat misalnya terlalu banyak menambahkan widget pada blog sobat yang biasanya akan memanjang kebawah, maka Multi Tab Sidebar ini adalah solusinya untuk menghemat ruang widget yang memanjang kebawah tersebut. Dan tentunya akan membuat tampilan blog sobat lebih rapi dan menarik.

Yuk langsung aja kita masuk pada cara pemasangnya cekkidot...

1. Pertama kalian masuk ke Blogger > Template > Edit HTML

2. Cari kode  ]]></b:skin>

3. Lalu kamu 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:34%;list-style:none;text-align:center;display:inline-block;padding:5px;background:#00a1d7;color:#fff;cursor:pointer;position:relative;transition:all .3s}
.vitabs-menu li:nth-child(3) {background:#00a1d7;color:#fff;width:32%;}
.vitabs-menu li:hover {background:#00a1d7;}
.vitabs-menu li:nth-child(3):hover {background:#0b96c5;}
.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;}

KETERANGAN : 

Ubah \f006, \f09e, dan \f0e6 dan lainnya dengan font awesome yang sobat inginkan disini
Ubah #00a1d7 dengan warna yang sobat inginkan disini
Ubah width:34% untuk ukuran lebar pada Tab sidebarnya

4. Letakkan kode dibawah ini diatas </head>

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

5. Next, letakkan kode dibawah ini diatas </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>

6. Terakhir, silahkan kalian letakkan kode dibawah ini diatas kode <div id='sidebar-wrapper'

<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>

7. Simpan Template

8. Silahkan kamu atur kembali Tata Letak widget unttuk Multi Tab Sidebar Disarankan widget jangan dikasih judul supaya tetap terlihat rapih.

Tata Letak Multi Tab Sidebar

Sekian tutorial tentang Cara Memasang Multi Tab Sidebar Widget selamat mencoba! 

Tweet