advertisement

Cara Membuat Tab View Keren di Blog

By On Sunday, February 7th, 2016 Categories : Internet

PalingPopuler.Com mengabarkan tentang 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, yg di dalamnya memuat beberapa widget yg dberitasun jadi satu kesatuan.

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

advertisement

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

Untuk lebih jelasnya lagi, silakan lihat Demo dengan variasi mode berbeda, yg 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 yg sesingkat-singkatnya, hehe:
1. Login akun blogger
2. Pilih template > mode HTML
3. Copas kode di bawah ini dan letidakkan 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 letidakkan tepat di atas kode </head>

advertisement

<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 letidakkan 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)””);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()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 letidakkan tepat di atas kode <b:section class=’sidebar’ id=’sidebar’> maupun kode <b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
7. Save template
8. Silakan sobat buka halaman tata letidak (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 begitu 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.



Cara Membuat Tab View Keren di Blog
sumber : forumblogindo.com

Pencarian Terkini :

Cara Membuat Tab View Keren di Blog | Admin | 4.5