Widget Multi-abas para Sidebar do blog
[ #04 | B E D A ] Kon'nichiwaa fadinhas e elfos! Como vocês estão? Hoje venho com um post que pode ser útil para muita gente! Já chegou a pensar que você pode juntar 3 widgets em um só? É uma maneira super simples, e prática para diminuir o tamanho da sua sidebar. Pois como sabem, quanto mais coisas na sidebar mais demora no carregamento do blog, e isso é bem ruim né? Então vem ver como faz um widget com multi-abas! Let's go?
Eu adicionei esse estilo no começo desse ano, super amei, modifiquei bastante até ficar bonitinho aqui no blogger, dá para colocar qualquer coisa nas caixas, eu escolhi colocar Facebook, Spotify e Twitter!
Você pode testar aqui no blog mesmo, tá ali na sidebar, abaixo das postagens populares, curtiu? Então vamos aprender a colocar:
Vá em Tema + Editar HTML e procure por /b:skin , ABAIXO dele cole o seguinte código:
<style type='text/css'>
/* Multi Aba Widget Sidebar */
.multitab-section{background:transparent;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-tab{border:0;width:33.3%;text-align:center;width: 100%;}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a{margin:-2px;font-size:14px;font-weight:400; line-height:32px;width:32.3%;list-style:none;text-align:center;display:inline-block;padding:5px 0;background:#d9d2e9;color:#fff;cursor:pointer;position:relative;transition:all .3s;overflow: hidden;}
.multitab-widget li a.multitab-widget-current{background: #f4e0e0;}
.multitab-widget .multitab-tab a:before{font-family:Fontawesome;text-align:center;margin-right:5px;}
</style>
Caso queira outra cor , tamanho e letra e etc, já modifique nesse código acima, aqui um guia rápido: multitab-section: é o fundo widget, o background está transparente mas funciona ao adicionar uma cor #hexadecimal.
// widget: é todo o widget, espaçamento e etc.
// widget li a: já é a barra de multi-abas, o meu está com o fundo #d9d2e9 (lilás) , pode mudar para outra cor a vontade, a letra está branca podendo ser alterada também > background e color.
// widget li a.multitab-widget-current: é a cor do fundo quando está inativo ou selecionado, troque o #f4e0e0 para mudar o rosa.
Feito isso, agora é só ir em Layout + Adicionar um Gadget + Html/Javacript, cole:
<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'>
<a href='#multitab-column-id1' title='TÍTULO' class='multitab-widget-current'><b>Facebook ▼</b>
</a>
<a href='#multitab-column-id2' title='TÍTULO'><b>Pinterest ▼ </b></a>
<a href='#multitab-column-id3' title='TÍTULO'><b>Twitter ▼</b></a>
</li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id1'>
<b:section class='sidebar' id='multitab-sidebar1' preferred='yes' />
1 Adicione aqui oque quer que apareça! (texto, imagem, html do gadget e etc)
</b:section></div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id2'>
<b:section class='sidebar' id='multitab-sidebar2' preferred='yes' />
2 Adicione aqui oque quer que apareça! (texto, imagem, html do gadget e etc)
</b:section></div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id3'>
<b:section class='sidebar' id='multitab-sidebar3' preferred='yes' />
3 Adicione aqui oque quer que apareça! (texto, imagem, html do gadget e etc)
</b:section></div>
</div>
Faça as alterações necessárias, adicionando também o item que quer que apareça em cada um! E não esqueça de modificar os títulos! Depois disso é só salvar. Prontinho
Qualquer dúvida é só perguntar aqui nos comentários ok?
