Cara Membuat Responsive Multi Tabs Di Sidebar Blog Seperti Arlina design

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Cara Membuat Responsive Multi Tabs Di Sidebar Blog Seperti Arlina design, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang Blogger, CSS, Desain Blog, Javascript, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Memasang multi tabs pada sidebar blog memang sangat berguna untuk Anda yang ingin memasang lebih banyak widget pada template blog Anda. Tidak hanya membuat blog Anda menjadi simple, multi tabs ini sudah saya modifikasi seperti multi tabs Blog Arlina Design, bila Anda tau multi tab ala Arlina Design pastinya Anda ingin memasang multi tab ini ke blog Anda.

Yaps seperti yang Anda lihat di atas, ada 3 kolom tabs yang bisa Anda liat. Di setiap tabsnya akan ada 1 widget yang bisa Anda terapkan pada kolom tabs tersebut, jika Anda ingin menambahkan widget juga tidak apa-apa.

Membuat Multi Tabs Ala Arlina Design

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Copy kode CSS di bawah ini dan Anda terapkan di atas kode ]]></b:skin> 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;}

Langkah kedua :

Sekarang copy kedua javscript di bawah ini, dan pastekan 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>

Langkah ketiga :

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'>, bila tidak menemukan kode tersebut silakan Anda ketik sidebar' pada kolom pencarian

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

Silakan pilih widget yang ingin Anda gunakan pada widget multi tabs ini, semoga bermanfaat.