Inserir menu com redes sociais no topo do blog

Que tal colocar um menu em forma de barra no topo do blog? É uma forma interessante para divulgar suas redes sociais e links principais do seu blog, como por exemplo, a página de início e a página de contato.

Foi pensando nisso que desenvolvi um código que faz esse papel, tudo muito simples de configurar e personalizar.

Veja o exemplo do menu funcionando nessa página aqui ou na imagem abaixo:

Com um único código vou ensinar a mudar a cor de fundo, inserir novos links, inserir novos ícones e como fixar o menu no topo quando rolarem a página para baixo.  Abaixo teremos um tutorial para Blogger e WordPress, mas isso não impede você de usar em outras plataformas ou sites.

Blogger

1) Faça login no Blogger, entre em “Modelo” -> “Editar HTML” -> “Proseguir”.

2) Procure por <body> e cole logo em seguida o código:

<div class="bar_top">
<div class="bar_topd">
	<ul class="menu_barrax">
		<li><a href="/" title="Início">Início</a></li>
		<li><a href="http://LINK_AQUI" title="Sobre">Sobre</a></li>
	</ul>
	<div class="transit">
		<a href="http://LINK_AQUI" target="_blank"><img src="http://4.bp.blogspot.com/-espzqjF5p38/T9ieDflylZI/AAAAAAAAD4Q/rGSC3YoAGxg/s1600/rss.png" title="Feed RSS"/></a>
		<a href="http://LINK_AQUI" target="_blank"><img src="http://4.bp.blogspot.com/-4di8wyO8reU/T9ieCNjxkrI/AAAAAAAAD34/n9mdGQl36go/s1600/facebook.png" title="Facebook"/></a>
		<a href="http://LINK_AQUI" target="_blank"><img src="http://1.bp.blogspot.com/-V6AUHhYK_tw/T9ieDhXQM3I/AAAAAAAAD4Y/2SX5sC04x2c/s1600/twitter.png" title="Twitter"/></a>
		<a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-inXXbVbM-pQ/T9ieDGHlKLI/AAAAAAAAD4I/jnthUijJjmo/s1600/google+.png" title="Google Plus"/></a>
		<a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-IKeAb8OgXfU/T9ieEKLi8JI/AAAAAAAAD4g/8FnePnFsnwk/s1600/youtube.png" title="YouTube"/></a>
		<a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-reMynxRhgfw/T9ieClin7NI/AAAAAAAAD4A/1JXcZtwjPMk/s1600/flickr.png" title="Flickr"/></a>
	</div>
</div>
</div>

3) Procure por ]]></b:skin> e cole o seguinte código ANTES do código encontrado:

.bar_top {width: 100%;height: 32px;background: #000;}
.bar_top img {height: 22px;float: right;margin: 5px 7px 0 0;opacity:0.8;filter:alpha(opacity=80);}
.bar_top img:hover {opacity:1.0;filter:alpha(opacity=100);}
.menu_barrax {float: left;margin: 0;padding: 0;}
.menu_barrax li {float: left;list-style: none;font-size: 10px;font-weight: bold;font-family: Verdana, Arial;text-transform: uppercase;margin: 0 0 0 10px;padding: 10px 0 0 0;}
.menu_barrax li a{color: #dfdfdf;text-decoration: none;}
.menu_barrax li a:hover {text-decoration: none;color: #fff;}
.transit {-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;transition:all 0.4s ease;}
.bar_topd {width: 900px;margin: 0 auto;}

4) Teste e salve, caso tenha dúvidas de como personalizar a barra, alterar cores, inserir links, etc., siga os passos no tópico logo depois da instalação para WordPress (final do post).

WordPress

1) Faça login, entre em “Aparência” -> “Editor”;

2) Procure a página que contenha a tag <body>, geralmente é a página Cabeçalho (header.php). Insira o código abaixo logo após a tag encontrada:

