22/07/2013

Tutorial: Como Colocar uma Barra Social no Blogger

Todo blog geralmente possui uma barra de ícones com endereços para os perfis nas redes sociais nas quais o blog está presente. Um exemplo de barrinha é mostrado na imagem abaixo (seta branca). Nela, podemos ver a barrinha utilizada atualmente pelo Moda na Janela.



Para criar esta barrinha, devemos seguir os passos abaixo:

Primeiro, entre em sua conta do Blogger e, no menu à esquerda, clique na opção "Layout" (na imagem abaixo, destacado em vermelho).





Na página que se abre, selecione a opção "Adicionar um Gadget", conforme imagem abaixo:




Uma janela pop-up se abrirá, oferecendo diversas opções de gadget. Role a página até encontrar a opção "HTML/JavaScript" (retângulo vermelho) e clique no botão com sinal de "mais" (indicado, na imagem, pela seta branca).



Na nova janela, você pode escolher adicionar um título ou deixar em branco, como no Moda na Janela. No campo conteúdo (destacado em vermelho), adicione o código HTML que explicaremos a seguir.



O código HTML deve ser construído seguindo este modelo:

<center>

<a href="endereço do site de destino" target="_blank"><img src="endereço da imagem" alt="texto alternativo" title="texto que descreva a imagem" height="altura da imagem" width="largura da imagem" /></a>

</center>

Explicando o código:
  • Os trechos em azul são os trechos que precisam ser alterados.
  • As tags <center> e </center> fazem com que tudo que estiver entre elas fique centralizado na horizontal. Caso prefira a barra alinhada à esquerda, remova estas tags.
  • Substitua endereço do site de destino pela URL (endereço da rede social) para onde o usuário deve ser levado quando clicar no link. Não remova as aspas!
  • endereço da  imagem é onde deve ser colocado o endereço da imagem, ou seja, o caminho para ela (geralmente termina em .gif, .jpg ou .png).
  • texto alternativo é o texto que será carregado caso a imagem não carregue. Coloque um texto curto que represente a imagem.
  • texto que descreva a imagem é aquele texto que aparece quando passamos o mouse sobre uma imagem na Internet. Personalize-o com algo que descreva o link de destino ou a imagem.
  • Os trechos altura da imagem e largura da imagem devem ser preenchidos com as dimensões do ícone de rede social que você escolheu, em pixels. Ex.: 200px. Caso não queira determinar, digite 100% em cada um deles.
  • O trecho entre as tags <center> e </center> (começando em <a e terminando em </a>) é para inserção de uma imagem com link e deve ser repetido para cada ícone de rede social a ser inserido.
Espero que esse post ajude vocês.

* Esse post foi feito à pedido de uma leitora, a Monique. Tem uma dúvida, sugestão ou crítica? Não deixe de enviar um e-mail para contato@modanajanela.com .*

Beiiijos :*

Comente com o Facebook:

