Personalizar o blog na versão para celular- menu responsivo

em 13 de outubro de 2016


Oi, gente!
No segundo post da Série Personalizar o blog na versão para celular vamos aprender uma coisa básica e extremamente importante na personalização de qualquer blog: um menu responsivo.
Não é nada difícil mas, como tudo na vida, precisa de paciência e dedicação.
Leia o tutorial até o fim, compreenda o que está lendo e mãos à obra!

Para começar abra a página com os códigos que vamos usar:


Copiar os códigos


Agora vamos ao seu template, aquele de testes que pedi para que você criasse para a realização dos tutoriais dessa série, lembra?
No blog de testes que você está usando para personalizar o blog na versão mobile clique na aba Modelo.
Aí clique em Editar HTML e dentro da caixa do código tecle Ctrl+F.
Na barra de busca que aparecer digite ]]></b:skin> e tecle Enter para localizar.
Acima disso cole o Código CSS.
Salve.

Preste muita atenção!
Esse é o código que define coisas como cor do menu, cor da fonte, tamanho da fonte, etc.
Deixei marcado em capslock as áreas editáveis, mas mexa somente se tiver um conhecimento ao menos básico em CSS.
Altere o que desejar para que combine com seu template e depois de pronto, salve.

Agora vamos aplicar o Código HTML.
Copie-o da página de códigos e cole-o em um bloco de notas para editar.
No código você verá que deixei marcado onde é para colocar o link e onde é para colocar o nome das abas e sub abas.

Caso deseje inserir mais abas simples basta repetir o código abaixo tantas vezes quantas desejar aumentar o número de abas:

 <li><a href='LINK'>NOME DA ABA</a></li>

Caso deseje inserir mais abas multinível basta repetir o código abaixo tantas vezes quantas forem as abas multinível que desejar:

<li><a href='#'>NOME DA ABA<font size='2'>&#9660;</font></a>
<ul class='menus'>
<li><a href='LINK'>NOME DA SUB ABA</a></li>
<li><a href='LINK'>NOME DA SUB ABA</a></li></li>
<li><a href='LINK'>NOME DA SUB ABA</a></li>
<li><a href='LINK'>NOME DA SUB ABA</a></li>
<li><a href='LINK'>NOME DA SUB ABA</a></li>
</ul>
</li>


Deixei isso explicado de novo na página de códigos, ok?
Aí é só editar, colocar o link para onde cada aba deve direcionar, colocar o nome de cada aba e suba aba e salvar.


Onde instalar o Menu responsivo?



Depois de pronto é hora de definir onde o seu menu ficará.
Preste atenção!

1- Se deseja que ele fique abaixo do cabeçalho como está em meu Template Adeline faça assim:

Dentro da barra de pesquisa do código-fonte digite </header> e tecle Enter.
Abaixo de </header> cole o Código HTML que você editou com seus links e nomes das abas e salve.

2- Se quiser que o menu fique acima do cabeçalho cole o Código HTML abaixo da tag:



*Para copiar o conteúdo da caixa textárea é preciso usar o navegador Chrome


3- Se desejar que o menu fique fixo no topo e role junto com a página substitua a palavra relative por fixed no Código CSS. Está bem no começo do Código CSS.




Dica extra muito importante


Se você já possui um menu em seu blog e não quer trocar pode configurar este que estou ensinando hoje para que apareça somente na versão mobile de seu blog.
Faça assim: antes do Código HTML cole essa condicional:



E após o fechamento de </nav> digite </b:if> para fechar a condicional.
Isso fará com que o menu apareça apenas na versão mobile de seu template.


Bônus:
Gravei um vídeo para quem sempre diz que não consegue localizar os trechos no código do template.
É bem curtinho e simples, mas ajudará se você tiver dúvidas.




Para não perder nenhum artigo você pode:


→ Seguir o blog via gadget Seguidores: basta clicar em Seguir na lateral do blog e concluir o processo; as atualizações aparecerão em seu painel do Blogger assim que forem publicadas.

→ Curtir nossa fanpage: todos os posts têm seu link enviados pra lá no momento em que são postados. Basta clicar em Curtir!



→ Cadastre seu email e receba a atualização direto nele, assim que for postada.

Digite seu endereço de email:






No próximo tutorial vou mostrar como personalizar detalhes da área Mobile de seu template, deixando-o pronto para usar, lindo e mobile friendly assim como o meu Template Adeline.
Confira aqui como o Google vê o Template Adeline.


Falando no Template Adeline, olha como ele está ficando (acesse também pelo celular, pra ver tudo o que fizemos até aqui).

Clique para visitar e conhecer


Ao final da série vou disponibiliza-lo para você baixar e usar, já com todos os recursos e personalizações.

Ficou feliz? Está gostando da série?
Então me ajude, curta, compartilhe e recomende esse post.
É só o que preciso pra ficar bem feliz e caprichar ainda mais nos próximos tutoriais e séries!
Posso contar contigo?

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.

2 comentários , comente também!

  1. Olá tudo bem?
    Por favor você pode me indicar alguém para personalizar meu blog? Obrigada.

    bjs

    ResponderExcluir
  2. Elaine, como eu quero te abraçaaaaar! Muito obrigada, essa tua série de posts está me ajudando tanto que nem imaginas. 💗💗💗
    Obrigada por tanta dedicação e por estar sempre disposta a ajudar!

    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…