<div class="bar_top">
<div class="bar_topd">
	<ul class="menu_barrax">
		<li><a href="/" title="Início">Início</a></li>
		<li><a href="http://LINK_AQUI" title="Sobre">Sobre</a></li>
	</ul>
	<div class="transit">
		<a href="http://LINK_AQUI" target="_blank"><img src="http://4.bp.blogspot.com/-espzqjF5p38/T9ieDflylZI/AAAAAAAAD4Q/rGSC3YoAGxg/s1600/rss.png" title="Feed RSS"/></a>
		<a href="http://LINK_AQUI" target="_blank"><img src="http://4.bp.blogspot.com/-4di8wyO8reU/T9ieCNjxkrI/AAAAAAAAD34/n9mdGQl36go/s1600/facebook.png" title="Facebook"/></a>
		<a href="http://LINK_AQUI" target="_blank"><img src="http://1.bp.blogspot.com/-V6AUHhYK_tw/T9ieDhXQM3I/AAAAAAAAD4Y/2SX5sC04x2c/s1600/twitter.png" title="Twitter"/></a>
		<a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-inXXbVbM-pQ/T9ieDGHlKLI/AAAAAAAAD4I/jnthUijJjmo/s1600/google+.png" title="Google Plus"/></a>
		<a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-IKeAb8OgXfU/T9ieEKLi8JI/AAAAAAAAD4g/8FnePnFsnwk/s1600/youtube.png" title="YouTube"/></a>
		<a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-reMynxRhgfw/T9ieClin7NI/AAAAAAAAD4A/1JXcZtwjPMk/s1600/flickr.png" title="Flickr"/></a>
	</div>
</div>
</div>

3) Procure a Folha de estilos (style.css) e insira no final de tudo o código abaixo:

