sábado, 4 de agosto de 2012

Como colocar icones de redes socias no blog #Otimize seu blog

Ah umas semanas comecei a colocar aqui no blog dicas para blogs, haha! Então mais uma vez venho como uma dica. E sem enrolação vamos direta ao assunto. Uma das coisas que eu queria no meu blog e não sabia como fazer era colocar os icones das redes sociais debaixo de uma foto, ali no siderbar. Eu sempre achei isso muito legal dá ao blog uma cara de "UAL! Que blog sério e profissional" haha. Então se você também quer fazer isso siga os passos abaixo:
1 - Você precisa salvar (ou encontrar) os icones das redes sociais que você quer redimencionar os usuarios.
ALGUNS SITES ONDE VOCÊ PODE ENCONTRAR ICONES DE REDES SOCIAIS PARA O BLOGGER
1 - 2 - 3 - 4

2 - Eu recomendo a 4, bom você fará o seguinte apos escolher seus ícones: BLOG> LAYOUT> ADICIONAR UM GADGET> HTML/JavaScript>

3 - Cole o seguinte código:
< a href="LINK DA REDE SOCIAL">
< img src="URL DA IMAGEM " />


4 - Agora substitua LINK DA REDE SOCIAL logicamente pelo link correspondente a imagem, e URL DA IMAGEM pelo URL correspondente. ( Para copiar o URL click com o botão direito encima da imagem e na opção copiar URL). NÃO SE ESQUEÇA DE TIRAR O ESPAÇO ENTRE < A E < IMG .

EX:< a href="LINK TWITTER">
< img src="URL DA IMAGEM DO TWITTER" />

5 - Faça assim com todas Redes sociais que você quer na mesma janela de HTML/JavaScript dando apenas Enter de espaço entre cada rede-social.

Entenderam gente? Qualquer duvida deixe nos comentários e em breve vou responder, os ícones que eu usei estão aqui.
Se existe alguma coisa que eu coloquei aqui no blog e que você gostaria de saber como deixe logo abaixo nos comentários e eu farei um poste explicando como se faz.

