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>
=================================
3. Save Template!
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!
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: " & quot;;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>
=================================
< script type='text/javascript'> $(function() { $(".tabs-1").mtabs(); }); </script>
=================================
6. Copy dan Paste script berikut ini diatas kode </body>
=================================
< 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'>
=================================
< 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>
=================================
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!
============================ جافا سكربت
<style type="text/css">.tabber{padding:0!important;border:0 solid #bbb!important}.tabber h2{float:left;margin:0 1px -1px 0;font-size:13px;font-family:Arial;color:#fff;padding:10px;overflow:hidden;position:relative;cursor:pointer;overflow:hidden;position:relative;background:#333;cursor:pointer}html .tabber h2.active{background:#48d;border-bottom:1px solid #fff}.tabber .widget-content{padding:10px;background:#fff;clear:both;margin:0}.codewidget,#codeholder{display:none}</style>
< script type="text/javascript">(function(a){a.fn.bloggerTabber=function(e){var g={tabCount:3};var e=a.extend(g,e);var f=a(this).parent().parent(".widget");f.addClass("codewidget");if(a('a[href^="http://contohblognih.blogspot.com"]').is("#codeholder a")){f.nextAll(".widget").slice(0,e.tabCount).addClass("tabber")}else{}a(".tabber").hide();a(".tabber:first").prepend(a(".tabber h2"));a(".tabber:first").show();a(".tabber").append(a("#codeholder p").css({margin:"5px 0 0",padding:"0","font-size":"10px"}));a(".tabber h2:first").addClass("active");a(".tabber h2").click(function(){a(".tabber h2").removeClass("active");a(this).addClass("active");var c=a(".tabber h2").index(a(this));var b=a(".tabber:eq("+c+")");b.prepend(a(".tabber h2"));a(".tabber").hide();b.show();b.find(".widget-content").contents().hide();b.find(".widget-content").contents().fadeIn(700);return false})}})(jQuery);</script>
< script type="text/javascript">$(document).ready(function(){$("#codeholder").bloggerTabber({tabCount:3})});</script>
< div id='codeholder'><p><a href="http://contohblognih.blogspot.com" target="_blank" style="display:none">Tabber Widget</a></p></div>
===========================
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>
=================================
3. Save Template!
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!
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: " & quot;;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>
=================================
< script type='text/javascript'> $(function() { $(".tabs-1").mtabs(); }); </script>
=================================
6. Copy dan Paste script berikut ini diatas kode </body>
=================================
< 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'>
=================================
< 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>
=================================
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!
============================ جافا سكربت
<style type="text/css">.tabber{padding:0!important;border:0 solid #bbb!important}.tabber h2{float:left;margin:0 1px -1px 0;font-size:13px;font-family:Arial;color:#fff;padding:10px;overflow:hidden;position:relative;cursor:pointer;overflow:hidden;position:relative;background:#333;cursor:pointer}html .tabber h2.active{background:#48d;border-bottom:1px solid #fff}.tabber .widget-content{padding:10px;background:#fff;clear:both;margin:0}.codewidget,#codeholder{display:none}</style>
< script type="text/javascript">(function(a){a.fn.bloggerTabber=function(e){var g={tabCount:3};var e=a.extend(g,e);var f=a(this).parent().parent(".widget");f.addClass("codewidget");if(a('a[href^="http://contohblognih.blogspot.com"]').is("#codeholder a")){f.nextAll(".widget").slice(0,e.tabCount).addClass("tabber")}else{}a(".tabber").hide();a(".tabber:first").prepend(a(".tabber h2"));a(".tabber:first").show();a(".tabber").append(a("#codeholder p").css({margin:"5px 0 0",padding:"0","font-size":"10px"}));a(".tabber h2:first").addClass("active");a(".tabber h2").click(function(){a(".tabber h2").removeClass("active");a(this).addClass("active");var c=a(".tabber h2").index(a(this));var b=a(".tabber:eq("+c+")");b.prepend(a(".tabber h2"));a(".tabber").hide();b.show();b.find(".widget-content").contents().hide();b.find(".widget-content").contents().fadeIn(700);return false})}})(jQuery);</script>
< script type="text/javascript">$(document).ready(function(){$("#codeholder").bloggerTabber({tabCount:3})});</script>
< div id='codeholder'><p><a href="http://contohblognih.blogspot.com" target="_blank" style="display:none">Tabber Widget</a></p></div>
===========================
0 تعليقات