Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1474200475
Vida do cache: 1475496474
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Blogger Design Redes Sociais WordPress

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.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

73 Comentários

  1. Karine disse:

    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. Leandro disse:

    Ótima dica, Paulo!

    Mas por que minha barra preta ficou abaixo dos ícones?

    Abraço.

  3. Leonardo disse:

    Curti a dica acho que estarei adicionando nos meus blogs em breve para ver como fica.

    Obrigado Paulo.

  4. Edson F. disse:

    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.

  5. Edson F. disse:

    Desculpe, Paulo, já o encontrei é que havia colocado outro Menu via Gadget.

  6. joao disse:

    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?

  7. joao disse:

    gostaria de saber também como dividir o fundo do blog em duas partes uma para o topo e outra para o corpo

  8. Jefferson disse:

    Muito bom, ficou ótimo em meu blog. Muito obrigado, tava precisando muito

  9. o10 disse:

    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…

  10. Danielly Vieira disse:

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

  11. Livia disse:

    como faço pra tirar w??

  12. Janeson ML disse:

    Obrigado funcionou mais nao consegui personalizar mais de qualquer jeito obrigado

  13. Rita disse:

    Adorei! Como faço para chegar mais para a direita? Obrigada

  14. André disse:

    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!

  15. Daniela disse:

    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

  16. Fernanda disse:

    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?

  17. Lidiana disse:

    Ajudou bastante obrigada!
    Tenho uma pergunta: eu só posso adcionar marcadores se criar novos posts?

  18. Lucy disse:

    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.

  19. Helena Dib disse:

    Olá Paulo,
    Eu fiz os passos mas a barra ficou meio transparente e sem links, dessa forma::::::: http://dresstofeel.blogspot.com.br/

    O que eu faço ?
    Obrigada…

  20. Em meu blog, a barra aparece apenas acima do cabeçalho, eu gostaria que ficasse em toda a extensão. E os botões de redes sociais estão para fora da barra.

  21. Rap Kuia disse:

    Vlw Pela dika adorei, funcionou!!!

  22. jrartesanatos disse:

    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

  23. Natacha disse:

    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

    • Natacha, tudo bem?
      Tem sim, é só você copiar e colocar o código que insere a imagem do Instagram junto as outras imagens.
      abraços

      • Natacha disse:

        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

  24. kakau disse:

    Oi Paulo.
    EStou fazendo num blog de testes e ao rolar a página só os ícones das redes sociais acompanham a rolagem, como faço pra ser o menu todo aparecer junto na rolagem?

    http://templates-teste14.blogspot.com.br/

    abs!

  25. Gustavo disse:

    Olá
    Não consigo congelar a barra no topo do site.
    Obrigado por divulgar o código.
    Abs,

  26. renato satriani disse:

    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 ?

  27. Eduarda disse:

    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.

  28. Jenifer disse:

    Ficou lindo no meu! Obrigada!

  29. diana disse:

    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?

  30. diana disse:

    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

  31. jocimar Dias disse:

    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?

  32. Ina Ribeiro disse:

    ótimo tutorial, funcionou muito bem!

  33. Bom dia, Paulo

    gostaria de saber se é possivel implementar uma caixa de busca dentro dessa barra inserida?

  34. Cássia disse:

    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 !

  35. kleber disse:

    Muito bom. Obrigado por compartilhar com tantos detalhes.

    Abraços!

  36. Fábio Inouye disse:

    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á!!!

  37. 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;}

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

  39. Cristian Salles disse:

    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.

  40. Henrique Neto disse:

    Paulo, deu certo aqui. Mas como tira a faixa branca que ficou acima da faixa preto? Help pls!!!

  41. Henrique Neto disse:

    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

  42. jayro disse:

    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

  43. Felipe Dutra disse:

    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?

  44. Taty disse:

    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 🙁

  45. Boa tarde, caríssimo!

    Muiiiiiiiiito grato! Precisava disso para o site de um amigo, cuja plataforma é WordPress. Funcionou esplendidamente.

    Grande abraço!

    Marcos

  46. Barbara disse:

    Oi, o meu template, já veio com os ícones de rede sociais, no topo do blog, mas meu problema é não conseguir colocar as minhas redes sociais nele, como faço isso? Obrigada!

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.