Tutorial: Ícones do blog lado a lado

terça-feira, janeiro 31, 2012

Atendendo a pedidos, hoje vou ensinar como colocar os ícones das redes sociais lado a lado, como no meu perfil. Para ver o tutorial, clique em Leia Mais.


Vá em Design > Elementos da Página > Adicionar um Gadget > HTML/JavaScript

Copie e cole o código a seguir: 

‹p style='float: left; margin-right: 10px;'›‹a href='LINKDASUAREDE' target='_blank'››img border='0' src='LINKDAIMAGEMDOICONE'/›‹/a›‹/p›
Entenda:

FLOAT: ele determina a posição do seu objeto no HTML. Você pode alterar left por right (esquerda por direita) ou ao contrário.

MARGIN-RIGHT: determina o espaçamento de um ícone e outro. Você pode alterar o 10px - quanto maior os pixels (px) maior o espaçamento. E pode alterar o right por left (direita por esquerda), ficando margin-left.

LINKDASUAREDE: altere 'LINKDASUAREDE'. Não remova o apóstrofe! É só colocar o link da página que você quer que abra. Ex: twitter, facebook, etc.

LINKDAIMAGEMDOÍCONE: altere sem remover o apóstrofe, o procedimento é o mesmo do LINKDASUAREDE, porém você coloca a URL da imagem.

Importante: Para acrescentar mais ícones é só copiar o primeiro código para todos e colar um embaixo do outro, alterando o link da rede e da imagem do ícone.

Vou deixar aqui alguns ícones para vocês usarem, para baixar é só clicar na imagem:



Espero que o tutorial tenha ajudado, qualquer dúvida deixe nos comentários e até o próximo post!

Leia Também

