Cara Memasang Multi Tab Keren dan Responsive Pada Sidebar Blog

Memasang Multi Tab Responsive Pada Sidebar Blog -  Sangat Berguna untuk Blog, Bagaimana tidak dengan multi tab kita bisa menghemat ruang / tampilan pada blog, dengan begitu kalian dapat menambahkan widget-widget yang lain tanpa merusak tampilan blog. Multi Tab yang saya Redesign ini sudah semakin responsive dan dapat kalian rubah sendiri font awesomenya.

seperti yang saya jelaskan diatas, Saya akan redesign 3 Multi Tab yang dapat kalian lihat pada blog INI dan dapat kalian pada blog kalian.

Memasang Multi Tab Keren dan Responsive Pada Blog.

1. Login Blogger > Tema > Edit HTML 
2. Kemudian copy kode dibawah tepat diatas kode ]]></b> atau </style> 

 /* CSS artabs */
.artabs, .arlina-list {margin:0;}
.artabs .arlina-list {padding:0;}
.artabs-menu {padding:0;margin:0;border-bottom:0;}
.artabs-menu li{margin:0;font-size:13px;font-weight:400;text-transform:uppercase;line-height:40px;width:33.3%;list-style:none;text-align:center;display:inline-block;padding:5px 0;background:#3cc091;color:#fff;cursor:pointer;position:relative;transition:all .3s}
.artabs-menu li:nth-child(3) {background:#374760;color:#fff;}
.artabs-menu li:hover {background:#37b185;}
.artabs-menu li:nth-child(3):hover {background:#2a3950;}
.artabs-menu .active-tab,.artabs-menu .active-tab:nth-child(3){background:#fff;color:#858d8f;transition:all .3s}
.artabs-menu .active-tab:hover,.artabs-menu .active-tab:nth-child(3):hover {background:#fff;color:#151515;}
.artabs-menu li:before{font-family:Fontawesome;text-align:center;margin-right:5px}
.artabs-menu li:nth-child(1):before {content:'\f006';}
.artabs-menu li:nth-child(2):before {content:'\f09e';}
.artabs-menu li:nth-child(3):before {content:'\f0e6';}
.artabs-content{padding:10px;background:#fff;margin-bottom:15px;border-top:0;}
.artabs-content .sidebar li {margin:0;padding:0;}
.artabs-content .widget li {background:#fff;color:#151515;float:none;}
.artabs-content .widget li:last-child {border-bottom:none;}
.artabs-content .widget ul {background:#fff;color:#151515;overflow:visible;} 

3. Kemudian letakkan kode dibawah ini di atas 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.artabs=d.$element.children(),d.options=a.extend({},a.fn.martabs.defaults,c),d.current_tab=0,d.init()};b.prototype={init:function(){var a=this;a.artabs.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.artabs.wrapAll('<div class="'+c.artabs_container_class+'" />'),b.artabs.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.artabsmenu_el,f=c.tab_names,g="<"+e+' class="'+d.artabsmenu_class+'">',h=0,i=f.length,j=function(){var a=arguments;return d.tmpl.artabsmenu_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.$artabs_menu=a(g).prependTo(c.$wrapper),b=c.$artabs_menu.find(":first")[0].nodeName.toLowerCase(),c.$artabs_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.artabs.hide().filter(":eq("+b+")").show(),c.$artabs_menu.children().removeClass(e).filter(":eq("+b+")").addClass(e),a.isFunction(d.onartabselect)&&b!==c.current_tab&&d.onartabselect.call(c.element,b),c.current_tab=b},destroy:function(){var a=this,b=a.options.tab_text_el;a.$artabs_menu.remove(),a.artabs.unwrap().unwrap(),a.artabs.removeAttr("style"),a.artabs.children(b+":first").removeAttr("style"),a.$element.removeData("martabs")}},a.fn.martabs=function(c,d){return this.each(function(){var e,f=a(this),g=f.data("martabs");e="object"==typeof c&&c,g||f.data("martabs",g=new b(this,e)),"string"==typeof c&&g[c](d)})},a.fn.martabs.defaults={container_class:"artabs",artabs_container_class:"artabs-content",active_tab_class:"active-tab",tab_text_el:"h1, h2, h3, h4, h5, h6",artabsmenu_class:"artabs-menu",artabsmenu_el:"ul",tmpl:{artabsmenu_tab:'<li class="tab-{0}"><span>{1}</span></li>'},onartabselect:null}}(window.jQuery,window,document); //]]> </script> 

 <script type='text/javascript'>
$(function(){$(".artabs-1").martabs()})
</script> 

4. Langkah terakhir adalah, memasang kode untuk memanggil multi tabs ini. Silakan copy dan pastekannya di bawah kode <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'> atau <div class='sidebar-inner'>. Cara termudah mencari kode tersebut kalian dapat menggunakan pencarian yaitu klik CTRL + F kemudian pastekan kode yang akan kalian cari.

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

Silakan Anda Save Template. Selanjutnya silakan Anda ke Tata Letak, lalu Anda refresh terlebih dahulu biar keluar tampilan widget Arlina-list-1 sampai Arlina-list-3. Apabila sudah muncul Selamat Kalian Berhasil.

Apa bila kalian ingin merubah Font awesome kalian dapat merubah kode dibawah ini :  

/* CSS artabs */
.artabs, .arlina-list {margin:0;}
.artabs .arlina-list {padding:0;}
.artabs-menu {padding:0;margin:0;border-bottom:0;}
.artabs-menu li{margin:0;font-size:13px;font-weight:400;text-transform:uppercase;line-height:40px;width:33.3%;list-style:none;text-align:center;display:inline-block;padding:5px 0;background:#3cc091;color:#fff;cursor:pointer;position:relative;transition:all .3s}
.artabs-menu li:nth-child(3) {background:#374760;color:#fff;}
.artabs-menu li:hover {background:#37b185;}
.artabs-menu li:nth-child(3):hover {background:#2a3950;}
.artabs-menu .active-tab,.artabs-menu .active-tab:nth-child(3){background:#fff;color:#858d8f;transition:all .3s}
.artabs-menu .active-tab:hover,.artabs-menu .active-tab:nth-child(3):hover {background:#fff;color:#151515;}
.artabs-menu li:before{font-family:Fontawesome;text-align:center;margin-right:5px}
.artabs-menu li:nth-child(1):before {content:'\f006';}
.artabs-menu li:nth-child(2):before {content:'\f09e';}
.artabs-menu li:nth-child(3):before {content:'\f0e6';}
.artabs-content{padding:10px;background:#fff;margin-bottom:15px;border-top:0;}
.artabs-content .sidebar li {margin:0;padding:0;}
.artabs-content .widget li {background:#fff;color:#151515;float:none;}
.artabs-content .widget li:last-child {border-bottom:none;}
.artabs-content .widget ul {background:#fff;color:#151515;overflow:visible;}

Kemudian dapat kalian ganti dengan icon/font awesome lainnya yang bisa kalian lihat pada halaman sayahttp://setyaredzgn.blogspot.co.id/p/font-awesome.html.Semoga Berhasil dan Selamat Mencoba...!!, Apabila ada kendala Silahkan Bertanya pada kolom Komentar.