Membuat Sidebar Widget Multi Tab Menu di Sidebar Blog
April 26, 2016
Cara Memasang atau Membuat Sidebar Widget Multi Tab Menu di Sidebar Blog
WIDGET multi tab maksudnya widget atau isi sidebar blog berupa tabber yang berisi tiga widget, misalnya Popular Post, Latest Post, dan Label, yang sejajar dalam satu space.
Tabber ini menghemat sidebar sehingga lebih efektif dan user friendly, tidak memanjang ke bawah. Sebelumnya CB sudah share tiga posting tentang multitab atau sidebar tabber tab ini:
Anda tinggal pilih nama yang cocok dan mudah diterapkan.
Kali ini CB share dua jenis multitab sidebar blog lainnya. Yang pertama penampakannya seperti ini ini:
Kodenya CB ambil dari My Extra News Blogger Template dengan sedikit modifikasi. Template My Extra News sendiri bisa didownload di 10 Template Blog Magazine Pilihan.
#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}
#select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:32px;display:block;background-color:#666;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#48d}
#sidebar-main .widget1{background-color:#fff;width:100%;float:left;padding:5px 0}
<aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>
4. Klik "Layout".
Akan muncul tiga widget bertuliskan tab1, tab2, tab3. Jika belum muncul, refresh (tekan F5). Silakan isi dengan widget yang akan ditampilkan. Beres!
1. Masuk ke blogger
2. Pilih template > Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Letakkan kode dibawah ini tepat diatasnya
8. Save Template!
Notes: Cara memasang Sidebar Widget Multi Tab Menu di Sidebar Blog yang kedua ini memang agak njelimet alias rumit. Yang mudah yang pertama.
MENAMBAHKAN WIDGET
Untuk menambahkan dan mengatur widgetnya di tab:
1. Layout > Add a Widget
2. Pilih widgetnya, misalnya "Popular Posts"
3. Save!
WIDGET multi tab maksudnya widget atau isi sidebar blog berupa tabber yang berisi tiga widget, misalnya Popular Post, Latest Post, dan Label, yang sejajar dalam satu space.
Tabber ini menghemat sidebar sehingga lebih efektif dan user friendly, tidak memanjang ke bawah. Sebelumnya CB sudah share tiga posting tentang multitab atau sidebar tabber tab ini:
- Membuat Tabber Tab Content Sidebar Blog
- Memasang Tabber Tab Widget Blog
- Cara Menampilkan Multi Tabber di Sidebar Blog
Anda tinggal pilih nama yang cocok dan mudah diterapkan.
Kali ini CB share dua jenis multitab sidebar blog lainnya. Yang pertama penampakannya seperti ini ini:
Kodenya CB ambil dari My Extra News Blogger Template dengan sedikit modifikasi. Template My Extra News sendiri bisa didownload di 10 Template Blog Magazine Pilihan.
Cara Membuat Sidebar Widget Multi Tab Menu
1. KODE CSS
Simpan di atas kode ]]></b:skin> atau </style>
#sidebar-tab h2{display:none;}
#select-tab{margin:0 auto 10px}#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}
#select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:32px;display:block;background-color:#666;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#48d}
#sidebar-main .widget1{background-color:#fff;width:100%;float:left;padding:5px 0}
#sidebar-main{overflow:hidden}
2. KODE HTML
Simpan di bawah kode<aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>
<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Posts</a></li>
<li class='tab2'><a href='#tab2'>Latest Posts</a></li>
<li class='tab3'><a href='#tab3'>Labels</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'>
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'>
<b:section class='sidebar' id='tab2-latest-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab3-labels' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Posts</a></li>
<li class='tab2'><a href='#tab2'>Latest Posts</a></li>
<li class='tab3'><a href='#tab3'>Labels</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'>
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'>
<b:section class='sidebar' id='tab2-latest-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab3-labels' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>
3. Save Template!
Akan muncul tiga widget bertuliskan tab1, tab2, tab3. Jika belum muncul, refresh (tekan F5). Silakan isi dengan widget yang akan ditampilkan. Beres!
Cara Lain Membuat Sidebar Widget Multi Tab Menu
Kode dan cara membuat sidebar widget multitab berikut ini kodenya dari Blogspot Tutorial. Silakan ke TKP untuk pilihan lainnya.1. Masuk ke blogger
2. Pilih template > Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Letakkan kode dibawah ini tepat diatasnya
/* CSS Tabs */ .tabs, .tably {margin:0 0;} .tabs .tably {padding:0 0;} .tabs-menu {color:#0f9abb;padding:0 0;margin:0;margin-bottom:0;border:1px solid #e0e0e0;} .tabs-menu li {margin-bottom:0;margin-top:0;font-size:14px;font-family:'Oswald';font-weight:400;text-transform:uppercase;height:37px;line-height:37px;width:33.3%;list-style:none;text-align:center;display:inline-block;padding:0 0;background:transparent;color:#0f9abb;cursor:pointer;position:relative;transition:all 0.1s linear;} .tabs-menu li:hover {background:#363636;color:#fff;} .tabs-menu .active-tab {background:#0fa9cd;color:#fff;} .tabs-menu .active-tab:hover {background:#10b1d7;color:#fff;} .tabs-menu .active-tab:after {top:100%;left:50%;border:solid transparent; content: " ";height:0;width:0;position:absolute;pointer-events:none;border-color: rgba(136,183,213,0);border-top-color:#0fa9cd;border-width:8px;margin-left:-8px;} .tabs-content {padding:10px;background:#f9f9f9;border:1px solid #e0e0e0;border-top:none;margin-bottom:15px;} .tabs-content .sidebar li {margin:0 0;padding:0 0 0 0;} .tabs-content .widget li {background:#f9f9f9;color:#666;float:none!important;} .tabs-content .widget ul {background:#f9f9f9;color:#666;overflow:visible;} .tabs-content .Label li {background:#f9f9f9;color:#666;float:left;padding:5px;margin-left:3px;text-align:left;width:44%;transition:.3s linear;}
5. Copas script berikut ini di atas kode </head>
6. Copy dan Paste script berikut ini diatas kode </body>
<script type='text/javascript'> $(function() { $(".tabs-1").mtabs(); }); </script>
<script type='text/javascript'> //<![CDATA[ !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>
7. Letakkan kode HTML berikut ini di atas kode
<aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>
<aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>
<div class='tabs tabs-1'> <b:section class='tably tably-1 section animated fadeIn' id='tably-1' showaddelement='yes'/> <b:section class='tably tably-2 section animated fadeIn' id='tably-2' showaddelement='yes'/> <b:section class='tably tably-3 section animated fadeIn' id='tably-3' showaddelement='yes'/> </div>
Notes: Cara memasang Sidebar Widget Multi Tab Menu di Sidebar Blog yang kedua ini memang agak njelimet alias rumit. Yang mudah yang pertama.
MENAMBAHKAN WIDGET
Untuk menambahkan dan mengatur widgetnya di tab:
1. Layout > Add a Widget
2. Pilih widgetnya, misalnya "Popular Posts"
3. Save!
Demikian Sidebar Widget Multi Tab Menu di Sidebar Blog. Good Luck & Happy Blogging! (http://www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Gan cara meletakkan gadget search keren(yang di postingan agan) diatas multi tab gimana
ReplyDeletemas, kalo untuk mensejajarkan sidebar dengan posting itu gimana yah? soalnya saya pake template ttechlife dari bloggertheme9 trus kok sidebarnya walaupun ada di sebelah kiri tapi kok psisinya dibawah postingan.
ReplyDeletemohon pencerahannya mas. please
makasih mas tutorialnya sangat membantu banget, di tunggu kunjungan baliknya
ReplyDeletemakasih gan , its work
ReplyDeletegan, saya mau dong scirpt hack komenya ini,. oiya giman supaya multiple tab ini gak berada paling atas/bisa diatur posisinya diside bar,. thanks..
ReplyDeleteharus bikin div sidebar yang baru, agak rumit, biar aja paling atas.
Delete
ReplyDeleteHy, your posts are quite helpful dude, not a waste of time and I learned a lot.Keep It Up!