7 de dez de 2012

como adicionar botões de redes sociais personalizados no blog



A primeira pergunta que me fizeram sobre meu blog foi como eu adicionei esses botões customizados de redes sociais ali na barra lateral esquerda. Eles são legais porque tiram o colorido dos botões oferecidos pelas redes sociais, cujos tamanhos e cores nunca estão de acordo. E com eles, você deixa seu blog com a sua cara.
Eu descobri como adicioná-los graças ao tutorial original do blog Her New Leaf, que embora seja um blog da Wordpress, divide tutoriais interessantes e também úteis para Blogger.
Abaixo estão algumas sugestões de botões personalizados oferecidos por blogueiros para download gratuito para você escolher  e o PAP para adicioná-los ao blog.


 









Depois de baixar os botões personalizados desejados no seu computador, carregue-os num site de hospedagem grátis de imagens. Pode ser o PhotobucketTinypic ou algum outro da sua preferência. Eu uso o Photobucket e vou usar o exemplo a partir dele. Faça uma conta lá e carregue os botões personalizados na sua galeria deste site de hospedagem de imagens.

Assim que carregados, o site fornece o URL da imagem que vai ser usado para compormos o código html do gadget dos botões personalizados, como na imagem abaixo:






Os botões são adicionados por meio de um código html em um gadget do layout do seu Blogger. Portanto, faça este caminho:


Do Painel do Blogger > Layout > clique em Adicione um Gadget > selecione HTML/Javascript  e cole o seguinte código abaixo:


<a href="URL do Link" target="_blank"><img src="URL da imagem" /></a>


URL do Link: é o link que deseja que seja visitado. Por exemplo, se quiser adicionar aqui a sua fan page do Facebook, substitua o texto em laranja pelo endereço da sua fan page no Facebook.

URL da imagem: este é o URL da sua imagem fornecido pelo site de hospedagem de imagens. Substitua pelo código que foi copiado como no exemplo da imagem acima. Se for por exemplo, para o Facebook, copie e cole aqui a imagem do botão do Facebook.


Faça o mesmo processo para cada botão que quiser acrescentar e eles aparecerão automaticamente, um do lado do outro no blog:



Dicas:

- Visualize e teste clicando nos botões para testar se os botões estão direcionando seus leitores para o link correto.

- Este código html já é composto de uma forma que o leitor do seu blog, ao clicar nele, seja direcionado para outra página. Não abandonando, assim, a página do seu, até porque isso é, para nós, muito interessante.

- Caso o tamanho deles não agradem no seu blog. Tente redimensionar o tamanho dos botões quando carregar no site de hospedagem de imagens e a partir do código com as imagens alteradas, adicionar no código html.

Dúvidas? Deixe seu comentário abaixo e eu te ajudo.