38 comentários:

  1. Fiz isso ontem, e adoreeei o resultado!!
    super beijo

    Mania de Bruna
    @ManiaDeBruna

    ResponderExcluir
  2. Amei a dica, eu estava super precisando disso :)
    beijos
    barradosno-baile.blogspot.com

    ResponderExcluir
  3. Oi!
    Adorei o tutorial e quero fazer no meu blog!
    Só queria saber qual as dimensões que tu usou nos teus ícones, pois quero deixar mais ou menos no mesmo tamanho.

    Obrigada!!
    http://www.bahguria.com.br/

    ResponderExcluir
  4. Aaaaah, adorei, adorei, adorei! To me sentindo super "importante" por ter tirado minha dúvida haha
    Muito obrigada, vou tentar fazer no meu agora!
    Adoro seu blog! Beijos

    ResponderExcluir
  5. Muito bem explicado, adorei o tutorial, com certeza muito útil tbm *-*
    xoxo'

    imaginebelleblog.blogspot.com.br
    https://www.facebook.com/blogimaginebelle

    ResponderExcluir
  6. aaaai eu amei esse post, eu estava procurando em sites como fazer essas barrinhas e nada encontrava, agora vou utilizar essas dicas, vai me ajudar bastante, obrigada Lari! :D
    :*

    ResponderExcluir
  7. Obrigada , estava desesperada :)

    Eu queria que saber se você pode me enviar um icon igual a esses do seu instagram , facebook , só que do ask . Obrigado :)

    ResponderExcluir
    Respostas
    1. Não achei do ask assim Luana :/
      Te aconselho a pegar o ícone do ask e tentar alterar a cor para cinza, assim fica mais parecido.
      Vi o resultado no seu blog. Ficou ótimo!

      Excluir
  8. Respostas
    1. eu consegui colocar, mas nn apareceu a imagem :( olha aí: http://blogpartiubeleza.blogspot.com.br/

      Excluir
  9. Muito bom ,obrigada pela dica !

    ResponderExcluir
  10. Estava precisando de algo diferente !
    http://mimosasfashionk123.blogspot.com.br/

    ResponderExcluir
  11. Amei a dica! Ajudou pra caramba.- olha como ficou: http://livreregistro.blogspot.com.br/
    ;)

    ResponderExcluir
    Respostas
    1. Ficou ótimo Helô!!!

      Que bom que ajudei.

      Beijos

      Excluir
  12. Nao entendi o passo 4, o que é o ENDEREÇO DE IMAGEM?

    ResponderExcluir
    Respostas
    1. O endereço da imagem é o link que nos leva àquela imagem. :)
      Ele é como qualquer endereço de site da internet, mas geralmente termina com ".jpg", ".png" ou ".gif". No Google Chrome, se você clicar com o botão direito sobre uma imagem e selecionar a opção "Copiar URL da Imagem", consegue o endereço da imagem e bastará dar "CTRL+V" no local indicado no tutorial.

      Excluir
  13. Como vc faz para colocar os icones na horizontal, um do lado do outro?

    ResponderExcluir
    Respostas
    1. Eles ficam naturalmente na horizontal, desde que haja espaço suficiente. Na coluna da direita do meu blog, por exemplo, eles couberam. :)

      Quando o espaço é insuficiente, há quebra de linha.

      Excluir
  14. ola!td bem?tenho uma duvida na verdade msm eu to pedindo ajuda kkkk então o template que eu tenho no meu blog ja vem com essa barra social mas quando eu clico aparece que a pagina nao foi encontrada e quanddo eu tento colocar os links para aparecer minhas redes sociais não vai!!o que eu faço se quiser ver o link ta aqui
    http://princessimperfect014.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Olá! :)

      Bom, vamos por partes. Tome como exemplo o link do facebook.

      Neste trecho:
      <a href="LINKDOSEUFACEBOOK"

      Quando for colocar o seu perfil do facebook, substitua o trecho entre aspas LINKDOSEUFACEBOOK pelo link do seu perfil. Comece por http:// (link completo).
      Só não se esqueça de que as aspas em volta de LINKDOSEUFACEBOOK no código devem ser mantidas. Se você não colocar o link completo, inclusive com http no começo, o link pode não ser reconhecido.

      Qualquer coisa, me avise! :)

      Excluir
  15. Não entendi e não consegui colocar!!

    ResponderExcluir
    Respostas
    1. Que pena Bianca, mas é só seguir o passo a passo. As outras meninas estão conseguindo. Qualquer dúvida é só você deixar explicadinha aqui que tento te ajudar.

      Excluir
  16. Amei a dica, fiz isso no meu blog :) *-*

    ResponderExcluir
  17. Eu até consegui linkar,porém as imagens não aparecem, e os ícones também não ficam um do lado do outro assim como os do seu Blog. O que quer dizer com link da imagem, como consigo esse link?

    Beijos:*

    ResponderExcluir
    Respostas
    1. Algumas coisas podem mudar, já que você usa um template free, mas não aparecerá nenhuma imagem até que você coloque seus links. É só achar um ícone que você queira usar, clicar com botão direito e "copiar url da imagem". Esse é o link.

      Excluir
  18. E como coloco esse box de comentário no meu blog? tenho no blogger e baixei um templete free.

    ResponderExcluir
    Respostas
    1. Qual box Ana? O do facebook foi uma mistura de vários tutoriais, mas tem alguns muito bons no Youtube.

      Excluir
  19. Eu coloquei mas aparece um em cima do outro e não alinhados os dois na horizontal.

    ResponderExcluir
    Respostas
    1. Provavelmente tem relação com a largura da lateral do seu blog ou com a largura dos ícones.

      Excluir
  20. Que show amei seu blog, parabéns flor! E obrigada pelas dicas!

    ResponderExcluir
  21. Oi eu de novo , como faço pra por aquela barrinha completa mas ao clicar em cada icone vai pra pagina correta? ou como por um do lado do outro?

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...