14 fevereiro 2018

Menu fixo no topo do blog com sub-abas e ícones sociais

menu fixo no topo


Menu fixo no topo é um charme, desde que é ele esteja de acordo com o design do blog e atenda as suas necessidades. O manual por exemplo sempre terá um menu com sub-abas porque temos várias categorias e esse tipo de menu ajuda o leitor a encontrar os temas que ele deseje ler no momento com mais facilidade.

Esse tutorial é um pedido de várias leitoras, que enviaram mensagens no facebook e por e-mail, solicitando um menu fixo no topo com ícones sociais. Na imagem abaixo é possível ver o modelo que trago hoje e em seguida o tutorial super fácil.

menu fixo no topo

Menu fixo no topo do blog com sub-abas e ícones sociais


2. No painel do Blogger, acesse Tema e Editar HTML. Abaixo de <head> cole o seguinte código que fará os ícones das redes sociais aparecerem:


<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css' rel='stylesheet'/>

3. No painel do Blogger, acesse Tema e Editar HTML. Clique com o mouse sobre os códigos e em seguida aperte CTRL+F e dentro da caixa de pesquisa que vai aparecer digite ]]></b:skin> e aperte enter novamente, como a imagem abaixo ilustra.

menu fixo no topo

4. Em seguida adicione o código CSS acima de ]]></b:skin>. Visualize e estiver tudo ok, salve.

menu fixo no topo

5. Agora vamos adicionar o código HTML. Ainda no painel do Blogger, clique em Layout e depois em adicionar um Gadget e cole o segundo código, como as imagens abaixo ilustram. Depois salve.

menu fixo no topo

menu fixo no topo

Entendo os códigos

Código CSS (acima de ]]></b:skin>): Todos os elementos que podem ser modificados estão sinalizados com uma frase na frente. É só você prestar bastante atenção.

Bônus: Não sabe onde encontrar os códigos das cores? Acesse o site HTML color codes e escolha as suas cores preferidas e personalize o menu do seu jeitinho!

Código HTML: Para adicionar os links das categorias, basta trocar o # (jogo da velha) pelo link do seu marcador, por exemplo: http://www.nomedoseublog.com.br/search/label/nomedacategoria

Para trocar os nomes das categorias é muito mais simples, é só deletar a palavra e colocar outra no lugar, por exemplo: Delete Blogroll e adicione outra palavra, e assim por diante.

Adicione também os links das suas redes sociais. Onde está escrito facebook.com/nomedoseublog  troque pelo nome do seu blog, é claro! Mas, verifique antes se o endereço da rede social tem mesmo o nome do blog, ou um código fornecido pela plataforma, porque algumas contas não possuem URL personalizada. Faça o procedimento com todas as redes sociais.

Bônus: Não possui uma determinada rede social que está no menu? Basta deletar de <li> a </li>. Por exemplo, se você não possui uma página no facebook, basta apagar esse trecho: 


<li><a href='https://www.facebook.com/nomedoseublog><i class='fa fa-facebook' target='_blank'></i></a></li>


E se você gostou do tutorial, não deixe de compartilhar pra ajudar o manual a crescer. Siga o blog em "faça parte" que fica na lateral e segue também nosso perfil no pinterest que está sempre recheado de inspirações e dicas para blogueiras empreendedoras.

8 comentários:

  1. Amei o tutorial! Seu blog é recheado de conteúdos maravilhosos <3 Passei horas navegando por aqui rs Bjos Segui o blog,com certeza voltarei mais vezes por aqui!


    Faça-me uma visita -> LEH BLOG | INSTAGRAM

    ResponderExcluir
    Respostas
    1. Obrigada Leh!
      Fique a vontade pra navegar o quando quiser \0/
      Grande beijo :*

      Excluir
  2. Estou tentando fazer no meu, mas sempre dá erro quando estou na parte do HTML gadget. Gostaria de saber como corrigir isso.

    ResponderExcluir
    Respostas
    1. Oi Tamires,
      Qual erro aparece? Mande um e-mail relatando melhor a sua dificuldade para que eu possa te ajudar <3

      Excluir
  3. Ameeeei o tutorial ! Fiz no meu blog e deu certinho. Obrigada ! :)

    ResponderExcluir
    Respostas
    1. Ebaaaa! Fico feliz que tenha dado certo Luísa!
      Grande bjooooo :*

      Excluir
  4. Oi! Fiz e deu tudo certinho.
    Mas gostaria de saber como tirar as linhas divisorias para conseguir um visual mais clean.
    Beijoos

    ResponderExcluir
    Respostas
    1. Oi Carliinha <3 Que bom que deu tudo certinho <3

      Para tirar a linha divisória na aba CATEGORIAS basta ir em
      #nav li li a, #nav li li a:link, #nav li li a:visited {
      e deletar o
      border-bottom: 1px solid #FF;
      Um grande beijo :*

      Excluir