36 comentários

  1. boa heim, adorei a dica!
    Lindo seu blog viu, muito fofo, parabéns mesmo!
    Estou seguindo vc, se vc Tiver um tempinho passa lá no meu eu ficarei muuuuito feliz em ter vc lá no meu cantinho!

    xoxo

    http://www.dforaparadentro.blogspot.com/
    @Jana_DFPD

    ResponderExcluir
  2. Achei digno o tutorial, é super útil porque todo blog precisa de um menu para manter-se organizado! Parabéns pela postagem Jaque!!

    Antes de Sonhar

    ResponderExcluir
  3. Gostei da dica, ah e obrigado por passar lá no blog! Seu blog é lindo! http://fashiomg.blogspot.com

    ResponderExcluir
  4. Ah, muito legal. Não é difícil, mas eu fiz direto pelo Gadgets texto, sabe? acho mais rápido...


    Ah, eu tô querendo bater minha meta de 350 seguidores e gostaria que você me seguisse, pode ser? estou seguindo aqui como Gislaine Alves
    jeito-inedito.blogspot.com

    ResponderExcluir
  5. Ei, Jaque... tenho uma duvida. :s Onde sei qual o link da imagem ? :q heouaehaeouhae Outra cooisa, o do weheartit do seu perfil foi você quem fez ? :s No mais, gostei do tutorial! (:

    ResponderExcluir
  6. @TheBluberry Para pegar o link da imagem, você pode hospedá-la em algum site, recomendo o Tinypic ou o Photobucket. Ou caso a imagem já esteja hospedada, você pode clicar com o botão direito do mouse e selecionar Copiar URL/Link da imagem.

    ResponderExcluir
  7. Que blog mais CUTE CUTE *-*
    Gostei mesmo!! Já estou seguindo, espero que possa retribuir :)
    Ah! Tá rolando um sorteio de ADESIVOS DE PAREDE lindissimos!
    Confira lá! Um beeeijo ♥



    shoesandtears.blogspot.com

    ResponderExcluir
  8. @Jaque Huuuum, entendi! Vou tentar... obrigada! :o
    E Jaque, sem querer abusar... mas lembra que vc me falou como colocar coisas no menu do blog, que era só criar páginas e tals ? :b
    Então, ele não ta mais ficando na barra horizontal, só na lateral. Sabe me dizer porque ? :s
    Obrigada mesmo, Jaque! :c

    ResponderExcluir
  9. Ah sempre que eu fazia isso, eu colava os ícones na área da postagem e na área Editar HTML eu copiava o HTML. Bjs.

    ResponderExcluir
  10. ai que bom que te ajudou fico muito feliz!

    xoxo

    http://www.dforaparadentro.blogspot.com/

    ResponderExcluir
  11. Adorei o tutorial Jaque. Vai me ajudar bastante. *-*

    Beijos, Nathy.

    http://naahthaliaa.blogspot.com/

    ResponderExcluir
  12. ótima dica, fica bem mais facil com as imagens ali.
    beijos :*
    Batom e Salto Alto

    ResponderExcluir
  13. Tenho vários salvos aqui no pc mas sempre dá preguiça ou falta tempo de colocá-los. Obrigada pelo tuto ;D

    ResponderExcluir
  14. @TheBluberry Te deixei um recadinho lá no blog ;)

    ResponderExcluir
  15. Legal o tutorial *-*
    http://perfeitateen.blogspot.com/

    ResponderExcluir
  16. Amei essas dicas vou ver se consigo colocar lá no Blog! Só não sou muita boa nisso :/ rs

    Ótimo post Jaque, sucesso pro seu Blog e pra você flor, você merece :d

    ResponderExcluir
  17. oi linda!! vc ensina ótimas dicas aqui heim!! adorei!! parabéns pelo blog! já virei seguidora e estou fuçando aqui! rsrsr me visite tb! será muito bem vinda! bjuus

    www.sualindaa.blogspot.com

    ResponderExcluir
  18. Jaque parabéns pelo tutorial, ficou ótimo! ;}
    Beijos!!

    Ann;
    Vinte & Poucos

    ResponderExcluir
  19. Ah, fica bem mais organizado assim... O meu está só o link, sem as imagens, preguiça de arrumar... rs

    Beijos
    http://livrosebatons.blogspot.com/

    ResponderExcluir
  20. Nossa , muito bom o tutorial .. util e mt mt bem explicado!
    Mal cheguei no seu blog e já tenho ceeerteza que ele é mt mt bom ! Por isso .. já estou te seguindo! rs

    www.i-tudo-i-tudo.blogspot.com
    ah ! e eu gostaria muito de ser seguida por voce , lá no blog *-*

    ResponderExcluir
  21. Não canso de falar como sou apaixonada pelo seu blog <3

    E moleskines são um amor mesmo né, lindinhos!

    beijos jaque
    http://slashedme.blogspot.com/

    ResponderExcluir
  22. Acabei de conhecer o teu blog e já ganhei uma super dica de presente *.*
    Teu blog é super show, adoreeeeei :)
    O meu blog é este aqui: http://rafaribeiiro.blogspot.com/
    Espero a tua vistinha por lá, beijão ;*

    ResponderExcluir
  23. Olha, eu estou apaixonado no seu Blog, sério, paixão a 1ª vista, o melhor artigo, super simples, super bem editado, as cores das letras, o jeito de mostrar os códigos, tô fã, queria ajuda para adicionar isto no meu Blog (http://vaidadederme.blogspot.com.br/). mas uma vez afirmo que este espaço é incrível Jaque, já estou lhe seguindo no Twitter.

    Gostaria de mais uma ajuda: Como você consegue colar seu banner usando todo espaço das extremidades do Blog? Se você entrar no meu vai ver que o meu banner só consegue ir até onde vai as margens das postagens, se eu colocar uma imagem maior, ele vai cortar, por exemplo: Se eu definir que meus textos juntamente com minha barra lateral terá 1020 px, o banner assim também será, o seu não, o seu pegou d fora a fora, estou maravilhado! Você como fazer isso? Afinal usamos a mesma plataforma!

    Abraços.

    Edu Marques

    ResponderExcluir
  24. :e jaque desculpe perguntar !
    Eu sou nova em html e eu não sei onde coloca o gadget de html !
    Por favor,me ajude ?

    www.limaoealecrim.blogspot.com

    ResponderExcluir
  25. @Jamilly Costa o gadget de HTML fica aqui:
    Design > Elementos da Página > Adicionar um Gadget
    Vai abrir uma nova janela cheia de opções. Você vai achar uma assim: HTML/JavaScript é só clicar e adicionar o código.

    ResponderExcluir
  26. Jaque vc já me ajudou tanto, só uma perguntinha, quando uso esse código coloco o antes de começar a sequencia de ícones, porém eles não ficam centralizados pois o comando "FLOAT" anula a centralização, se eu retirar essa parte do código nada funciona, ou seja, eu gostaria de colocar um espaçamento maior entre meus ícones sem que eles ficassem para direita ou esquerda, e sim todos centralizados!

    ResponderExcluir
  27. @Edu Marques Se não der para colocar o código entre '< center >' você vai ter que ficar arrumando o 'float' até ficar do jeito que você quer =/

    ResponderExcluir
  28. Olá segui tudo e selecionei os ícones do twitter e do face para testar, apareceu la no meu blog , mas o do face ficou bem maior do q o do twitter o q sera q fiz de errado?
    Muito lindo e interessante seu blog, já estou seguindo

    bjos
    Rúbia

    ResponderExcluir
  29. Não consigo colocar o icone do facebook do mesmo tamanho que os outros porque?

    ResponderExcluir
  30. Ah sim , obrigada pela dica Jaque

    bjos

    ResponderExcluir
  31. Obg viu, já fazia tempinho que estava preocurando um tutorial disso. Me ajudou mto. ^^

    http://improviisada.blogspot.com.br/

    ResponderExcluir
  32. adorei o tutorial, super util, amei o blog, seguindo c:
    bjs.
    http://window-soul.blogspot.com.br/

    ResponderExcluir
  33. AIiii muitoo obrigada!
    Deu certinho!!!
    http://lookando.blogspot.com

    ResponderExcluir
  34. adorei!!

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

    ResponderExcluir
  35. Obrigada, meu bem! Foi bastante simples e útil!

    ResponderExcluir
  36. Olá, Jaque! Muito obrigada pelo tutorial, super me ajudou lá no meu blog. ^-^
    Bjinhos
    http://fromjulieta.blogspot.com/

    ResponderExcluir

Os comentários desse blog são moderados, portanto só serão publicados após aprovação. Comentários com propagandas, divulgações e comentários pedindo para seguir não serão aprovados. Deixe o link do seu blog caso queira que eu retribua algo. Obrigada.

Instagram

Subscribe