How To Make Tabs in Post Blogger - Halo Pengunjung CodeRaw kali ini saya akan berbagi Cara Membuat Tabs Pada Posting Blogger. Mungkin sudah banyak yang melihat Tabs pada sebuah posting webiste seperti yang berada pada website filehippo, dll. Nah pada kali ini saya akan berbagi cara untuk Posting Blogger.
Tutorial
Langsung saja hal yang pertama Anda lakukan adalah dengan memasukan code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> di atas
</head> . Jika Anda sudah pernah meletakan code jQuery pada Blog Anda, Anda tidak perlu melakukan langkah pertama.
Kedua, Copy CSS berikut di atas code pada langkah pertama.
/*
Structure
--------------------------------------------------
*/
.wrap {
margin: 20px auto;
width: 50%;
}
.set,
.panel {
margin: 0 0 10px;
}
/*
Tabs
--------------------------------------------------
*/
.tabs .panel {padding: 10px;}
.tabs-menu {
border-bottom: 1px solid #ccc;
padding: 0 10px;
}
.tabs-menu li {
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 3px -1px 0;
border: 1px solid #ccc;
border-radius: 3px 3px 0 0;
padding: 6px 12px;
background-color: #ededed;
cursor: pointer;
position: relative;
}
.tabs-menu .active-tab {
background-color: #fff;
border-bottom: 0;
padding-bottom: 7px;
}
Terakhir masukan code berikut ini di atas
</body>
<script type='text/javascript'>$(function(){$(".set-1").mtabs()});</script>
<script type='text/javascript'>
/*! Matt Tabs v2.2.1 | https://github.com/matthewhall/matt-tabs */
!function(d){var c=function(a,f){var e=this;e.element=a,e.$element=d(a),e.tabs=e.$element.children(),e.options=d.extend({},d.fn.mtabs.defaults,f),e.current_tab=0,e.init()};c.prototype={init:function(){var b=this;b.tabs.length&&(b.build(),b.buildTabMenu())},build:function(){var a=this,h=a.options,g=h.tab_text_el,f=h.container_class;a.tab_names=[],a.$wrapper=a.$element.wrapInner('<div class="'+f+'" />').find("."+f),a.tabs.wrapAll('<div class="'+h.tabs_container_class+'" />'),a.tabs.each(function(l,k){var j,i=d(k),b=g;j=i.find(b).filter(":first").hide().text(),a.tab_names.push(j)}),d.isFunction(h.onReady)&&h.onReady.call(a.element)},buildTabMenu:function(){for(var r,q=this,p=q.options,o=p.tabsmenu_el,n=q.tab_names,m="<"+o+' class="'+p.tabsmenu_class+'">',l=0,k=n.length,a=function(){var b=arguments;return p.tmpl.tabsmenu_tab.replace(/\{[0-9]\}/g,function(e){var f=Number(e.replace(/\D/g,""));return b[f]||""})};k>l;l++){m+=a(l+1,n[l])}m+="</"+o+">",q.$tabs_menu=d(m).prependTo(q.$wrapper),r=q.$tabs_menu.find(":first")[0].nodeName.toLowerCase(),q.$tabs_menu.on("click",r,function(f){var h=d(this),g=h.index();q.show(g),f.preventDefault()}).find(":first").trigger("click")},show:function(a){var h=this,g=h.options,f=g.active_tab_class;h.tabs.hide().filter(":eq("+a+")").show(),h.$tabs_menu.children().removeClass(f).filter(":eq("+a+")").addClass(f),d.isFunction(g.onTabSelect)&&a!==h.current_tab&&g.onTabSelect.call(h.element,a),h.current_tab=a},destroy:function(){var f=this,e=f.options.tab_text_el;f.$tabs_menu.remove(),f.tabs.unwrap().unwrap(),f.tabs.removeAttr("style"),f.tabs.children(e+":first").removeAttr("style"),f.$element.removeData("mtabs")}},d.fn.mtabs=function(b,a){return this.each(function(){var j,i=d(this),h=i.data("mtabs");j="object"==typeof b&&b,h||i.data("mtabs",h=new c(this,j)),"string"==typeof b&&h[b](a)})},d.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>
Cara Menggunakannya
Untuk Cara penggunaanya dalam posting adalah klik tombol HTML pada posting
Lalu Masukan Code berikut ini pada tab HTML.
<div class="set set-1">
<div class="panel panel-1" id="panel-1">
<h2>
Tabs1</h2>
Isi Tabs 1
</div>
<div class="panel panel-2" id="panel-2">
<h2>
Tabs2</h2>
Isi Tabs 2
</div>
<div class="panel panel-3 id="panel-3">
<h2>
Tabs3</h2>
Isi Tabs 3
</div>
</div>
Ganti yang berwarna
hijau dengan judul dan isi Tabs Anda.Jika mengalami kesulitan atau error silakan berkomentar ^_^ .
