Home » , » Cara Membuat Sidebar Multi Tab

Cara Membuat Sidebar Multi Tab

Written By Admin on Saturday 26 July 2014 | 01:00

Sidebar Multi Tab - Kali ini saya akan membagikan tutorial Cara Membuat Sidebar Multi Tab, Sidebar Multi Tab bisa anda lihat contohnya di sidebar blog ini. Caranya cukup mudah langsung saja tutorialnya:

Sidebar Multi Tab 

1. Masuk ke blogger
2. Pilih template >> Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. letakkan kode dibawah ini tepat diatasnya
/* CSS Tabs */
.tabs, .tably {margin:0 0;}
.tabs .tably {padding:0 0;}
.tabs-menu {color:#0f9abb;padding:0 0;margin:0;margin-bottom:0;border:1px solid #e0e0e0;}
.tabs-menu li {margin-bottom:0;margin-top:0;font-size:14px;font-family:&#39;Oswald&#39;;font-weight:400;text-transform:uppercase;height:37px;line-height:37px;width:33.3%;list-style:none;text-align:center;display:inline-block;padding:0 0;background:transparent;color:#0f9abb;cursor:pointer;position:relative;transition:all 0.1s linear;}
.tabs-menu li:hover {background:#363636;color:#fff;}
.tabs-menu .active-tab {background:#0fa9cd;color:#fff;}
.tabs-menu .active-tab:hover {background:#10b1d7;color:#fff;}
.tabs-menu .active-tab:after {top:100%;left:50%;border:solid transparent;
content: &quot; &quot;;height:0;width:0;position:absolute;pointer-events:none;border-color: rgba(136,183,213,0);border-top-color:#0fa9cd;border-width:8px;margin-left:-8px;}
.tabs-content {padding:10px;background:#f9f9f9;border:1px solid #e0e0e0;border-top:none;margin-bottom:15px;}
.tabs-content .sidebar li {margin:0 0;padding:0 0 0 0;}
.tabs-content .widget li {background:#f9f9f9;color:#666;float:none!important;}
.tabs-content .widget ul {background:#f9f9f9;color:#666;overflow:visible;}
.tabs-content .Label li {background:#f9f9f9;color:#666;float:left;padding:5px;margin-left:3px;text-align:left;width:44%;transition:.3s linear;}

5. Letakkan kode dibawah ini diatas </head>
<script type='text/javascript'>
$(function() {
$(&quot;.tabs-1&quot;).mtabs();                                
});
</script>
6. Letakkan kode dibawah ini tepat diatas </body>
<script type='text/javascript'>
//<![CDATA[
!function(a){"use strict";var b=function(b,c){var d=this;d.element=b,d.$element=a(b),d.tabs=d.$element.children(),d.options=a.extend({},a.fn.mtabs.defaults,c),d.current_tab=0,d.init()};b.prototype={init:function(){var a=this;a.tabs.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.tabs.wrapAll('<div class="'+c.tabs_container_class+'" />'),b.tabs.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.tabsmenu_el,f=c.tab_names,g="<"+e+' class="'+d.tabsmenu_class+'">',h=0,i=f.length,j=function(){var a=arguments;return d.tmpl.tabsmenu_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.$tabs_menu=a(g).prependTo(c.$wrapper),b=c.$tabs_menu.find(":first")[0].nodeName.toLowerCase(),c.$tabs_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.tabs.hide().filter(":eq("+b+")").show(),c.$tabs_menu.children().removeClass(e).filter(":eq("+b+")").addClass(e),a.isFunction(d.onTabSelect)&&b!==c.current_tab&&d.onTabSelect.call(c.element,b),c.current_tab=b},destroy:function(){var a=this,b=a.options.tab_text_el;a.$tabs_menu.remove(),a.tabs.unwrap().unwrap(),a.tabs.removeAttr("style"),a.tabs.children(b+":first").removeAttr("style"),a.$element.removeData("mtabs")}},a.fn.mtabs=function(c,d){return this.each(function(){var e,f=a(this),g=f.data("mtabs");e="object"==typeof c&&c,g||f.data("mtabs",g=new b(this,e)),"string"==typeof c&&g[c](d)})},a.fn.mtabs.defaults={container_class:"tabs",tabs_container_class:"tabs-content",active_tab_class:"active-tab",tab_text_el:"h1, h2, h3, h4, h5, h6",tabsmenu_class:"tabs-menu",tabsmenu_el:"ul",tmpl:{tabsmenu_tab:'<li class="tab-{0}"><span>{1}</span></li>'},onTabSelect:null}}(window.jQuery,window,document);
//]]>
</script>
7. Lalu letakkan lagi kode dibawah ini tepat dibawah <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>
<div class='tabs tabs-1'>
  <b:section class='tably tably-1 section animated fadeIn' id='tably-1' showaddelement='yes'/>
<b:section class='tably tably-2 section animated fadeIn' id='tably-2' showaddelement='yes'/>
<b:section class='tably tably-3 section animated fadeIn' id='tably-3' showaddelement='yes'/>
</div>
8. Simpan Template
9. Untuk mengatur Widgetnya masukke halaman Tata Letak
10. Lalu klik Tambahkan Widget
11. Selesai.

DEMO

Terima Kasih semoga bermanfaat....

19 komentar:

  1. gan, pas di step 7 ga ada kode itu gan ane dah ctrl+f

    ReplyDelete
  2. gan, pas di step 7 ga ada kode itu gan ane dah ctrl+f

    ReplyDelete
    Replies
    1. +dandi aditya itu tergantung template ente gan, coba cari aja kode pembuka dari sidebar ente letakkun situ aja

      Delete
  3. Mantaap sekali gan artikelnya, sangat membantu sekali
    Izin nyimak saja ya gan :)

    ReplyDelete
  4. Manteep sob untuk informasi artikelnya :)

    ReplyDelete
  5. Keren sob artikelnya, ditunggu artikel yang lainnya

    ReplyDelete
  6. thanks ya gan, sukses
    jangan lupa kunjungi blog aku yah
    http://blognufin.blogspot.com/

    ReplyDelete
  7. ilmu yang sangat bermanfaat sekali nih, terimakasih gan :)

    ReplyDelete
  8. Keren sob artikelnya, izin nyimaknya :)
    http://goo.gl/n3Bp8g

    ReplyDelete
  9. Terimakasih banyak mas, sangat membantu sekali artikelnya..

    ReplyDelete
  10. Thanks sob informasinya, sangat membantu :)
    http://goo.gl/yeUiCg

    ReplyDelete
  11. tutorial disini sangat membantu gan, sangat mudah di praktekin.

    ReplyDelete