.bar_top {width: 100%;height: 32px;background: #000;}
.bar_top img {height: 22px;float: right;margin: 5px 7px 0 0;opacity:0.8;filter:alpha(opacity=80);}
.bar_top img:hover {opacity:1.0;filter:alpha(opacity=100);}
.menu_barrax {float: left;margin: 0;padding: 0;}
.menu_barrax li {float: left;list-style: none;font-size: 10px;font-weight: bold;font-family: Verdana, Arial;text-transform: uppercase;margin: 0 0 0 10px;padding: 10px 0 0 0;}
.menu_barrax li a{color: #dfdfdf;text-decoration: none;}
.menu_barrax li a:hover {text-decoration: none;color: #fff;}
.transit {-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;transition:all 0.4s ease;}
.bar_topd {width: 1000px;margin: 0 auto;}

Salve a modificação.

4) Para personalizar a barra siga as orientações abaixo.

Personalizando a barra

Colocando os links nos ícones
Coloque no lugar de http://LINK_AQUI o link correspondente a cada rede sociais (A ordem é: Feed, Facebook, Twitter, Google+, YouTube, Flickr) ou de cada item do menu;

Apagar um ícone
Caso queira tirar um ícone de qualquer rede social, apague a linha correspondente a ela, por exemplo: Tirar o ícone do YouTube, apague:
<a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-IKeAb8OgXfU/T9ieEKLi8JI/AAAAAAAAD4g/8FnePnFsnwk/s1600/youtube.png" title="YouTube"/></a>

Inserir novos itens no menu
Para colocar links no menu, insira o código antes de </ul>:

<li><a href="http://LINK_DA_PAGINA" title="NOME DA PÁGINA">PÁGINA</a></li>

Depois edite com o nome da página e o link correspondente.

Apagar itens do menu
Para apagar links do menu, apague a linha correspondente de <li> a </li>.

Aumentar largura da barra
Para aumentar a largura da barra, altere o style de .bar_topd, aumentando ou diminuindo o valor de width: 900px;
Exemplo: .bar_topd {width: 820px;margin: 0 auto;}

Fixar a barra no topo
É possível fixar a barra no topo, assim quando você rolar a página, a barra continua fixa no topo da página, acompanhando a sua visualização. Para isso, procure por .bar_topd e insira depois da primeira chave ({) o seguinte código:

position: fixed; right: 0; top: 0; vertical-align: top; 

Deve ficar mais ou menos assim: .bar_topd { position: fixed; right: 0; top: 0; vertical-align: top; width: 900px;margin: 0 auto;}

Mudar cor do fundo
Podemos mudar a cor do fundo da barra também, basta alterar o estilo de .bar_top, insira o código da cor no lugar de background: #000. Veja a tabela de cores em HTML aqui.

Você pode fazer várias mudanças, basta entender um pouquinho de HTML. Tudo isso você encontra no Google também.

Receba nossos posts por feed ou email

Posts Relacionados

71 Comentários

  1. eu adorei, coloquei e já está lá… muito show isso ^^ haha
    tem algum link aqui que explique a gente colocar guia redondo? ou diferente????

  2. Paulo, eu gostaria de exibir somente as redes sociais ao lado direito do Menu que já possuo, o problema é que não encontro sequer onde o inseri, dentro do HTML do Blog.

  3. No meu blog ficou um espaço entre o topo do site e a barra, como se a navbar do blogger ainda estivesse la, como faço para arrumar isso?

  4. Muito legal o menu, mas não estou conseguindo aplicar o estilo pra ele. Quando acrescento o código do estilo e clico em visualizar ou salvar (no Blogger), aparece a seguinte mensagem:

    “Declaração de variável inválida na skin da página: Não foi possível analisar as variáveis do skin porque elas apresentavam problemas de formação. Entrada: ……..VÁRIAS LINHAS DE CÓDIGO……..

    Error 500”

    Essa mensagem aparece também quando vou mudar uma fonte ou cor do site pelo HTML… você tem idéia do que pode ser? Fui no fórum do Blogger, e pediram pra mudar de navegador, já fiz isso e nada…

  5. Muito legal, testei em meus blogs.
    Em um blog pegou perfeitamente, mas em outro fica todo desconfigurado !

  6. Paulo, parabéns pelo post.

    Sou novatíssimo em blogs e estou tentando montar um. Estava procurando uma barra superior para evitar poluição nas laterais e essa parece que substitui bem a barra do blogger. Mas falta um item importante que é “seguir por email”. Tem como inserir um botão assim nela? Qual seria o código?

    Obrigado e abraço!

  7. Olá Paulo

    Amei a barra…só não estou conseguindo inserir. O skin eu achei mas o body não… Estava louca atrás desta barra, será que tem como me ajudar.
    obs.: admito que estou aprendendo como criar e personalizar agora, ainda estou batendo cabeça com face, twitter…feed e afins..rs..
    Novata! Mas acho que está ficando legal…
    Bom, aguardo um HELP!!
    Otimos comentários, já está nos meus favoritos para eu não perder mais de vista!

    Slds

  8. Não houve mudança nenhuma e nem reportou nenhum erro. Só permaneceu o modelo da mesma forma. já conferi os lugares, coloquei e tirei. Até mudei a cor do background pois meu fundo é escuro mas nada. O q pode ser?

  9. Socorro! Não consigo encontrar a tag no código do blogger, apenas a e quando adiciono antes ou depois dela a barra fica no footer e não no topo do blog como deveria ser.

  10. Eu coloquei em um blog teste e não deu certo fiz várias vezes, a barra com as redes entrou, só que no pé da página e não no topo, lá no final, não encontrei , só , e também clicando em cima do icone, não entra na página da rede, diz página não encontrada

  11. Muitos parabéns pelo vosso site.
    Será que dá para colocar também um código com o Instagram?
    Obrigada.

    Com os melhores cumprimentos,

    Natacha

      • Olá Paulo,
        Continuo com a mesma questão. É que ao colocar o meu código do Instagram continuo a ter o icon de outra qualquer rede social e não do Instagram. Será que me pode dar o código mesmo do Instagram? para eu depois só substituir o “LINK”?
        Obrigada e desculpe a maçada =/

        Cumprimentos,

        Natacha

  12. oi queria t perguntar fiz o menu de filme spor categorias generos etc porem como faço qunado vou postar o filme no meu blog para ser exclusivo so de especifico item exemplo menu = terror e postei com filmes e na galeria de terror como faço ?

  13. Boa tarde, Paulo! Não estou conseguindo fazer. Preciso muito dessa força! Não aparece nenhum local para salvar as configurações, pq aparece q preciso de permissão etc. Fora q não acho de jeito nenhum esse “body” para copiar e colar o link. Vc consegue me enviar algum passo a passo (algo mais claro) para eu me localizar/ No aguardo.

  14. Olá Paulo,

    Eu coloquei a barra apareceu-me no pé da página e não no topo. Eu no código não encontrei , pelo que coloquei a seguir a . será esse o problema?

  15. olá Paulo,

    Será que me podias ajudar em outra questão? Queria adicionar uma menu dropdown com as redes sociais em vez dos icones nesta barra. Como é que faço?

    Obrigado

  16. Olá Paulo, parabéns pelo artigo. Infelizmente não consegui intalar no meu blog, quando executo as ações, a barra só aparece no rodapé do blog. Como faço para que a barra apareça no topo do blog?

  17. Paulo, obrigada por disponibilizar a barra. Ajuda a otimizar bastante o blog. Infelizmente qdo insiro o código para a barra ficar fixa a barra se “quebra”. Vou deixar para vc dar uma olhada. Será que vc tem uma sugestão de como resolver isso. Grata !

  18. Olá, o seu tutorial me ajudou bastante, mas o código para fixar o menu não funcionou… ele fica fixo até uma certa parte, então alguns itens somem e até dá umas “travadas”… Se você pudesse me ajudar eu ficaria muito grato!!! Agora, sem querer abusar, gostaria de saber como faço pra alterar o espaço entre o “Home” e “About” apenas do lado direito!!! Obrigado desde já!!!

  19. Oi, queria agradecer por seu tutorial e menu que deram certo no meu blog, mas, o codigo para fixar não funcionou. Estive tentando e achei um jeito de fixar, então vou deixar aqui, por ai serve pra outros!
    Esse é o segundo codigo que vc passou, pra adicionar no STYLE.CSS
    Eu adicionei position:fixed; z-index:101; no final do primeiro .bar_top
    e só z-index:101; no segundo .bar_top e deu certo!

    BOa sorte com seus blogs! 🙂

    .bar_top {;width: 100%;height: 32px;background:#353535; position:fixed; z-index:101;}
    .bar_top img {height: 22px;float: right;margin: 5px 7px 0 0;opacity:0.8;filter:alpha(opacity=80); z-index:101;}
    .bar_top img:hover {opacity:1.0;filter:alpha(opacity=100);}
    .menu_barrax {float: left;margin: 0;padding: 0;}
    .menu_barrax li {float: left;list-style: none;font-size: 12px;font-weight: italic;font-family: Arial, Arial;text-transform: uppercase;margin: 0 0 0 10px;padding: 10px 0 0 0;}
    .menu_barrax li a{color: #f6f6f6;text-decoration: none; }
    .menu_barrax li a:hover {text-decoration: none;color: #fce5e5;}
    .transit {-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;transition:all 0.4s ease;}
    .bar_topd {width: 900px;margin: 0 auto;}

  20. Olá Paulo Estevão este ter artigo me ajudou bastante, testei em um Blogsite de testes que tenho. Só tive um problema, o problema é que o meu template não tem a tag como você havia citado então pretendi fazer o teste arriscando em colocar primeiro código antes da tag , deu tudo certo. Sendo assim eu personalizei a barra deixando do meu jeito e que combinasse com meu blogsite, a ideia era que ela ficasse acima do menú mas como não ficou deixei personalizada a barra como citei e com o fundo do menú pra ficar como uma barra discreta “oculta” e fixa, sendo que ela aparece assim que a pessoa rolar para baixo e não que ficou ótimo. Gostei bastante. Há na barra aproveitei pra fazer um outro teste que foi colocar um código de anúncios meu depois dos ícones das redes sociais e o teste deu certo com sucesso, a barra ficou ótima. Qualquer coisa dá uma olhadinha lá. http://cristiansall.es

    Muito Obrigado, Abraços.

  21. Olá Paulo Estevão este ter artigo me ajudou bastante, testei em um Blogsite de testes que tenho. Só tive um problema, o problema é que o meu template não tem a tag como você havia citado então pretendi fazer o teste arriscando em colocar primeiro código antes da tag , deu tudo certo. Sendo assim eu personalizei a barra deixando do meu jeito e que combinasse com meu blogsite, a ideia era que ela ficasse acima do menú mas como não ficou deixei personalizada a barra como citei e com o fundo do menú pra ficar como uma barra discreta “oculta” e fixa, sendo que ela aparece assim que a pessoa rolar para baixo e não que ficou ótimo. Gostei bastante. Há na barra aproveitei pra fazer um outro teste que foi colocar um código de anúncios meu depois dos ícones das redes sociais e o teste deu certo com sucesso, a barra ficou ótima.

    Valeu, muito Obrigado, Abraços.

  22. Paulo, deu certo aqui. Porém antes da barra fica um espaço branco e isso me incomoda, como faço para deixá-la totalmente no topo (retirar o espaço branco)??? Abração

  23. ola Paulo Estevão. gostei muito da dica mas me ajuda..

    no menu em vez de nome vou colocar imagens . ate ai tudo bem . mas a duvida `e que.
    eu quero desser o menu com as imagens e deixar a parte de rede social no topo
    mas quando desso as imagens do menu as da rede social dessem também .
    vc sabe resolver isso

  24. Quando colocar o cod pra barra descer junto com o blog, a minha BARRA não vem junto, só as palavras (ex: Inicio, Parceria, Envie uma dica) desce mas a barra não vem, como faço pra descer tudo juntos?

  25. Olá Paulo, é ótima a dica! no outro tema que utilizava eu conseguir colocar nesse não consigo. não aparece no site em lugar nenhum, mesmo colocando depois da tag body 🙁

Faça um comentário