Cara Membuat Tab View Keren di Blog

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

Caranya cukup mudah kok, nih silakan terapkan secara seksama dan dalam tempo yang sesingkat-singkatnya, hehe:

1. Login akun blogger
2. Pilih template > mode HTML
3. Copas kode di bawah ini dan letakkan tepat di atas kode </b:skin>
.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

Cara Membuat Tab View Keren di Blog
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.

1 Response to "Cara Membuat Tab View Keren di Blog"

Silakan masukkan komentar Sobat di sini!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Hosting Unlimited Indonesia