14 fevereiro 2018
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?
ResponderExcluirOlá, infelizmente não posso te ajudar nesse caso, porque se trata de um código que não fui eu que criei ou modifiquei =/ Mas com toda certeza você vai encontrar um menu pronto... tem vários por aí =) Boa sorte!
ExcluirOi Lorena, primeiramente, obrigada por toda ajuda que tenho tido com as informaçoes q encontro aqui. Eu só tenho uma dúvida, tenho alterado o tema do meu blog no Blogger com vários botões e links que encontro aqui e a maioria das vezes tem dado muito certo, mas o Blogger está sempre acusando um erro de conteúdo misto no meu blog por estar usando conteúdo HTML via HTTP e salvando no blog HTTPS. Sabe como posso resolver isso? Agradeço antecipadamente mais essa ajuda.
ResponderExcluirOie, pelo que eu entendi o seu blog precisa passar de HTTP para HTTPS. O Google disse que isso é obrigatório agora e todos os blogs e sites precisam iniciar assim. Pra mudar isso no Blogger é bem fácil, basta ir em CONFIGURAÇÕES > HTTPS Disponibilidade de HTTPS > Selecionar a opção SIM. Vai levar alguns minutos para ativar, o seu blog pode sair do ar por alguns minutos mais depois fica tudo normal. Espero ter ajudado! Beijo enorme :*
ExcluirBom dia, eu fiz tudo certinho, funcionou, ficou ótimo. O problema é que os botons não ficam centralizados em plataformas diferentes, se acesso o blog no celular, fica pra esquerda, em pcs diferentes cada um numa posição...
ResponderExcluirAli no /*arrasta o menu para esquerda */, não funciona, só vai funcionar para 1 pc específico... tem como mudar isso para um modo adaptativo centralizado?
obrigado
www.diariodopresi.com
Oie, infelizmente esse menu não é RESPONSIVO e é por isso que ele aparece diferente em PCS de tamanhos diferentes. Até o momento eu não publiquei nenhum menu responsivo, mas no blog da Elaine Gaspareto você vai encontrar vários!
Excluir