Quer saber como se faz: ::"Inserir menu com redes sociais no topo do blog"
Autor: edilene bds | Publicado: 2012-10-04T10:07:00-07:00



Primeiramente meus agradecimentos ao grande Paulo Estevão!

Depois de muito pesquisar, encontrei sobre o tema em epígrafe,

no&nbsp;codigosblog





a saber:

▼

fonte e créditos:

codigosblog



▼

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&nbsp;aqui&nbsp;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. &nbsp;Abaixo teremos um tutorial para&nbsp;Blogger&nbsp;e&nbsp;WordPress, mas isso não impede você de usar em outras plataformas ou sites.

Blogger

1)&nbsp;Faça login no&nbsp;Blogger,&nbsp;

entre em “Modelo” -&gt; “Editar HTML” -&gt; “Proseguir”.

2)&nbsp;Procure por&nbsp;&lt;body&gt;&nbsp;e&nbsp;

cole logo em seguida&nbsp;

o código:



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

3)&nbsp;Procure por&nbsp;]]&gt;&lt;/b:skin&gt;&nbsp;

e cole o seguinte código&nbsp;ANTES&nbsp;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)&nbsp;Teste e salve,&nbsp;caso tenha dúvidas de como personalizar a barra,&nbsp;alterar cores, inserir links, etc.,&nbsp;siga os passos no tópico logo depois da instalação&nbsp;para WordPress (final do post).













WordPress

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

2)&nbsp;Procure a página que contenha a tag&nbsp;&lt;body&gt;, geralmente é a página&nbsp;Cabeçalho (header.php). Insira o código abaixo logo após a tag encontrada:
&lt;div class="bar_top"&gt;
&lt;div class="bar_topd"&gt;
 &lt;ul class="menu_barrax"&gt;
  &lt;li&gt;&lt;a href="/" title="Início"&gt;Início&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://LINK_AQUI" title="Sobre"&gt;Sobre&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;div class="transit"&gt;
  &lt;a href="http://LINK_AQUI" target="_blank"&gt;&lt;img src="http://4.bp.blogspot.com/-espzqjF5p38/T9ieDflylZI/AAAAAAAAD4Q/rGSC3YoAGxg/s1600/rss.png" title="Feed RSS"/&gt;&lt;/a&gt;
  &lt;a href="http://LINK_AQUI" target="_blank"&gt;&lt;img src="http://4.bp.blogspot.com/-4di8wyO8reU/T9ieCNjxkrI/AAAAAAAAD34/n9mdGQl36go/s1600/facebook.png" title="Facebook"/&gt;&lt;/a&gt;
  &lt;a href="http://LINK_AQUI" target="_blank"&gt;&lt;img src="http://1.bp.blogspot.com/-V6AUHhYK_tw/T9ieDhXQM3I/AAAAAAAAD4Y/2SX5sC04x2c/s1600/twitter.png" title="Twitter"/&gt;&lt;/a&gt;
  &lt;a href="http://LINK_AQUI" target="_blank"&gt;&lt;img src="http://3.bp.blogspot.com/-inXXbVbM-pQ/T9ieDGHlKLI/AAAAAAAAD4I/jnthUijJjmo/s1600/google+.png" title="Google Plus"/&gt;&lt;/a&gt;
  &lt;a href="http://LINK_AQUI" target="_blank"&gt;&lt;img src="http://3.bp.blogspot.com/-IKeAb8OgXfU/T9ieEKLi8JI/AAAAAAAAD4g/8FnePnFsnwk/s1600/youtube.png" title="YouTube"/&gt;&lt;/a&gt;
  &lt;a href="http://LINK_AQUI" target="_blank"&gt;&lt;img src="http://3.bp.blogspot.com/-reMynxRhgfw/T9ieClin7NI/AAAAAAAAD4A/1JXcZtwjPMk/s1600/flickr.png" title="Flickr"/&gt;&lt;/a&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

3)&nbsp;Procure a&nbsp;Folha de estilos (style.css)&nbsp;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)&nbsp;Para personalizar a barra siga as orientações abaixo.

Personalizando a barra

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

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

Inserir novos itens no menuPara colocar links no menu, insira o código antes de&nbsp;&lt;/ul&gt;:
&lt;li&gt;&lt;a href="http://LINK_DA_PAGINA" title="NOME DA PÁGINA"&gt;PÁGINA&lt;/a&gt;&lt;/li&gt;

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

Apagar itens do menuPara apagar links do menu, apague a linha correspondente de&nbsp;&lt;li&gt;&nbsp;a&nbsp;&lt;/li&gt;.

Aumentar largura da barraPara aumentar a largura da barra, altere o style de&nbsp;.bar_topd, aumentando ou diminuindo o valor de width: 900px;Exemplo:&nbsp;.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&nbsp;.bar_topd&nbsp;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:&nbsp;



.bar_topd { position: fixed;&nbsp;

right: 0; top: 0;&nbsp;

vertical-align: top;&nbsp;

width: 900px;

margin: 0 auto;}



Mudar cor do fundo

Podemos mudar a cor do fundo da barra também,&nbsp;

basta alterar o estilo de&nbsp;

.bar_top,



insira o código da cor no lugar de&nbsp;

background: #000.&nbsp;



Veja a tabela de cores em HTML&nbsp;aqui.

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




&nbsp;