Cara Membuat Multi Tab di Sidebar Blog

Posted by New Johny Wuss

Cara Membuat Multi Tab di Sidebar Blog.  Mengirit space sehingga sidebar jadi efisien.

Cara Membuat Multi Tab di Sidebar Blog. Demo penampakannya ada di bawah posting.

1. KODE CSS

Di bawah ]]></b:skin> atau </style>

/* 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:29%;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;}

2. KODE JAVASCRIPT
Sebelum </head>

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

3. Masih KODE JS
Sebelum </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>

4. KODE HTML
Di bawah kode <div id='sidebar-wrapper'> atau <aside id='sidebar-wrapper'> atau <div class='column-right-inner'> atau <div class='sidebar-inner'>

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

Kode Membuat Multi Tab di Sidebar Blog

» Thanks for reading: Cara Membuat Multi Tab di Sidebar Blog
Previous
« Prev Post
CB Blogger
New Johny WussUpdated: October 11, 2015

0 comments:

Post a Comment

Follow & Get Update by Email

CB