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.
eu adorei, coloquei e já está lá… muito show isso ^^ haha
tem algum link aqui que explique a gente colocar guia redondo? ou diferente????
Como assim Karine?
abraços
Ótima dica, Paulo!
Mas por que minha barra preta ficou abaixo dos ícones?
Abraço.
Já consegui retirar o espaço em branco que ficava acima da barra preta, era problema da Navbar… mas não consigo que a barra preta fique fixada com os ícones na parte superior.
No seu CSS, coloque isso: #navbar{display: none;}
abraços
Não consegui, não deu certo. De qualquer forma, obrigado!
Cole isso no CSS, não tem erro. É um estilo, eu acabei de testar nos eu blog.
abraço
Pois é, Paulo, como testou no meu blog?
Aí está como está meu css:
/* Navbar
———————————————– */
#navbar-iframe { display: none; }
]]>
E continua não funcionando.
Como vê, estou colocando no local correto e mesmo assim a barra preta está abaixo dos ícones, como se a navbar não tivesse sido excluída.
Usei o Debug do Chrome, só isso.
Coloca assim:
display: none !important;
abraços
Curti a dica acho que estarei adicionando nos meus blogs em breve para ver como fica.
Obrigado Paulo.
o/
Volte sempre Leonardo.
abraços
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.
Desculpe, Paulo, já o encontrei é que havia colocado outro Menu via Gadget.
Interessante artigo
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?
Qual é o link do seu blog?
eu fiz em um blog teste
Certo, mas como vou ver.
gostaria de saber também como dividir o fundo do blog em duas partes uma para o topo e outra para o corpo
Você tem que criar uma única imagem.
Muito bom, ficou ótimo em meu blog. Muito obrigado, tava precisando muito
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…
Você deve estar colocando o código onde não deve. Tente colocar em outras partes do layout.
abraços
Muito legal, testei em meus blogs.
Em um blog pegou perfeitamente, mas em outro fica todo desconfigurado !
como faço pra tirar w??
Apague os códigos que você inseriu. Só isso.
Adorei! Como faço para chegar mais para a direita? Obrigada
Me manda o link do blog.
Vlw Pela dika adorei, funcionou!!!
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
Você colocou no lugar certo? E editor os links das redes?
abraços
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
Natacha, tudo bem?
Tem sim, é só você copiar e colocar o código que insere a imagem do Instagram junto as outras imagens.
abraços
Oi Paulo.
EStou fazendo num blog de testes e ao rolar a página só os ícones das redes sociais acompanham a rolagem, como faço pra ser o menu todo aparecer junto na rolagem?
http://templates-teste14.blogspot.com.br/
abs!
Coloca na div principal do menu o seguinte css: position: fixed;
Abraços.
Eu fiz essa parte que disse em Fixar a barra no topo. Mas continua o problema.