Blogger Design Redes Sociais WordPress
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.
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.
🙁 buaaaaaa
Obrigado funcionou mais nao consegui personalizar mais de qualquer jeito obrigado
Adorei! Como faço para chegar mais para a direita? Obrigada
Me manda o link do blog.
Paulo, parabéns pelo post.
Sou novatíssimo em blogs e estou tentando montar um. Estava procurando uma barra superior para evitar poluição nas laterais e essa parece que substitui bem a barra do blogger. Mas falta um item importante que é “seguir por email”. Tem como inserir um botão assim nela? Qual seria o código?
Obrigado e abraço!
Olá Paulo
Amei a barra…só não estou conseguindo inserir. O skin eu achei mas o body não… Estava louca atrás desta barra, será que tem como me ajudar.
obs.: admito que estou aprendendo como criar e personalizar agora, ainda estou batendo cabeça com face, twitter…feed e afins..rs..
Novata! Mas acho que está ficando legal…
Bom, aguardo um HELP!!
Otimos comentários, já está nos meus favoritos para eu não perder mais de vista!
Slds
Não houve mudança nenhuma e nem reportou nenhum erro. Só permaneceu o modelo da mesma forma. já conferi os lugares, coloquei e tirei. Até mudei a cor do background pois meu fundo é escuro mas nada. O q pode ser?
Ajudou bastante obrigada!
Tenho uma pergunta: eu só posso adcionar marcadores se criar novos posts?
Socorro! Não consigo encontrar a tag no código do blogger, apenas a e quando adiciono antes ou depois dela a barra fica no footer e não no topo do blog como deveria ser.
Olá Paulo,
Eu fiz os passos mas a barra ficou meio transparente e sem links, dessa forma::::::: http://dresstofeel.blogspot.com.br/
O que eu faço ?
Obrigada…
Em meu blog, a barra aparece apenas acima do cabeçalho, eu gostaria que ficasse em toda a extensão. E os botões de redes sociais estão para fora da barra.
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
Olá Paulo,
Continuo com a mesma questão. É que ao colocar o meu código do Instagram continuo a ter o icon de outra qualquer rede social e não do Instagram. Será que me pode dar o código mesmo do Instagram? para eu depois só substituir o “LINK”?
Obrigada e desculpe a maçada =/
Cumprimentos,
Natacha
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.
Olá
Não consigo congelar a barra no topo do site.
Obrigado por divulgar o código.
Abs,
oi queria t perguntar fiz o menu de filme spor categorias generos etc porem como faço qunado vou postar o filme no meu blog para ser exclusivo so de especifico item exemplo menu = terror e postei com filmes e na galeria de terror como faço ?
Boa tarde, Paulo! Não estou conseguindo fazer. Preciso muito dessa força! Não aparece nenhum local para salvar as configurações, pq aparece q preciso de permissão etc. Fora q não acho de jeito nenhum esse “body” para copiar e colar o link. Vc consegue me enviar algum passo a passo (algo mais claro) para eu me localizar/ No aguardo.
Ficou lindo no meu! Obrigada!
Olá Paulo,
Eu coloquei a barra apareceu-me no pé da página e não no topo. Eu no código não encontrei , pelo que coloquei a seguir a . será esse o problema?
Qual o link do seu blog, Diana?
olá Paulo,
Será que me podias ajudar em outra questão? Queria adicionar uma menu dropdown com as redes sociais em vez dos icones nesta barra. Como é que faço?
Obrigado
Então Diana, você tem que saber de CSS e HTML. Com CSS sem Javascript você faz isso. No Google tem muitos códigos, dá uma olhada.
abraços.
ainda sou “newbie” nisto. Obrigada!
Olá Paulo, parabéns pelo artigo. Infelizmente não consegui intalar no meu blog, quando executo as ações, a barra só aparece no rodapé do blog. Como faço para que a barra apareça no topo do blog?
ótimo tutorial, funcionou muito bem!
Bom dia, Paulo
gostaria de saber se é possivel implementar uma caixa de busca dentro dessa barra inserida?
Paulo, obrigada por disponibilizar a barra. Ajuda a otimizar bastante o blog. Infelizmente qdo insiro o código para a barra ficar fixa a barra se “quebra”. Vou deixar para vc dar uma olhada. Será que vc tem uma sugestão de como resolver isso. Grata !
Muito bom. Obrigado por compartilhar com tantos detalhes.
Abraços!
Muito bacana, valew.
Olá, o seu tutorial me ajudou bastante, mas o código para fixar o menu não funcionou… ele fica fixo até uma certa parte, então alguns itens somem e até dá umas “travadas”… Se você pudesse me ajudar eu ficaria muito grato!!! Agora, sem querer abusar, gostaria de saber como faço pra alterar o espaço entre o “Home” e “About” apenas do lado direito!!! Obrigado desde já!!!
Oi, queria agradecer por seu tutorial e menu que deram certo no meu blog, mas, o codigo para fixar não funcionou. Estive tentando e achei um jeito de fixar, então vou deixar aqui, por ai serve pra outros!
Esse é o segundo codigo que vc passou, pra adicionar no STYLE.CSS
Eu adicionei position:fixed; z-index:101; no final do primeiro .bar_top
e só z-index:101; no segundo .bar_top e deu certo!
BOa sorte com seus blogs! 🙂
.bar_top {;width: 100%;height: 32px;background:#353535; position:fixed; z-index:101;}
.bar_top img {height: 22px;float: right;margin: 5px 7px 0 0;opacity:0.8;filter:alpha(opacity=80); z-index:101;}
.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: 12px;font-weight: italic;font-family: Arial, Arial;text-transform: uppercase;margin: 0 0 0 10px;padding: 10px 0 0 0;}
.menu_barrax li a{color: #f6f6f6;text-decoration: none; }
.menu_barrax li a:hover {text-decoration: none;color: #fce5e5;}
.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;}
Olá Paulo Estevão este ter artigo me ajudou bastante, testei em um Blogsite de testes que tenho. Só tive um problema, o problema é que o meu template não tem a tag como você havia citado então pretendi fazer o teste arriscando em colocar primeiro código antes da tag , deu tudo certo. Sendo assim eu personalizei a barra deixando do meu jeito e que combinasse com meu blogsite, a ideia era que ela ficasse acima do menú mas como não ficou deixei personalizada a barra como citei e com o fundo do menú pra ficar como uma barra discreta “oculta” e fixa, sendo que ela aparece assim que a pessoa rolar para baixo e não que ficou ótimo. Gostei bastante. Há na barra aproveitei pra fazer um outro teste que foi colocar um código de anúncios meu depois dos ícones das redes sociais e o teste deu certo com sucesso, a barra ficou ótima. Qualquer coisa dá uma olhadinha lá. http://cristiansall.es
Muito Obrigado, Abraços.
Olá Paulo Estevão este ter artigo me ajudou bastante, testei em um Blogsite de testes que tenho. Só tive um problema, o problema é que o meu template não tem a tag como você havia citado então pretendi fazer o teste arriscando em colocar primeiro código antes da tag , deu tudo certo. Sendo assim eu personalizei a barra deixando do meu jeito e que combinasse com meu blogsite, a ideia era que ela ficasse acima do menú mas como não ficou deixei personalizada a barra como citei e com o fundo do menú pra ficar como uma barra discreta “oculta” e fixa, sendo que ela aparece assim que a pessoa rolar para baixo e não que ficou ótimo. Gostei bastante. Há na barra aproveitei pra fazer um outro teste que foi colocar um código de anúncios meu depois dos ícones das redes sociais e o teste deu certo com sucesso, a barra ficou ótima.
Valeu, muito Obrigado, Abraços.
Paulo, deu certo aqui. Mas como tira a faixa branca que ficou acima da faixa preto? Help pls!!!
Paulo, deu certo aqui. Porém antes da barra fica um espaço branco e isso me incomoda, como faço para deixá-la totalmente no topo (retirar o espaço branco)??? Abração
ola Paulo Estevão. gostei muito da dica mas me ajuda..
no menu em vez de nome vou colocar imagens . ate ai tudo bem . mas a duvida `e que.
eu quero desser o menu com as imagens e deixar a parte de rede social no topo
mas quando desso as imagens do menu as da rede social dessem também .
vc sabe resolver isso
Quando colocar o cod pra barra descer junto com o blog, a minha BARRA não vem junto, só as palavras (ex: Inicio, Parceria, Envie uma dica) desce mas a barra não vem, como faço pra descer tudo juntos?
Olá Paulo, é ótima a dica! no outro tema que utilizava eu conseguir colocar nesse não consigo. não aparece no site em lugar nenhum, mesmo colocando depois da tag body 🙁
Boa tarde, caríssimo!
Muiiiiiiiiito grato! Precisava disso para o site de um amigo, cuja plataforma é WordPress. Funcionou esplendidamente.
Grande abraço!
Marcos
Oi, o meu template, já veio com os ícones de rede sociais, no topo do blog, mas meu problema é não conseguir colocar as minhas redes sociais nele, como faço isso? Obrigada!