Cara Membuat Tab View Keren di Blog

Cara Membuat Tab View Keren di Blog – Tab view merupakan sebuah mode transformasi sebuah desain pada blog, yang di dalamnya memuat beberapa widget yang disusun menjadi satu kesatuan.

Lebih mudahnya, sobat akan menemukan beberapa widget yang disusun secara berurutan namun di dalam wadah yang sama.

Silakan sobat lihat di situs Forum ini, di bagian sidebar paing atas, akan terdapat tiga buah penampakan Tab View elegan dan keren.

Untuk lebih jelasnya lagi, silakan lihat Demo dengan variasi mode berbeda, yang hanya menampilkan variasi desain Entri populer.

Cara Mudah Membuat Tab View Keren di Sidebar Blog

.set, .panel {
margin: 0 0;
}
.tabs .panel {
padding:0 0;
}
.tabs-menu {
border-bottom:3px solid #E73138;
padding: 0 0;
margin:0 0;
}
.tabs-menu li {
font:$(sidebar.title.font);
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 3px 0 0;
padding:10px;
background:#fff;
border:1px solid #726C6C;
border-bottom:none !important;
color:$(sidebar.title.text.color);
cursor:pointer;
position:relative;
}
.tabs-menu .active-tab {
background:#E73138;
border:1px solid #E73138;
border-bottom:none !important;
color:#fff;
}
.tabs-content {
padding:10px 0;
}
.tabs-content .widget li {
float:none !important;
margin:5px 0;
}
.tabs-content .widget ul {
overflow:visible;
}

4. Copas kode di bawah ini dan letakkan tepat di atas kode </head>

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’/>
<script type=’text/javascript’>
$(function() {
$(&quot;.set-1&quot;).mtabs();
});
</script>

5. Copas kode di bawah ini dan letakkan tepat di atas kode </body>

<script type=’text/javascript’>
//<![CDATA[
/*! Matt Tabs v2.2.1 | https://github.com/matthewhall/matt-tabs */
!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>

6. Copas kode di bawah ini dan letakkan tepat di atas kode <b:section class=’sidebar’ id=’sidebar’> atau kode <b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
7. Save template
8. Silakan sobat buka halaman tata letak (layout).
9. Silakan perhatikan. Akan ada 3 area widget baru. Silakan tambahkan widget sesuai keinginan

Tampilan Tab view

10. Save

Saya kira demikian tips desain blog kali ini, khususnya tentang Cara Membuat Tab View Keren di Blog. Semoga bermanfaat.

Simak juga cara membuat menu navigasi ala Mas Sugeng di Evo Magz.

Salam.