Cara Membuat Menu Multitab Di Sidebar Blog

Zona Internetku No Comment September 30, 2018

Cara Membuat Menu Multitab Di Sidebar Blog. Menu Multitab merupakan sebuah menu yang terdiri dari beberapa tab yang di dalamnya bisa digunakan untuk meletakkan widget pada blog kita supaya lebih terlihat simpel dan untuk menghemat ruang atau tempat yang akan digunakan untuk widget lainnya, biasanya menu multitab ini di pasang pada bagian sidebar dan juga footer blog.

Menu multitab ini memang memiliki kelebihan tersendiri yaitu untuk membuat tampilan banyak widget menjadi lebih minimaslis, tapi menu ini juga memiliki sedikit kekurangan yaitu membuat blog manjadi sedikit agak lemo karena kode ini disusun dari css dan juga javascript. Apabila kalian masih ingin memasang menu multitab untuk dipasang di blog kalian, maka kalian bisa memasangnya dengan mengikuti tutorial di bawah ini.

Baca juga :
Cara Memasang Kotak Iklan Responsive Di Blog
Cara Membuat Related Post Untuk Blogspot
Cara Mengubah Widget Popular Post Menjadi Keren

Cara Mudah Untuk Memasang Menu Multitab Dengan Title Otomatis Widget Di Sidebar Blog

1. Pertama, Masuk ke dalam blog kalian
2. Selanjutnya kalian cari kode ]]</b:skin> atau </style> dan letakkan kode berikut ini di atasnya

/* 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;line-height:25px;width:auto;list-style:none;display:inline-table;padding:5px;background:#00a1d7;color:#fff;cursor:pointer;position:relative;transition:all .3s;}
.vitabs-menu li:nth-child(3) {background:#00a1d7;color:#fff;}
.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:&#39;\f006&#39;;}
.vitabs-menu li:nth-child(2):before {content:&#39;\f09e&#39;;}
.vitabs-menu li:nth-child(3):before {content:&#39;\f0e6&#39;;}
.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;}

3. Kemudian salin kode berikut ini dan letakkan kode berikut ini di atas kode tag </head>

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

4. Langkah selanjutnya, kalian letakkan kode berikut ini di bagian dalam sidebar wrapper kalian
Perhatian : Biasanya sidebar wrappper di beri nama "Sidebar Wrapper" pada atribut Id atau Class. Perlu di ingat juga bahwa setiap template memiliki atribut yang berbeda
Contoh : <div id='sidebar-wrapper'> atau <aside id='sidebar-wrapper'> bisa juga <div class='sidebar-wrapper'> atau <aside class='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>

5. Tahap berikutnya adalah letakkan kode berikut 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.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. Setelah semua dirasa sudah selesai dan tidak ada masalah, silahkan kalian klik "Simpan Tema" kemudian refresh halaman browser kalian dan masuk ke dalam menu "Tata Letak"

Hasil Cara Membuat Menu Multitab Di Sidebar Blog

Jika menu bagian multitab pada sidebar sudah muncul, itu berarti anda sudah berhasil menerapkan tutorial ini
Itulah tutorial mengenai Cara Membuat Menu Multitab Di Sidebar Blog.

Baca juga :
Cara Menambahkan Widget Latest Post Di Blog
Cara Membuat Widget Author Box Keren Di Blog
6 Cara Memasang Social Media Share Button Pada Blog

Referensi :
30 September 2018 http://newjohnywuss.blogspot.com/2015/10/kode-membuat-multi-tab-di-sidebar-blog.html

Promo Menarik