10 de nov de 2013

Como alinhar imagens

Eu deveria estar escrevendo  para o NaNoWriNo agora, mas ao invés disso, estou aqui escrevendo esse post. Por causa disso, estou com pressa, então não vou escrever muito. Me viciei nesse projeto e quero continuar escrevendo minha história.  Quando tiver tempo, faço um post explicando o que é isso para vocês. Aguardem.

Quem me conhece sabe que se tem uma novidade nessa blogosfera que eu gostei, foram os layouts estilo galeria. Acontece que grande parte das pessoas que fazem um layout assim, não conseguem postar as imagens direito porque elas ficam desalinhadas. Isso é porque quando a gente faz upload de uma imagem, o blogger automaticamente faz com que elas fiquem uma abaixo da outra, e isso é um saco. Custei a descobrir como alinha-las, mas depois que descobri tudo ficou muito fácil e rápido. Ultimamente muita gente tem me perguntado como faz isso, então resolvi ensinar a vocês, com imagens e tudo, para não ter dúvidas. Vamos lá.


Ao fazer o upload de mais de uma imagem, elas ficam assim:


Depois de fazer o upload das imagens, você tem que seleciona-las (CTRL+A se você usa o windows) e clicar no "T" ao lado do ícone do blockquote.


As imagens vão ficar assim:


Se você olhar o HTML da postagem, vai ver que todas aquelas div's sumiram. Mas ainda falta retirar os espaços. Você pode fazer isso de duas maneiras, vou ensinar primeiro a que faço, depois a alternativa.

Clique no primeiro espaço da postagem, aquele que está acima da primeira imagem, e aperte delete até que a imagem esbarre na margem do post.

 


Agora clique ao lado (direito) da primeira imagem, selecionando o primeiro espaço ao lado dela, e vá apertando delete até que a segunda imagem suba uma linha. Geralmente são quatro espaços entre uma imagem e outra. Se você deletar sem querer a imagem, aperte CTRL+Z.

 

Agora clique no lado direito da segunda imagem e aperte delete o número de vezes que você apertou no passo acima. Por falta de espaço, a imagem não vai subir, mas vai ficar coladinha nas outras duas.


Faça o mesmo com a terceira imagem, até que a quarta fique colada com ela.


Não se esqueça de retirar os espaços no fim do post e de centralizar as imagens.

Modo 2:

Pessoalmente não uso esse modo porque já faço tudo automaticamente pelo modo 1, mas acredito que esse vai facilitar para quem não entendeu o primeiro ou quem achar complicado demais. Depois de remover a formatação das imagens, vá no HTML da postagem e procure por <br />. Apague esse código em todas as linhas que aparecer. Feito isso, apague as quebras de linhas depois de </a>.


No fim, o HTML da postagem deve ficar desse jeito, independente do modo que você seguir:


Reparem que não há nada entre um código de uma imagem e outra. Se você não colocou espaço nas imagens pelo HTML, coloque pelo menos três espaços entre uma imagem e outra, ou vão ficar horrível no blog. Você pode remover a formatação de imagens que vão ser usadas na postagem também, como avatares ou backgrounds. 

Eu ia fazer um vídeo, mas estou sem tempo. Se não ajudar, falem comigo que faço, fica muito mais simples.

14 comentários:

  1. Muito legal o tuto, e diferente (:

    htmlandresources.blogspot.com

    ResponderExcluir
    Respostas
    1. Nem todo mundo sabe como fazer isso, acredite ^^

      Excluir
  2. Olá Marina,
    Obrigado pelo comentário lá no Emilie escreve.
    Eu vim conhecer teu canto e te convidar para ir no Histórias, estórias e outras polêmicas

    Boa dica esta tua.

    Abraço

    ResponderExcluir
    Respostas
    1. Obrigada pela visita Claudio! Assim que tiver tempo sobrando passo no seu blog pra ler com calma ^^

      Excluir
  3. Ótimo tuto, sempre alinho minhas imagens assim ^^

    Meu Mundo, Meu Estilo

    ResponderExcluir
  4. Eu fiquei com vontade de participar, mas não sou muito boa com esse tipo de coisa T3T
    Ótimo tutorial, de vez em quando me perguntam como é que faz isso q

    Kiss, K-World!

    ResponderExcluir
    Respostas
    1. suhausha' porque não tenta? Também não sou boa, só gosto mesmo ^^

      Todo mundo sempre me pergunta, aí resolvi explicar com imagens, porque sou um lixo só explicando

      Excluir
  5. Ah meu senhor.
    Consegui visitar o blog!
    Desculpa sumir é que ando meio ocupa e sem tempo.
    Ótimo tutorial eu não sabia fazer isso,agora sei.
    Obrigada!

    Sarang Cute!

    ResponderExcluir
  6. Que coisa legal! Se eu não fosse tão ruim na escrita, participaria :/
    Salvou minha vida ♥

    ResponderExcluir
    Respostas
    1. Participa sim! O negócio é só pra estimular o hábito de escrever, eu sou péssima nisso e estou participando!

      Excluir
  7. A 2 opção foi mais fácil de entender
    candytendy.blogspot.com

    ResponderExcluir
    Respostas
    1. Foi sim, mas eu faço sempre do primeiro jeito, pra mim é mais fácil, já vai no automático ^^

      Excluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!