4 de out de 2012

Primeiramente meus agradecimentos ao grande Paulo Estevão!
Depois de muito pesquisar, encontrei sobre o tema em epígrafe,


a saber:
fonte e créditos:

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.

0 comentários:

Postar um comentário

Mensagem do formulário de comentário:

Seguidores

Follow by Email