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. 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

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

menu fixo no topo

4. 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.

1 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