Widget Multi-abas para Sidebar do blog

abril 04, 2018


[ #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?


Caso use no seu blog dê os créditos por favor! Por hoje é só! Espero que tenham gostado! Estamos em BEDA então visite e siga o blog para não perder nada. Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest *  Conheça meu trabalho: JD Design e Web! Até mais, Kissus!

Leia também:

2 comentários

  1. Gente, que útil isso! Realmente otimiza muito o espaço na sidebar e fica uma graça <3 Amei!
    Beijos
    Tamara
    tamaravilhosamente.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Sim, é muito bom deixar na sidebar!
      Obrigada pela visita e por comentar! Kissus

      Excluir

© 2017 Sweet Magic. Re-Design: JD Design. Tecnologia do Blogger.