Como criar um menu multi abas na lateral do blog

em 11 de janeiro de 2017

Como criar um menu multi abas na lateral do blog

Uma das coisas mais legais que uso aqui no blog é a divisão em 3 seções no final da sidebar, que utilizo para acomodar os gadgets Posts mais vistos, Tags e Blogs das colunistas. Está assim no momento mas posso colocar os elementos que desejar ali.
E é essa divisão em 3 abas que vou te ensinar hoje como ter em seu blog. Não igual, mas semelhante.
Quando terminarmos ficará assim (role a página até o final da sidebar para ver):


Demonstração do tutorial


Vamos aprender?
É bem simples e fácil, apenas 3 passos e estará feito!
Apenas preste atenção ao tutorial e não terá grandes dificuldades...


Como instalar no blog o menu lateral multi tabs?


Antes de mais nada, algumas considerações:

  1. Faça sempre em um blog de testes antes de se aventurar em seu blog real. Coloque nesse blog de testes o mesmo modelo de seu blog real e treine nele antes.Acredite em mim, evita dor de cabeça.
  2. Testei esse tutorial em vários modelos do Design de modelo do Blogger. Não testei em templates baixados da internet pois não uso. Então, se quiser testar em algum template externo ao Blogger pode testar mas não garanto.
  3. Leia e releia o tutorial até o fim. Certifique-se de haver entendido. A maioria das perguntas que me fazem referentes aos tutoriais do blog já estão respondidas no próprio tutorial; então, leia e releia com atenção.


Dito isso, vamos trabalhar?
Acesse a página com os códigos necessários e a mantenha aberta.


Copiar os códigos


A seguir acesse a aba Modelo do blog onde vai instalar o recurso e clique em Editar HTML.
Dentro da caixa de código que aparecer tecle Ctrl+F e na barra de pesquisa que aparecer digite </head>
Aperte Enter para localizar.
Acima de </head> cole o CÓDIGO CSS.
Salve.


Agora, dentro da barra de busca digite </body> e tecle Enter para localizar.
Acima de </body> cole o CÓDIGO JAVASCRIPT.
Salve.

A seguir vamos instalar o CÓDIGO HTML.
Dentro da caixa de pesquisa cole este comando e tecle Enter para localizar:



Você verá que aparecerá um trecho assim:


<div class='column-right-inner'>
                          <aside>
                            <macro:include id='main-column-right-sections' name='sections'>
                              <macro:param default='2' name='num'/>
                              <macro:param default='sidebar-right' name='idPrefix'/>
                              <macro:param default='sidebar' name='class'/>
                              <macro:param default='true' name='includeBottom'/>
                            </macro:include>
                          </aside>


Abaixo do fechamento </aside> cole o CÓDIGO HTML e salve.

Caso tenha dado tudo certo o espaço para os gagdets já aparece em seu template.
Assim:

Aí é só arrastar para cada aba o elemento de página que desejar e salvar.
Viu que simples?


Agora preste muita atenção!
Se seu blog possui a coluna lateral à direita, como o meu, é esse código que precisa achar: <div class='column-right-inner'>conforme expliquei acima.

Contudo, caso sua coluna lateral esteja posicionada à esquerda precisará localizar o trecho seguinte:

<div class='column-left-inner'>

São idênticos, note que muda apenas a palavra right por left, ou seja, de direita para esquerda.
Então fique atento: se sua sidebar for à esquerda procure <div class='column-left-inner'> ao invés de  <div class='column-left-inner'>
Certinho?
Errei muito até descobrir isso, então #ficaadica!


Como personalizar as abas?


Cores, fontes e estilo da fonte:
Para mudar as cores e tamanho das fontes localize os comandos desses itens no CÓDIGO CSS.
Não marquei nada pois é interessante você começar a "ler" os códigos.
Color indica a cor da fonte, background indica a cor de fundo, font-size indica o tamanho da fonte, uppercase indica que tudo será escrito em maiúscula... e por aí vai.
Todos os códigos usam o inglês como língua, mas é bem simples e fácil. E divertido!
Altere como desejar, vá mexendo e descobrindo o que cada comando realiza...

Nomes das abas:
Para trocar o nome das abas localize os nomes que estão no CÓDIGO HTML original e substitua.
Eu usei as abas para acomodar os posts mais vistos, as tags e o blogroll em meu blog de exemplo.
Modifique de acordo com seu desejo.

Como eu disse é simples de fazer mas requer atenção.
Estude, se dedique, faça em um blog de testes antes.
Você não imagina a satisfação quando tentamos algo e dá certo!
É mara!!!

Bônus extra:
Sabe o template que usei na minha demonstração?
Você pode baixa-lo gratuitamente e aproveitar para fazer nele o tutorial de hoje (o arquivo para baixar é anterior à inclusão do tutorial de hoje), ficará exatamente como na minha demonstração:


Quero baixar o template grátis


Gostou?
Dá um curtir aí, mig@!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

6 comentários , comente também!

  1. Obg Elaine. Queria Muito saber como fazia isso, Mas agora eu sei. E TBm nem preciso mas kk.

    ResponderExcluir
  2. Prático e muito legal! Fiz e deu certinho! Muito obrigada pela gentileza e pelo carinho!
    Elaine, queria muito aprender a colocar no meu blog um menu retrátil assim, estilo o seu, que está abaixo do cabeçalho e quando rola a página, o menu fica fixo no topo. Aguardo ansiosa! Bjs, querida. Fique com Deus!

    ResponderExcluir
    Respostas
    1. Érica, não tem tutorial desse menu, mas assim que der eu faço.
      Se quiser tentar a base que eu usei foi esse tutorial da Aninha:
      https://madlyluv.com/extras/menu-fixo-retratil-em-jquery/

      bjsss

      Excluir
  3. Sempre me ajudando muito! Obg! Faz um post dando dicas de como monetizar o blog, fala se você monetiza pelo Adsense ou se é por outar Rede de Anúncios. Onde comprou seu domínio (essa é uma grande dúvida que tenho), quais os sites confiáveis para compra, etc. Beijão!

    ResponderExcluir
    Respostas
    1. Isabelle, eu monetizo com Adsense.
      Tem uma série aqui no blog chamada Monetizar o blog, lá você vai achar bastante coisa.
      Tem 2 posts sobre domínio, na busca você localiza ambos.
      Eu registro meus domínios no Uol Host. Mas Registro BR também é confiável...
      bjsss

      Excluir
  4. Eu estou tentando mas só aparece uma das opções selecionadas, no caso eu quero por para ficar igual a do meu blog principal, Postagens populares, Tags e Paginas, ja que tenho muitas, mas mesmo ja refeito duas vezes só aparece uma como, na última vez ficou so postagens populares, ai subi o modelo antigo do blogger de testes e refiz tudo mas agora só ficou a parte das páginas, poderia ser não compatível com o modelo, estou usando um Simples, que estou tentando fazer para substituir meu template atual do Otome Game br e +
    De todo modo, eu vou ficar de olho por aqui, sei que você não coinsegue responder todos os comentários mas as vezes tem alguém que sabe e responde. Estou tentando trasnformar esse template simples em um estilo Magazine bem como meu atual, embora sem a parte responsiva que não sei fazer. Desde de já agradeço vou ficar tentando por esse tutorial para funcionar, ele era tudo que eu queria conseguir fazer obrigada, por seus post incriveis.

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…

Para receber os posts diariamente:

Digite seu email e receba nossas
atualizações gratuitamente



Para receber a newsletter semanal fofa e especial:

Assine minha newsletter linda!

* indicates required