• O BLOG MUDOU DE ENDEREÇO! CLIQUE AQUI E ACESSE byjaque.com
  • 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