13 maio 2013

Imagem com largura total do post/ sidebar


Olá gente!!! Outro dia uma leitora me perguntou como eu deixei aquele gif da Rapunzel com a mesma largura da sidebar. Então resolvi fazer esse post, já que pode ser uma dúvida de muitos. Esse tutorial pode ser usado com as imagens do post e com as imagens da sidebar. Eu só uso com aquele gif na sidebar, na área dos posts eu não gosto, porque todas imagens ficam com a largura total, e às vezes gosto de colocar gifs, ícones e tal, aí fica tudo absurdamente grande. Fica horrível! Mas, se seu blog é bem limpinho, e você usa imagens apenas para ilustrar posts, não tem problema algum.
Vamos ao tutorial?

Na área do post

No HTML do seu blog procure por:
/* Posts
----------------------------------------------- */
Cole logo abaixo:
.post img{
border: 0; /* borda na imagem em zero, não altere */
margin: 0 -30px 0 -30px; /* margem da direita e esquerda, não altere */
padding: 0; /* espaço entre margens e imagem, não altere */
width: 540px; /* tamanho máximo da imagem, pode e deve ser alterado */
}
 Agora mude a parte selecionada de acordo com a largura total da sua área de postagem.

Mas atenção, alguns blogs usam esse tutorial, mas acabam deformando as imagens. Entenda porque.
Quando estamos fazendo a postagem, no próprio editor, temos a opção de tamanho das imagens, por exemplo, pequeno, médio, grande, muito grande, tamanho original... 
Para que sua imagem fique linda e com a largura total do post, você precisa deixa-la centralizada e com seu tamanho original. Assim o tutorial irá funcionar perfeitamente, caso contrário, ficará horrível sua imagem.
Lembrando que TODAS as imagens do post ficaram com a largura total do post, seja ela, gif, mini-gif, ícones...

Na sidebar

Para deixar a imagem da sidebar com largura total é um pouco diferente.
Vá no layout do blog e adicione um novo gadget Java Script/HTML e coloquee nele o código abaixo.
<img width="280" height="auto" src="URL DA IMAGEM" />
Coloque a largura de acordo com a o tamanho da sua sidebar e a altura, deixe AUTO. Coloque também o URL da sua imagem.
Prontinho gente. Gostaram?
Beijinhos e até a próxima!

6 comentários:

  1. Valeu Nah! Super me ajudou :D Como no meu blog eu nem uso gifs não vai ter problema!

    Ah outra perguntinha. Não sei se perdi algum tutorial, mas para fazer esta divisão por caixas nos posts é do mesmo jeito que faz com as barras laterais? Porque eu acho legal quando a área dos posts acompanha o mesmo "esquema" da barra lateral :P

    Obrigada por ajudar a deixar nossos blogs com a nossa cara =*****

    ResponderExcluir
    Respostas
    1. Vc não perdeu nenhum tutorial, ainda não ensinei isso. Nossa! Como eu pude esquecer disso! Mas pode deixar, o próximo tutorial vai ser esse tá?
      Obrigada pela visita!

      Excluir
  2. Olá, Nah!
    Muito bom o post, o blog continua perfeito como sempre!

    Beijos

    ResponderExcluir
  3. Oi Nah!!
    Queria saber como eu faço pro gif ficar repetindo. Eu coloco e dou reload várias vezes e o gif para... Poderia me ajudar?
    Continuo amando o seu lay! *u*

    Beijinhos!

    ResponderExcluir
  4. No meu blog não da certo =/
    Amo seus tutoriais
    Beijos

    http://www.maniasedicas.com.br/

    ResponderExcluir
  5. Oi Nah! No meu blog tbm não deu certo. Quando digito /* Posts, aparece que não foi encontrado. O meu template eu baixei de um site e instalei todo o html, tem algo a ver?

    ResponderExcluir

© Blog da Nah | Oficial - 2012. Todos os direitos reservados. Criado por: Natália Médice. Tecnologia do Blogger. imagem-logo