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 atualizações por e-mail:

Blogger

WordPress

Personalizando a barra