Menu fixo no topo do blog com sub-abas e ícones sociais
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 do blog com sub-abas e ícones sociais
1. Copie os códigos.
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.
4. Em seguida adicione o código CSS acima de ]]></b:skin>. Visualize e estiver tudo ok, salve.
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.
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.
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!
ResponderExcluirFaça-me uma visita -> LEH BLOG | INSTAGRAM
Obrigada Leh!
ExcluirFique a vontade pra navegar o quando quiser \0/
Grande beijo :*
Estou tentando fazer no meu, mas sempre dá erro quando estou na parte do HTML gadget. Gostaria de saber como corrigir isso.
ResponderExcluirOi Tamires,
ExcluirQual erro aparece? Mande um e-mail relatando melhor a sua dificuldade para que eu possa te ajudar <3
Ameeeei o tutorial ! Fiz no meu blog e deu certinho. Obrigada ! :)
ResponderExcluirEbaaaa! Fico feliz que tenha dado certo Luísa!
ExcluirGrande bjooooo :*
Oi! Fiz e deu tudo certinho.
ResponderExcluirMas gostaria de saber como tirar as linhas divisorias para conseguir um visual mais clean.
Beijoos
Oi Carliinha <3 Que bom que deu tudo certinho <3
ExcluirPara 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 :*
Não consegui intender o tutorial, confesso que você citou no post 3 códigos, porém só me deu o primeiro código para coloca depois de head
ResponderExcluirOi Regiane,
ExcluirOs 3 códigos estão no post. Releia o tutorial
e refaça com mais calma. Você vai conseguir, porque
está tudo ok, funcionando.
Oi! Eu já tenho um menu fixo e também um menu de categorias com imagens (esse aqui: https://www.youtube.com/watch?v=5nOFsag6ksY) mas queria que algumas categorias tivessem sub-categorias (sub-abas), qual código é que eu necessito?
ResponderExcluir