Fábrica das Dicas: 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.

Veja o exemplo do menu 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:

<li><a href="/" title="Início">Início</a></li>

<li><a href="http://LINK_AQUI" title="Sobre">Sobre</a></li>

</ul>

</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:

<li><a href="/" title="Início">Início</a></li>

<li><a href="http://LINK_AQUI" title="Sobre">Sobre</a></li>

</ul>

</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:

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.

Fonte: CódigosBlog