Cara Membuat Sidebar Multi Tab di Sidebar Blog

Baca Juga

Cara Memasang - Membuat Sidebar Multi Tab di Sidebar Blog.

SIDEBAR Multi Tab adalah widget di sebelah kanan blog berupa tabel untuk menampilkan 2-3 widget sekaligus dalam satu kolom.

Pemasangan Sidebar Multi Tab ini menghemat space sidebar blog.

Namun demikian, ada kekurangannya, kemungkinan mesin telusur (search engine) seperti Google tidak bisa mengindeks atau membaca tab yang kedua dan ketiga, karena tersembunyi.

Misalnya, di sidebar multitab kita pasang Latest Posts, Popular Posts, dan Labels. Yang terbaca oleh Google hanya Latest Posts karena itu yang terbuka secara default.

Contoh atau demo multitab sidebar blogger seperti gambar ilustrasi posting ini.

Cara Membuat Sidebar Multi Tab di Blogger

1. Masuk ke blogger > Dashboard Blog

2. Pilih template > Edit HTML

3. Letakkan kode berikut  ini tepat di atas kode kode ]]></b:skin> atau </style>

/* 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:&#39;Oswald&#39;;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; &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;}

4. Copy & Paste script berikut ini di atas kode </head>

<script type='text/javascript'>
$(function() {
$(&quot;.tabs-1&quot;).mtabs();
});
</script>

5. Letakkan script berikut ini di atas 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>

6. 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>

7. Simpan Template!

Pemasangan  Sidebar Multi Tab di Blogger sudah selesai. Kini saatnya memasang widget yang akan ditampilkan di sana: Layout (Tata Letak) > Add a Gadget

Demikian Sidebar Multi Tab di Blogger. Untuk pilihan lain, silakan Googling dengan kata kunci Sidebar Multi Tab. Wasalam. (http://blogromeltea.blogspot.com).*

Sumber