Cara Membuat Tab View di Blog dengan Mudah Otomatis di Tata Letak - Tab View adalah sebuah fitur yang digunakan untuk meletakan berbagai widget yang tujuannya adalah untuk mempersingkat ruang pada blog ataupun untuk memperindah tampilan blog agar terlihat lebih elegan dan profesional. Tab View pada tutorial ini adalah Tab View 3 Kolom dengan otomatis berada pada pengaturan tata letak jadi anda tidak perlu mengatur lagi untuk mencari kode html widget yang akan anda pasang, berbeda dengan tutorial tab view yang kebanyakan di Google kebanyakan tutorialnya adalah agak ribet, tapi pada tutoriaal ini kita hanya perlu memasukan beberapa script CSS, Javascript, dan HTML ke dalam template kita yang nantinya akan otomatis Tab View tersebut berada pada tata letak di blog kita. Script Tab View 3 kolom ini saya ambil langsung dari salah satu template Mas Sugeng yaitu template Evo Magz dan bisa dibilang juga ini adalah Tab View Versi template Evo Magz.
untuk melihat bagaimana tampilan atau demo dari Tab View ini anda bisa melihatnya langsung pada bagian sidebar blog saya ini atau bisa juga melihat di Template buat mas sugeng seperti Evo Magz.
atau bila anda tidak ingin ribet mengedit template hanya untuk mendapatkan Tab View ini, anda juga bisa mendapatkan Template dengan fitur tab view ini di template yang dibuat oleh mas sugeng.
jadi bila anda menggunakan Tab View ini maka anda bisa mempersempit ruangan di blog anda dengan meletakan widget widget yang anda gunakan pada tab view ini.
kira-kira seperti itu penjelasan tentang Tab View dan selanjutnya adalah tutorial membuat tab view di blog dengan mudah dan otomatis pada tata letak dengan 3 kolom, simak dan ikuti tutorial ini dan jangan sampai salah meletakan script - script yang akan digunakan.
Cara Membuat Tab View di Blog dengan Mudah Otomatis di Tata Letak
1. Sebelumnya, simpan atau cadangkan template anda terlebih dahulu agar bila terjadi kesalahan anda bisa membackup template anda sebelumnya dengan cara menuju ke Template > pada bagian pojok kanan atas klik cadangkan / pulihkan kemudian pilih unduh template lengkap
2. Jika sudah membackup template anda selanjutnya adalah memasukan script untuk Tab Viewnya pada template. Buka Template > Edit Html. Kemudian cari kode </b:skin> dengan cara menekan Ctrl + F dan ketik </b:skin> bila seudah ketemu, copy script dibawah ini dan paste 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;
}
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;
}
3. Selanjutnya cari </head> dengan cara yang sama yaitu menekan ctrl + f dan ketik </head>, bila sudah ketemu selanjtnya copy dan paste script dibawah ini tepat diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<script type='text/javascript'>
$(function() {
$(".set-1").mtabs();
});
</script>
<script type='text/javascript'>
$(function() {
$(".set-1").mtabs();
});
</script>
4. selanjutnya, cari kode </body> dan bila sudah ditemukan copy dan paste kode script dibawah ini tepat diatas </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>
//<![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>
5. terakhir, yaitu memasukan Tab View pada Tata letak caranya adalah cari kode sidebar pada template anda biasanya kode untuk tata letak sidebar adalah
<b:section class='sidebar' id='sidebar'>
atau bisa juga
<b:section class='sidebar' id='sidebar' preferred='yes'>
intinya cari saja sript yang sejenis seperti diatas yang berisi sidebar
Jika sidebar sudah ditemukan, selanjutnya copy dan paste script dibawahini dan taruh script ini diatas Sidebar template anda.
<div class='set set-1'>
<b:section class='panel panel-1' id='panel-1' maxwidgets='1' preferred='yes'/>
<b:section class='panel panel-2' id='panel-2' maxwidgets='1' preferred='yes'/>
<b:section class='panel panel-3' id='panel-3' maxwidgets='1' preferred='yes'/>
</div>
<div class='clear'/>
<b:section class='panel panel-1' id='panel-1' maxwidgets='1' preferred='yes'/>
<b:section class='panel panel-2' id='panel-2' maxwidgets='1' preferred='yes'/>
<b:section class='panel panel-3' id='panel-3' maxwidgets='1' preferred='yes'/>
</div>
<div class='clear'/>
dan kira-kira seperti ini jadinya
6. Jika semua script sudah dimasukan silahkan simpan tempalte anda dengan cara menekan Simpan Template
7. Selanjutnya mari kita cek pada bagian Tata Letak apakah sudah terdapat Tab View yang kita tambahkan tadi silahkan menuju ke Tata Letak dan lihatlah apakah sudah terdapat tab viewnya, bila sudah nantinya akan ada panel-1, panel-2, dan panel-3 jika belum terdapat silahkan reload web browser anda dengan cara menekan F5 atau silahkan cek kembali script-script yang sudah anda simpan tadi apakah sudah benar atau masih ada yang kurang. Dan bila berhasil maka tampilan pada Tata Letak akan seperti gambar dibawah ini.
8. Dan bila anda melihat pada bagian Home Page Blog anda maka hasilnya seperti gambar dibawah, dan jika Tab View sudah tampil maka anda sudah berhasil membuatnya dan selanjutnya adalah anda hanya perlu meletakan Widget-widget yang akan anda gunakan.
9.Langkah terakhir adalah menambahkan widget-widget yang akan anda gunakan pada blog anda dan taruhlah masing-masing widget pada tab tab view yang anda buat tadi.
10. dan lihat bagaimana hasilnya..
nah kira-kira itu dia tutorial Cara Membuat Tab View di Blog dengan Mudah Otomatis di Tata Letak yang sebarnya ribet bagi anda yang masih awam di dunia blog, tapi dengan mengikuti tutorial tadi dengan benar maka hasilnya pun juga berhasil, dan semoga artikel yang saya buat ini membantu anda dan bila anda kebingungan dalam membuat tab view ini anda bisa bertanya melalui komentar di bawah.
Sekian dulu Cara Membuat Tab View di Blog dengan Mudah Otomatis di Tata Letak dari saya. Terima kasih karna telah berkunjung ke Blog Saya Saya sangat Berterima Kasih jika Anda Meninggalkan Komentar :) Terima Kasih yg sudah berkunjung di Blog Saya, jangan lupa Comment And Share ! :D