105 comentários:

  1. Adorei o post querida! essas imagens igual você colocou "otimizando seu blog você mesma" é feita no photo shop? Bjs

    ResponderExcluir
    Respostas
    1. Eu fiz no Photoscap, não sou muito boa no photoshop haha. Vou fazer um miniturorial para voce: Photoscap>editar>lá no cantinho direito tem uma impresorrazinha e do lado um quadradinho branco com uma listra azul>nova foto> largura600,altura70> selecione a moldura note 2> clica em foto+moldura> seleciona a moldura tape 05> foto+moldura> clika na segunda aba OBJETO> No T e escreve o texto. Entendeu? bjs

      Excluir
    2. a minha imagem também não parece :(

      Excluir
  2. Não consegui colocar >.< A imagem não apareceu

    ResponderExcluir
    Respostas
    1. Talvez você tenha copiado o link da imagem em http, e não o URL verifique isso, se continuar com duvidas pode me perguntar, ok? Bjs

      Excluir
  3. Amei o post, me ajudou muito mesmo, estava querendo fazer isso a muito tempo mais nunca tinha achado um tutorial bom que nem esse, obrigada mesmo.
    http://dominiofashion.blogspot.be/

    ResponderExcluir
  4. Oi, moça!!! Adorei o post de novo...

    Virei sua fã e fã do seu blog!!!! Parabéns de novo e obrigada por mais essa dica ;)

    Um beeeijo.

    ResponderExcluir
    Respostas
    1. que feliz me deixas xuxu, aaaaaaah qual seu blog? enviame o link para conhece-lo.

      Excluir
  5. maravilhoso blog, muito aconchegante *-*

    http://fazdecontatxt.blogspot.com.br

    ResponderExcluir
  6. Nossa ajudou demasi =)
    Brigada
    Beijo.
    Ps* que blog lindo *.*

    ResponderExcluir
  7. o blog ta bom demais em,eu vou até recomenda para todos meus amigos pq é muito bom,da até gosto de ver,como estou recomendando o www.rastreamentodecelular.org que estou usando na minha empresa de detetive que é muito bom tambem,nossa parabéns,to acompanhando teu blog,e vou recomendar,abraços

    ResponderExcluir
  8. amei o post como sou ruim com isso demorou um pouco mas no final consiqui! bjjs xoxox

    Inventando Moda
    (clique no perfil)

    Seguindo

    ResponderExcluir
  9. Não consegui. Quando eu vou em adicionar um gadget não abre nada pra HTML, aparece noções básicas, destaques, mais comuns, mais adicionados e adicionar seu próprio. Socorro! ):

    ResponderExcluir
    Respostas
    1. Fofa, tá sim é uma listinha um pouco grande só você procurar com calma, ou então escrever na caixa de pesquisa "HTML/JavaScript". ou então procura que de baixo para cima que você acha.
      Bjs

      Excluir
    2. aaaaah obrigada <3 Não abusando da sua boa vontade, mas já abusando rs. Você sabe como diminuir a imagem?

      Excluir
  10. Vc precisa diminuir ela no tamanho que você quer no photoshop,photoscap, ou paint, qualquer editor é só redimencinar , eu acho que o meu foi 45 por 45. Isso se você salvou a imagem no pc para depois colocar ela em algum site de armazenamento de imagens, se não você precisa copiar o URL de uma imagem já do tamanho desejado. as minhas estão nesse site, do tamanho certinho. ( http://s1167.beta.photobucket.com/user/Izzy_Mesquita/media/weheartit-icon.png.html?sort=3&o=42 ) bjinhos

    ResponderExcluir
  11. Carambaaa!! Eu ameiii aquii *-* e esse post me ajudou muitoo! Já estou seguindooo hehe

    ResponderExcluir
  12. amei o seu blog,virei sua fã ,parabéns pelo blog, eu e minha amiga criamos um blog juntas so que ainda estamos aprendendo a mexer,e estamos sem ideias ,gostaria que voce me ajudasse.olha só


    http://meudiariodeamiga.blogspot.com.br

    ResponderExcluir
  13. Adorei seu post!!
    Mas eu queria saber como é que você bota essa lista de postagens
    ("PODERÁ TAMBÉM GOSTAR DE") debaixo das postagens, por favor me ajude, quero muito saber!

    ResponderExcluir
    Respostas
    1. Ano que vem farei um post ensinando fofa, e muito facil mas estou sem PC :(

      Excluir
  14. Nossa, adorei a dica!
    Apanhei a tarde inteira para conseguir achar as imagens no bom tamanhos, pois os links de ícones que você deixou não tinha todos os que eu queria... aliás, tinha todos menos o instagram... por isso tive que pescar no google!
    Gostei tanto que bisbilhotei o seu blog e adorei. Virei seguidora!
    Você mora no Brasil ou aqui na Europa?

    Beijos, um ótimo fim de semana e boas festas!
    Giovanna
    Esmaltólatras de Carteirinha

    ResponderExcluir
    Respostas
    1. Oi gachenha, pois e tambem tive que olhar o weheartit, a nao tenho instagram soy pobre. Mas que vom que conseguiu! Vou fazer mais posts desse tipo para ajudar voces. Eu moro no meu brasil brasileiro mesmo, nao que eu dispensaria morar nasoropa ne? kkkk Bjs

      Excluir
  15. que espaço e esse q tem q tirar não entendi

    eu fiz assim

    < a href="http://www.facebook.com">
    < img src="http://imageshack.us/a/img827/9849/facebookal.png" />
    < a href="http://twitter.com">
    < img src="http://imageshack.us/a/img401/9530/twitterou.png" />
    < a href="http://www.orkut.com.br">
    < img src="http://imageshack.us/a/img152/9628/iconeorkutx.png" />
    < a href="http://weheartit.com">
    < img src="http://imageshack.us/a/img705/1985/followme4.png" />
    < a href="http://www.flickr.com">
    < img src="http://imageshack.us/a/img339/2273/thflickr32.png" />
    < a href="http://www.youtube.com">
    < img src="http://imageshack.us/a/img811/6108/iconeyoutubegf.png" />
    < a href="http://delicious.com">
    < img src="http://imageshack.us/a/img90/8906/deliciousw.png" />

    ResponderExcluir
    Respostas
    1. deu certo? o espaco e o entre o vezinho de lado, esqueci o nome disso, haha e a letra A. E depois entre esse negocio e a sigla IMG.

      Excluir
    2. O codigo e esse sem os asteriscos*
      <*a href="LINK TWITTER">
      <*img src="URL DA IMAGEM DO TWITTER" />

      Excluir
  16. Ameii a dica, demorei um pouco pois estava copiando em Https :ai não estava dando certo, mais consegui...adorei o blog e já estou seguindo... ;D muito Obrigada.

    Beijoos

    Fan Page : https://www.facebook.com/BlogFlorDePimentaRosa
    Blog :http://flordepimentaros.blogspot.com.br/

    ResponderExcluir
  17. Nossa. Serviu muuuito para mim. Muito obrigada.

    ResponderExcluir
  18. Obrigado! Estava precisando disso.
    Continue assim.

    Meu Blog: http://allavengersstallionduck.blogspot.com.br/

    ResponderExcluir
  19. Olá querida, estava procurando sobre o assunto do post e amei esta dica! Seu blog é uma graça! Eu que criei o meu layout, não sei mexer tão bem é uma linguagem nova em tudo mas, até que estou a aprender muitas coisinhas!
    Moro em Portugal. Baby vou usar os candys vai ficar muito fofo, espero consegui fazer direitinho rs...já estou te seguindo . Aproveito para deixar um convite para participar do sorteio de 2 livros da Editora Gente e de uma paleta da Sephora que irá ser sorteada em breve.
    Um ótimo domingo para sí - Beijos!
    sweetbulunga.blogspot.pt

    ResponderExcluir
  20. Este comentário foi removido pelo autor.

    ResponderExcluir
  21. Olá! Eu tentei fazer o candys mas, não estou conseguindo porque os que vem todos juntos em uma so imagem não tem como copiar a Url. Podes me ajudar?
    Beijos

    ResponderExcluir
    Respostas
    1. Oi gachenha, aqui se a imagem que vc quer vem todos juntos vc tera que separa-los no photoshop, assim vc corta cada um salva com o nome ex: twitter, fb etc... depois de feito isso vc os hospeda em algum site, picasa, photobucket e etc, depois vc copia o url e coloca :)

      Excluir
  22. Gaatiinhaa Vaaleeu Me Ajudoou bastaante! Faz um Post Sobre Como Fazer o Menu Rápido Com Imagens!

    ResponderExcluir
  23. Adorei!!!

    Meu blog: http://rosaemorena.blogspot.com.br/

    ResponderExcluir
  24. Ameei seu blog, tive um pouquinho de dificuldade mais depois foi só felicidades, beijinhos

    http://juuhnacozinha1.blogspot.com.br/

    ResponderExcluir
  25. Meu nome é Miguel Barboza.
    Muito obrigado, ajudou muito, vc é perfeita beijão!

    my face: https://www.facebook.com/miguel.barboza.50

    ResponderExcluir
  26. Oii então eu tentei fazer com a pagina de contatos do meu blog e deu errado, já com o do facebook deu certo.
    Olha o meu blog manualdegarotastotalmentepink.blogspot.com

    ResponderExcluir
  27. Vlw, ajudou muito. :D

    adolescentelouco-lol.blogspot.com

    ResponderExcluir
  28. OOi!
    Super me ajudou esse post!
    Adorei seu blog e também sou de Minas.
    Se quiser visitar meu blog: http://fazendodezoito.blogspot.com.br/

    ResponderExcluir
  29. Eu não consegui colocar as imagens será que poderia me ajudar please

    ResponderExcluir
  30. Você podedia mostrar como colocou o gif como titulo !
    bjs

    ResponderExcluir
    Respostas
    1. Só fiz o gif no photoscap e hospedei no photopuxcket, e depois fui no lugar do cabeçanlho do blog e carreguei;

      Excluir
  31. olha to com um problema fiz exatamente oq vc disse os links tao funcionando e tudo redireciona pra pagina que eu defini mas , sabe quando a foto nao carrega direito que aparece aquela fotinha pequena com uma paisagem ? poius e ta assim . o que eu faço?

    ResponderExcluir
  32. ah responde rapido pfvr to deseperada

    ResponderExcluir
    Respostas
    1. Desculpa sua duvida estava na caixa de spam, vi agora. Bom você provavelmente copiou o endereço do link, e não o URL DA IMAGEM, você tem que clicar com o botão direito sobre a imagem e ir em copiar URL DA IMAGEM. Verifique se fez isso; Bjs Desculpa por não ter respondid ontem. ♥

      Excluir
  33. ADOREI O POSTE, MUITAS DICAS BOAS!!
    http://saelimundofeminino.blogspot.com.br/

    ResponderExcluir
  34. Adoreiiii demais essas dicas, mas pedi ajuda da minha mãe pra não fazer nada errado hehehe, mas deu td CERTO !


    Beijoss


    http://carol-soparameninas.blogspot.com.br/

    ResponderExcluir
  35. Consegui vistia ai http://liviapmariniface.blogspot.com.br/

    ResponderExcluir
  36. como faço para colocar uma imagem do lado da outra?

    ResponderExcluir
  37. tem que fazer um ícone de cada vez né?

    ResponderExcluir
  38. oi tudo bem?eu queria saber se você poderia fazer um tutorial ensinando como fazer um menu com imagens tipo o seu?(menu clique rápido)obrigada!

    ResponderExcluir
  39. MUITO OBRIGADO!!!!!!!!!!!!


    -> Que tal dedicar um pouco para se preparar para o futuro e os estudos? Acesse: www.estudajovem.com.br - Estuda Jovem!

    ResponderExcluir
  40. Estou engatinhando, mas sua dica fui muito útil! Obrigada!
    http://www.lingerienapanela.com.br/

    ResponderExcluir
  41. Ameii *-------------* Muito obrigada, blog divo, galera diva, etc! Amei vocês!!!!
    http://cantinhodophotoscapeee.blogspot.com.br/

    ResponderExcluir
  42. O link da rede social é o link do meu perfil?

    ResponderExcluir
  43. No Configurar HTML/JavaScript tem que ser qual formato?

    ResponderExcluir
  44. Adorei sua dica. Fiz no meu *-* Se nao for incomodar da uma passadinha la se gostar se inscreve pfvr, comecei faz uns dias

    http://soletreamor.blogspot.com.br/

    obrigada linda :3

    ResponderExcluir
  45. Adorei, o mais simples que eu vi.
    Usei :)
    http://defeito-defabrica.blogspot.com.br/

    ResponderExcluir
  46. Oii td bem ?? não consegui entender quero colocar o do twitter o canal do youtube e o facebook nesse blog http://blogbruks.blogspot.com.br/ com essa tema tem como eu colocar ?? como eu coloco ?? obg

    ResponderExcluir
  47. ooi izzys não consegui copiar a url, quando eu copio aparece a foto de todos os icones la no blog :/ n sei como copiar so a do face, se vc puder ajudar :D

    ResponderExcluir
  48. Consegui copiar a imagem, mas quando vai no blog so aparece o icone mas n dá pra ir pra o perfil do face :/

    ResponderExcluir
  49. Adorei o post,estava com muita dificuldade de entender como se faz
    mas com sua explicação ficou tudo mais fácil.
    Queria saber se você tem algum post de como colocar essa opção curtir
    suaa page ali do ladinho??

    beijos,
    http://wwwcarollimafotografias.blogspot.com.br/

    ResponderExcluir
  50. Este comentário foi removido pelo autor.

    ResponderExcluir
  51. Muito obrigada viu, me salvou mesmo :)
    http://myvidawriting.blogspot.com.br/

    ResponderExcluir
  52. muito bom esse blog amei...
    meu blog: http://mensagens-deamor.blogspot.com.br/

    ResponderExcluir
  53. Menina que blog lindo!!! Vou seguir, amei.. segue de volta? http://cristielepereira2.blogspot.com.br/

    ResponderExcluir
  54. Boa tarde... adorei o seu blog... fiz o passo a passo, mas acho que deu algo errado, pois a imagem aparece do ícone, mas deixa essa mensagem no blog "A página que você está procurando neste blog não existe." o que fiz de errado?? Afinal, é a primeira vez que me aventuro em montar um blog... bjs
    capimdecheior@yaho.com.br

    ResponderExcluir
  55. Minha imagem também ficava com aparência de carregando, mas nos próprios comentários vc já tirou a dúvida que eu tinha, deu muito certo :) Muito obrigada mesmo. Tava há um tempão procurando! *----*
    www.alemdemim.com

    ResponderExcluir
  56. adorei o blog haha
    beijos
    http://adolescentes-atualizadas.blogspot.com.br/

    ResponderExcluir
  57. Adorei :)

    ficou lindo :] obg dá uma passadinha lá no meu blog, se escreve flor :)

    ResponderExcluir
  58. Da uma olhadinha no meu blog? criei a pouco tempo! Obrigada rs
    http://adoradoradesonhos.blogspot.com.br/

    ResponderExcluir
  59. Amei ;3
    Visita meu blog:
    http://youtrendyalways-yta.blogspot.com.br/

    ResponderExcluir
  60. Gente esse código serve tbm para Wordpress, só que só serve para páginas em HTML. Para fazer é assim vá na página que quer e depois Texto cole o código e faça exatamente como post acima ensina e salve , vai ficar igual a este post da Fran>>>http://morandosozinha.com.br/sobre/

    ResponderExcluir
  61. O seu tutorial foi o mais facil e o unico que eu consegui fazer obg pela ajuda >< bj bj
    http://rafardr.blogspot.com.br/

    ResponderExcluir
  62. Será que pode me ajudar? As imagens das redes sociais não estão aparecendo. Se puder me ajudar me envia um email: carolwdutra@hotmail.com

    ResponderExcluir
  63. olá, tenho um blog chamado 20 e uns e adoraria saber como vc colocou aquele menu rápido http://20euns.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. oi, então esse menu rápido é feito com o mesmo sistema, eu fiz as imagens no photoshop hospedei, e dai usei os links dos marcadores para redimencionar qdo clicam na imagem.

      Excluir
  64. eu ñ to comsiguindo ta muito confuso alguem me ajuda

    ResponderExcluir
    Respostas
    1. oi amiga vou tentar te ajudar é só tirar o espaço entre essa setinha ''<'' e o começo do dois codigos tipo :
      <a
      <img

      Excluir
  65. Boa tarde Izzy!!!
    Menina, estava procurando uma ajuda assim a dias...hoje fui tentar...olhei em outro blog, e tantos detalhes...nem consegui copiar...acho que o blog deve ser só para ver. (risos)
    Já o seu não...deu CERTOOOOOOOOOOOO!!!
    Show!!!
    Muito fácil e fiz rapidinho.
    Só tenho que agradecer!!!
    Que Deus continue a lhe abençoar e a realizar todos os seus sonhos e desejos!!!
    Obrigada por compartilhar o que sabe...
    Se precisar de algo e puder te ajudar pode falar, ok!!!
    Feliz e Abençoada Semana!!!
    Bjokas...da Bia!!!

    ResponderExcluir
  66. Adorei o seu post,e o blog também.Seguindo *-* se puder retribui flor http://blogprincesadorock.blogspot.com.br/

    ResponderExcluir
  67. Amei o post *----* Vou usar as dicas. Se puder retribuir http://kerolaystefany.blogspot.com.br/ já estou seguindo :)

    ResponderExcluir
  68. Oi!

    Passando pra informar que fiz e deu tudo certo, ainda bem. Faz tempo que procuro um tutorial simples e eficaz como esse, parabéns.

    Quem quiser visitar: s-almeida.blogspot.com.br

    xx

    ResponderExcluir
  69. oii!! depois de olhar vááários tutoriais só consegui com o teu! ficou super bom e muito bem explicado..só que eu fiz e meus incones ficaram enormes e um embaixo do outro! Será que tu pode me ajudar? o que eu faço? brigadinha!!!!! AMEI SEU BLOG *--*

    ResponderExcluir
  70. Não estou conseguindo, a imagem n aparece, n sei onde salvar para copiar depois.
    Mas adorei seu blog, seguindo.. me segue também
    http://www.drikabrito.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. oi amiga vou tentar te ajudar é só tirar o espaço entre essa setinha ''<'' e o começo do dois codigos tipo :
      <a
      <img

      Excluir
  71. < a href="https://www.youtube.com/user/fael140599">
    < img src="http://i62.tinypic.com/xkqbdk.jpg " />

    < a href="https://twitter.com/priofernandes">
    < img src="http://i57.tinypic.com/2zq4pjp.jpg " />

    < a href="http://instagram.com/prioliveirafernandes">
    < img src="http://i58.tinypic.com/r0ttg5.jpg " />

    Fiz assim e não deu nada certo o que é?

    ResponderExcluir
    Respostas
    1. oi amiga vou tentar te ajudar é só tirar o espaço entre essa setinha ''<'' e o começo do dois codigos tipo :
      <a
      <img

      Excluir
  72. Ola.
    Tentei mas infelizmente nao consegui. :(
    Será que voce pode me dar uma ajudinha, por favor?
    Já não sei mais o que fazer.
    www.gabyfarrell.blogspot.com.br
    Obrigada

    ResponderExcluir
    Respostas
    1. oi amiga vou tentar te ajudar é só tirar o espaço entre essa setinha ''<'' e o começo do dois codigos tipo :
      <a
      <img

      Excluir
  73. lindo blog , seguindo , segue de volta ? http://prettywoman-on.blogspot.com.br/

    ResponderExcluir

Deixem aqui a opinião, dúvidas e criticas em relação a esta postagem. E voltem Sempre (:

Leia também

Related Posts Plugin for WordPress, Blogger...