Dê um novo visual e economize espaço na sidebar do blog adicionando widgets em três colunas personalizáveis.
Em nossos blogs é comum utilizarmos a sidebar para colocarmos alguns widgets que julgamos ser importantes e proveitosos para os visitantes. Porém, sabemos que utilizar muitos widgets, deixa o blog “poluído” visualmente, dificulta a navegação e o entendimento de todos que busquem o que realmente interessa. Se você tem convicção de que aqueles widgets são realmente necessários e não quer a sidebar muito “comprida” temos uma solução.
Estilo profissional no blog com multi tabela
Muito utilizado em templates profissionais, o sistema de multi tabela na sidebar, é uma ótima alternativa para colocar mais widgets, porém, sem ocupar espaço em seu blog. Com a aplicação dos códigos, surgirão três espaços para ser inseridas mais opções que podem ser qualquer widget que desejar. Esse sistema além de compactar e dar mais ganho de espaço, é também uma excelente opção de personalização para que o blog possa ter um aspecto mais moderno e profissional.
Falando um pouco sobre o visual, como já dito, seu blog poderá tomar uma forma mais elegante graças às guias que deixarão a sidebar mais completa e também com a possibilidade de configurar com o estilo já presente ou a opção de escolher novas cores que realcem suas páginas.
Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.
Maneira para colocar multi tabela no blog
>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>
>> Logo ACIMA da tag encontrada, cole o seguinte código:
/* CSS Tabs */* Em LARANJA, estilo da tabela normal, respectivamente (cor de fundo, cor da fonte, estilo da borda).
.tabs, .tably {margin:0 0;}
.tabs .tably {padding:0 0;}
.tabs-menu {color:#fff;padding: 0 0;margin:0 0;}
.tabs-menu li {font-size:12px;font-family:'Open Sans';font-weight:400;height:30px;line-height:30px;width:30.5%;list-style:none;text-transform:uppercase;text-align:center;display:inline-block;padding:0;background:#fff;color:#b4babe;border:2px solid #bac0c4;margin-left:2px;border-radius:2px;cursor:pointer;position:relative;transition:all .4s ease-in-out;}
.tabs-menu li:hover {background:#f48067;border:2px solid #e56967;color:#fff;}
.tabs-menu .active-tab {background:#bac0c4;border:2px solid #b4babe;color:#fff;}
.tabs-content {padding:10px 0;}
.tabs-content .widget li {color:#b2bccd;float:none!important;margin:5px 0;padding:10px}
.tabs-content .widget ul {color:#b2bccd;overflow:visible;}
* Em AZUL, estilo da tabela ao passar o mouse (cor de fundo, estilo da borda, cor da fonte).
* Em AMARELO, estilo da tabela ativa (cor de fundo, estilo da borda, cor da fonte).
>> Pesquise agora por </head>
>> Logo ACIMA da tag encontrada, cole o seguinte código:
<script type='text/javascript'>>> Pesquise agora por </body>
$(function() {
$(".tabs-1").mtabs();
});
</script>
>> Logo ACIMA da tag encontrada, cole o seguinte código:
<script type='text/javascript'>>> Novamente pesquise, agora por <div class='column-right-inner'>
//<![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>
* Caso não encontre, tente por <div id='sidebar-wrapper'>
>> Logo ABAIXO do trecho encontrado, cole o seguinte código:
<div class='tabs tabs-1'>>> Clique em "Visualizar", estando de acordo como deseja clique em "Salvar Modelo".
<b:section class='tably tably-1 section' id='tably-1' showaddelement='yes'>
</b:section>
<b:section class='tably tably-2 section' id='tably-2' showaddelement='yes'>
</b:section>
<b:section class='tably tably-3 section' id='tably-3' showaddelement='yes'>
</b:section>
</div>
<div class='clear'/>
Adicionando os Widgets
Nesse momento, é necessário acrescentar os widgets que ficarão nas tabelas. Para isso, siga:>> No menu lateral, vá em "Layout".
>> Agora, no local da sidebar aparecerão três opções de "Adicionar um Gadget", então, adicione os desejados ou caso já tiver os widgets arraste-os até esses três locais que representam cada coluna.
>> Feito isso, clique em "Salvar Organização".
>> Vá em seu blog e veja como ficou.
Concluímos mais um tutorial que adequa seu blog a uma interessante forma de personalização e que é muito desejada pela maioria dos blogueiros. O sistema de multi tabela poderá ter várias funções importantes a depender de sua criatividade, podendo combinar categoriais e/ou classes de widgets que deixará o visitante mais "a vontade" para a utilização constante dos aplicativos presentes na sidebar.
Deixe seu comentário, pois ele é a motivação para nosso trabalho.
CASO TENHA DUVIDAS VEJA A FONTE: http://www.prodeveloper.com.br/2014/06/como-colocar-multi-tabela-na-sidebar-do.html
