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.

101 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. Não consegui colocar no meu blog !

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

    ResponderExcluir
  24. Adorei!!!

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

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

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

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

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

    ResponderExcluir
  27. 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
  28. Vlw, ajudou muito. :D

    adolescentelouco-lol.blogspot.com

    ResponderExcluir
  29. 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
  30. Eu não consegui colocar as imagens será que poderia me ajudar please

    ResponderExcluir
  31. 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
  32. 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
  33. 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
  34. ADOREI O POSTE, MUITAS DICAS BOAS!!
    http://saelimundofeminino.blogspot.com.br/

    ResponderExcluir
  35. 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
  36. Consegui vistia ai http://liviapmariniface.blogspot.com.br/

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

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

    ResponderExcluir
  39. 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
  40. MUITO OBRIGADO!!!!!!!!!!!!


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

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

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

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

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

    ResponderExcluir
  45. 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
  46. Adorei, o mais simples que eu vi.
    Usei :)
    http://defeito-defabrica.blogspot.com.br/

    ResponderExcluir
  47. 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
  48. 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
  49. Consegui copiar a imagem, mas quando vai no blog so aparece o icone mas n dá pra ir pra o perfil do face :/

    ResponderExcluir
  50. 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
  51. Este comentário foi removido pelo autor.

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

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

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

    ResponderExcluir
  55. 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
  56. 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
  57. adorei o blog haha
    beijos
    http://adolescentes-atualizadas.blogspot.com.br/

    ResponderExcluir
  58. Adorei :)

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

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

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

    ResponderExcluir
  61. 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
  62. 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
  63. 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
  64. 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
  65. eu ñ to comsiguindo ta muito confuso alguem me ajuda

    ResponderExcluir
  66. 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
  67. Adorei o seu post,e o blog também.Seguindo *-* se puder retribui flor http://blogprincesadorock.blogspot.com.br/

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

    ResponderExcluir
  69. 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
  70. 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
  71. 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
  72. < 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
  73. 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
  74. 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...