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

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

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

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

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

  10. já consegui colocar no topo. em vez de colocar o código depois de , no meu caso como não tenho, devo colocar depois de

    Obrigado!

Faça um comentário