37 comentários :

  1. Dica linda! Acumularei todas e darei uma repaginada no meu blog. Sempre me irritei com os coloridos dos botões. Mas foi o melhor que consegui até agora.
    beijo,

    ResponderExcluir
  2. Oi Priscila!
    Que dica legal, vou tentar fazer com todo cuidado! :)
    Gostei dos modelos.

    bjs, ótimo finde para vocês.

    Ah, esqueci de falar 'lá em casa'.
    Estava com erro no painel de seguidores, pois quando linkei para deu a mensagem de erro.
    Vi que você se inscreveu novamente...
    Testei e os dois estão funcionando!:)

    ResponderExcluir
    Respostas
    1. Eu sei que apesar da minha atrapalhada da semana, dá um medinho.
      Mas é só um gadget do Layout do Blogger. Qualquer coisa é só apagar.

      Obrigada pela dica do painel, Maria.
      Pelo jeito, tá tudo certo agora.

      Excluir
    2. Oi Priscila!
      Está sim :)
      Que bom, né?

      Super finde!
      bjsss

      Excluir
  3. PRI
    Me encanto su tutorial no me aparto de su blog y la sigo
    Angelica

    ResponderExcluir
  4. Bom dia Pri.

    Que ótima explicação essa sua, mas sabe q mesmo assim ainda fico receosa de fazer isso, mas vou guardar essa sua postagem no meu arquivo e quem sabe um dia desses eu tento.

    Beijos, e uma ótima semana pra você.

    ResponderExcluir
    Respostas
    1. Então, Regina.
      Por ser apenas um gadget do Layout, ele pode ser apagado ou até recomeçado.
      Por isso dei essa dica, porque não tem a ver com o html do blog.
      Aí a coisa complica, né? :)

      Beijo!

      Excluir
  5. Pri,
    Adorei a dicaa!
    Eu tenho no meu mais cada um é de acordo com acor da Rede..
    Vou fazer em breve!!
    XerOOo

    ResponderExcluir
  6. nossa quero agradecer muito...segui as instruções e pronto meu blog tá em mais bonito.
    Obrigada mesmo.
    www.joialerismo.com

    ResponderExcluir
  7. Ola,achei ótimo a sua explicação consegui colocar na minha pagina é super simples, obrigada!
    Estou seguindo se blog com certeza!!!!
    Grande abraços!!!

    Meu Blog:http://livrosajaneladaimaginacao.blogspot.com.br/
    Fan Page:https://www.facebook.com/ajaneladaimaginacao
    Twitter: @DaniCasquet

    ResponderExcluir
  8. olha fiz isso mas a imagem fica como aquela foto que nao carrega , a foto de uma paisagem sabe? o que pode ser ? responde pfvr..

    ResponderExcluir
  9. Olá Celly

    Como você não deixou um link eu não tenho como te visitar pra te dar um socorro ou até entender melhor como a imagem ficou.

    Me deixa seu link pra gente conversar, ok!

    Beijo! ;)

    ResponderExcluir
    Respostas
    1. ta bwm vo deixar aki : http://mechacorderosa.blogspot.com/ , coloquei tudo do jeitinho que voçe disse mas nao funciona

      Excluir
  10. o meu e mechacorderosa.blogspot.com por favor ve o que voçe pode fazer ai...

    ResponderExcluir
  11. ah ja consegui nao sei o que eu fiz mas agora ta funcionando mas masmo aasim muito obrigado , voçe me ajudou demais obrigada mesmo pri . vç salvou minha vida

    ResponderExcluir
    Respostas
    1. Celly, eu visitei seu blog e deixei minha ajuda nos comentários.
      Dê uma olhadinha lá nos seus comentários a aprovar, ok. ;)
      Qualquer dúvida me escreva de novo! ♥

      Excluir
    2. dei uma olhada nos comentarios . vou fazer isso ate por que tava insatisfeita com o fundo branco dos botoes, obrigada :)

      Excluir
  12. Olá, super útil a melhor explicação que encontrei.
    Já estou seguindo se puder retribuir agradeço, estão todos convidados a visitar meu blog e seguir também.
    http://akepalo.blogspot.com.br/

    ResponderExcluir
  13. Olá!!!
    Sempre quis saber como fazer isso!
    Amei muito sua postagem! ♥ Obrigada, me ajudou muito!!! Adorei \o/
    Veja como ficou! > http://adriane-olhar.blogspot.com.br/

    ResponderExcluir
  14. Nossa, foi o único onde consegui aplicar os ícones certinho!! Excelente tutorial!!

    ResponderExcluir
  15. Isso me ajudou muito,já estou te seguindo!

    ResponderExcluir
  16. Amei amei amei! Estava há tanto tempo procurando como e só aqui consegui finalmente achar uma boa explicação, já até coloquei no meu blog!
    Ótimo tutorial!

    ResponderExcluir
  17. Olá,
    Amei seu blog ele é muio fofo se puder retribuir a visita segue meu blog e curte minha página.

    Blog:
    http://femmemakiup.blogspot.com.br/

    Página:
    https://www.facebook.com/Luisamakiup

    Obrigada!

    ResponderExcluir
  18. Obrigada pela dica! Já fiz e deu certo! E amei seu blog, já salvei o link para voltar outras vezes. Beijos, Tati D.

    ResponderExcluir
  19. Amei, Obrigada!
    Blog:
    http://cassiaborgesblog.blogspot.com.br/

    ResponderExcluir
  20. Emfim... adorei , posso colocar no meu blog? Coloco os creditos...
    http://adolecentemoderninha.blogspot.com.br/

    ResponderExcluir
  21. Muito obrigada por compartilhar sua sabedoria conosco! É de mais pessoas como você que o mundo necessita :)
    Beijos ♥
    http://brushyourbangs.blogspot.com.br/

    ResponderExcluir
  22. Obrigada, consegui fazer seguindo as suas instruções. Só não seu como fazer para colocar o botão para mandarum mail. Me pode ajudar?

    ResponderExcluir
  23. Muuuuito obrigada mesmo!
    Ficou lindo :)

    ResponderExcluir
  24. Waaaaa, que dica maravilhosa! Muito obrigada! Amei e já estou usando: www.myqueenside.blogspot.com

    ResponderExcluir
  25. me ajudou muuuuuuuuuuuito ! Obrigada :D

    ResponderExcluir
  26. Oi, obrigada pelas dicas =)
    No meu blog, os ícones não ficaram um do lado do outro, você sabe como corrigir?

    ResponderExcluir
  27. Ahh... o link: http://bloggarimpeiras.blogspot.com.br/

    ResponderExcluir
  28. Consegui arrumar os ícones!!
    Seu tutorial ajudou muito, obrigada mais uma vez ♥

    ResponderExcluir
  29. Pri, vi seus comentários lá no meu blog... já havia arrumado os ícones, de fato, mas adorei as novas dicas. Você é uma fofa, obrigada! Beijo

    ResponderExcluir
  30. o// Ajudou muito,obrigado mesmo *------* . Adorei o blog...

    Att,Lucy.

    Marés da Guerra |

    ResponderExcluir
  31. ADOREI!
    Esse foi o único tutorial que segui e que deu certo no meu blog.
    Quero dizer MUITO OBRIGADA!

    ResponderExcluir

Obrigada por costurar seu comentário aqui no bloguinho! ♥
Perguntas são respondidas no seu blog.