7/5/15

Cara Memasang Multi Tab Pada Sidebar Blog

Memasang multi tab pada sidebar blog

Selamat Datang Di Newbie Weblog Kali ini Saya akan berbagi Tutorial Blog Yaitu Cara Memasang Multi Tab Pada Sidebar Blog

Manfaat Memasang Multi Tab Ini BIla Kita Memasang Banyak Widget Maka Dengan Memasang Multi Tab ini Kita Bisa Memasang Widget Di Dalam Tab Dan Membuat Blog Menjadi Rapi

Langsung Saja Tidak Usah Lama-lama Cara Penerapanya :

Login Ke Blog terlebih Dahulu > Klik Tempalte pada Dashboard Blog > Edit HTML > Copy Kode CSS Di bawah ini dan Tempatkan Sebelum ]]></b:skin> atau </style> 

/* CSS Multi Tabs */
.vitabs, .vita-list {margin:0;}
.vitabs .vita-list {padding:0;}
.vitabs-menu {padding:0 0;margin:0;margin-bottom:0;border:1px solid #f1f1f1;border-bottom:0;}
.vitabs-menu li{margin:0;font-size:13px;font-family:'Open Sans';font-weight:400;text-transform:uppercase;height:40px;line-height:40px;width:29%;list-style:none;text-align:center;display:inline-block;padding:5px;background:#77bb66;color:#fff;cursor:pointer;position:relative;transition:all .3s}
.vitabs-menu li:nth-child(3) {background:#6aaa5a;color:#fff;width:32%;}
.vitabs-menu li:hover {background:#77bb66;}
.vitabs-menu li:nth-child(3):hover {background:#6aaa5a;}
.vitabs-menu .active-tab,.vitabs-menu .active-tab:nth-child(3){background:#fff;color:#858d8f;transition:all .3s}
.vitabs-menu .active-tab:hover,.vitabs-menu .active-tab:nth-child(3):hover {background:#fff;color:#333;}
.vitabs-menu li:before{font-family:Fontawesome;text-align:center;margin-right:5px}
.vitabs-menu li:nth-child(1):before {content:'\f006';}
.vitabs-menu li:nth-child(2):before {content:'\f09e';}
.vitabs-menu li:nth-child(3):before {content:'\f0e6';}
.vitabs-content{padding:10px;background:#fff;margin-bottom:15px;border:1px solid #f1f1f1;border-top:0;}
.vitabs-content .sidebar li {margin:0 0;padding:0 0 0 0;}
.vitabs-content .widget li {background:#fff;color:#333;float:none;}
.vitabs-content .widget li:last-child {border-bottom:none;}
.vitabs-content .widget ul {background:#fff;color:#333;overflow:visible;}

Kemudian Tempatkan Kode Di Bawah ini Sebelum </head>
<script type='text/javascript'>
$(function(){$(&quot;.vitabs-1&quot;).mvitabs()})
</script>

Copy Kode Dibawah ini Dan tempatkan Dibawah atau setelah kode berikut ini <div id='sidebar-wrapper'>atau<aside id='sidebar-wrapper'>atau<div class='column-right-inner'>atau<div class='sidebar-inner'>
<div class='vitabs vitabs-1'>
<b:section class='vita-list vita-list-1 section' id='vita-list-1' showaddelement='yes'/>
<b:section class='vita-list vita-list-2 section' id='vita-list-2' showaddelement='yes'/>
<b:section class='vita-list vita-list-3 section' id='vita-list-3' showaddelement='yes'/>   
</div>

kemudian Copy Kode Dibawah Dan Tempatkan Sebelum </body>
<script type='text/javascript'>
//<![CDATA[
// Simple Tab

!function(a){"use strict";var b=function(b,c){var d=this;d.element=b,d.$element=a(b),d.vitabs=d.$element.children(),d.options=a.extend({},a.fn.mvitabs.defaults,c),d.current_tab=0,d.init()};b.prototype={init:function(){var a=this;a.vitabs.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.vitabs.wrapAll('<div class="'+c.vitabs_container_class+'" />'),b.vitabs.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.vitabsmenu_el,f=c.tab_names,g="<"+e+' class="'+d.vitabsmenu_class+'">',h=0,i=f.length,j=function(){var a=arguments;return d.tmpl.vitabsmenu_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.$vitabs_menu=a(g).prependTo(c.$wrapper),b=c.$vitabs_menu.find(":first")[0].nodeName.toLowerCase(),c.$vitabs_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.vitabs.hide().filter(":eq("+b+")").show(),c.$vitabs_menu.children().removeClass(e).filter(":eq("+b+")").addClass(e),a.isFunction(d.onvitabselect)&&b!==c.current_tab&&d.onvitabselect.call(c.element,b),c.current_tab=b},destroy:function(){var a=this,b=a.options.tab_text_el;a.$vitabs_menu.remove(),a.vitabs.unwrap().unwrap(),a.vitabs.removeAttr("style"),a.vitabs.children(b+":first").removeAttr("style"),a.$element.removeData("mvitabs")}},a.fn.mvitabs=function(c,d){return this.each(function(){var e,f=a(this),g=f.data("mvitabs");e="object"==typeof c&&c,g||f.data("mvitabs",g=new b(this,e)),"string"==typeof c&&g[c](d)})},a.fn.mvitabs.defaults={container_class:"vitabs",vitabs_container_class:"vitabs-content",active_tab_class:"active-tab",tab_text_el:"h1, h2, h3, h4, h5, h6",vitabsmenu_class:"vitabs-menu",vitabsmenu_el:"ul",tmpl:{vitabsmenu_tab:'<li class="tab-{0}"><span>{1}</span></li>'},onvitabselect:null}}(window.jQuery,window,document); //]]> </script>

Simpan Template.

Hasilnya akan Seperti Gambar Di Bawah ini

Membuat Multi tab Pada sidebar

Kemudian Tambahkan Widget Terserah anda.

Demikian Cara Memasang Multi Tab Pada Sidebar Blog Terimakasih Telah Membaca Artikel Di Newbie Weblog Semoga Bermanfaat

Artikel Terkait

Cara Memasang Multi Tab Pada Sidebar Blog
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

25 komentar

Anonymous
July 5, 2015 at 12:36 PM delete

wah bisa di coba nih, btw cek oot ane.. udh ane jawab msalah tempo hari biar tombol follow twitternya sedikit ke atas

Reply
avatar
July 5, 2015 at 5:06 PM delete

wah kalau masalah edit html sing agar ribet buatku hehehe ... salam perdana jgan lupa kunbal di suhud-aja.blogspot.com

Reply
avatar
July 5, 2015 at 5:06 PM delete This comment has been removed by a blog administrator.
avatar
Anonymous
July 6, 2015 at 12:14 AM delete

Nicepost, dan datang atas permintaan :)

Reply
avatar
July 6, 2015 at 1:03 AM delete

Thanks Gan atas Kunjungan Nya Semoga Bermanfaat

Reply
avatar
July 6, 2015 at 1:04 AM delete

Terimakasih Telah Berkunjung :)

Reply
avatar
July 7, 2015 at 2:02 AM delete

keren gan, nice post dah ah ah ah :D

Reply
avatar
July 7, 2015 at 2:09 AM delete

sip gan ane pasang dulu diblog ane ^_^

Reply
avatar
July 7, 2015 at 6:47 AM delete

sangat bermanfaat sekali artikel ini

Reply
avatar
Anonymous
July 7, 2015 at 3:28 PM delete

Nicepost, bermanfaat, jadi tahu cara buatnya, terimakasih :)

Reply
avatar
July 8, 2015 at 9:50 AM delete

Wah ini nih gua cari, nice gan

Reply
avatar
July 8, 2015 at 10:24 PM delete

Izin coba gan. saya baru nemu nih cara memasang multi tab di sidebar :D makasih gan info nya sangat bermanfaat

Reply
avatar
July 9, 2015 at 12:48 AM delete

Ini dia yang saya cari..terima kasih gan.

Reply
avatar
July 9, 2015 at 2:46 AM delete

Thanks Gan atas KUnjungannya

Reply
avatar
July 9, 2015 at 5:44 PM delete

Akhirnya ketemujuga...
Makasih gan... :-bd

Reply
avatar
July 9, 2015 at 5:59 PM delete

trimaksih Gan atas Kunjungannya semoga bermanfaat :)

Reply
avatar
July 12, 2015 at 1:30 AM delete

wah .. ijin praktek ya gan..

Reply
avatar
July 16, 2015 at 2:52 AM delete

Silahkan Di Praktekin Gan semoga Bermanfaat ....

Reply
avatar

✔ Harap Berkomentar Sesuai Dengan Judul Bacaan,
✖ Tidak diperbolehkan Untuk Mempromosikan Barang Atau Berjualan
✖ Jangan Berkomentar Dengan Link Aktif