24 de novembro de 2010

Como postar imagens grandes no Blogger


Geralmente, quando inserimos uma imagem grande no blogger, ela é redimensionada de forma automática e é publicada em um tamanho bem menor daquele que queriamos. Se você gosta de publicar imagens grandes em seus posts, vai gostar muito deste post que vi no Blogger Tricks, ele nos ensina como publicar imagens grandes nos posts do blogger.

Este hack é fácil de ser feito. Entretanto, como precaução e canja de galinha não faz mal pra ninguém, não esqueça de fazer o backup do template do seu blog. Vamos lá.

1ª Parte:
No painel, entre em Design >> Editar HTML e procure pela tag ]]></b:skin> (use crtl+F) e adicione acima dela o seguinte código:
img {
max-width: XXXpx;
width: expression(this.width > XXX ? XXX: true);
}

O que está em vermelho refere-se ao tamanho da imagem dentro da área destinada ao post. Recomenda-se encontrar um tamanho que não ultrapasse a largura desta área.
Um exemplo:
img {
max-width: 550px;
width: expression(this.width > 550 ? 550: true);
}

Feito isso, clique em visualizar e se não constar nenhum erro, salve as alterações.

2ª Parte:
Agora, vamos aplicar as modificações feitas para o redimensionamento das imagens dentro dos posts. Para isso, Crie um post e adicione uma imagem qualquer. Dependendo do tamanho da imagem, o blogger irá redimensioná-la automaticamente. Entre na aba Editar HTML (está ao lado de Escrever). O trecho abaixo corresponde a um código HTML de uma imagem colocada em um post:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg7S4UIay9uqBWPiaOHrwjnRXP1iUPqT91TkBmqoykAqUKdCGqRgpnk-DWywkLczmoZ8hOfAkzetnBKSogqDuAaEENQ58RqzRSrWllfO42_GWK1LJtb9BSm3ui97gRvls09nsRQQvQloY/s1600/sasha+grey.jpg" imageanchor="1" style=""><img border="0" height="400" width="309" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg7S4UIay9uqBWPiaOHrwjnRXP1iUPqT91TkBmqoykAqUKdCGqRgpnk-DWywkLczmoZ8hOfAkzetnBKSogqDuAaEENQ58RqzRSrWllfO42_GWK1LJtb9BSm3ui97gRvls09nsRQQvQloY/s400/sasha.jpg" /></a></div>
A imagem correspondente a este código está logo abaixo:
Para que a imagem fique maior e nas configurações que fizemos no exemplo lá em cima, basta EXCLUIR o que está em azul (height="400" width="309") e ALTERAR o que está em vermelho, de s400 para s800.

O código ficará desta forma:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg7S4UIay9uqBWPiaOHrwjnRXP1iUPqT91TkBmqoykAqUKdCGqRgpnk-DWywkLczmoZ8hOfAkzetnBKSogqDuAaEENQ58RqzRSrWllfO42_GWK1LJtb9BSm3ui97gRvls09nsRQQvQloY/s1600/sasha+grey.jpg" imageanchor="1" style=""><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg7S4UIay9uqBWPiaOHrwjnRXP1iUPqT91TkBmqoykAqUKdCGqRgpnk-DWywkLczmoZ8hOfAkzetnBKSogqDuAaEENQ58RqzRSrWllfO42_GWK1LJtb9BSm3ui97gRvls09nsRQQvQloY/s800/sasha.jpg" /></a></div>
E a imagem aparecerá no post desta forma:
Muito legal, não é mesmo? O interessante deste hack é que ele só será aplicado em imagens que você escolher que apareçam gigantes, pois é necessário que faça a mudança de s400 para s800.

Nos meus posts, eu retiro grande parte do código que é dado pelo blogger. Deixo apenas o código correspondente a imagem, com a alteração de s400 para s800.

Fica assim:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQk1Qcopjpiv-eS8-UO8YtbKCG6wI-JlVm2y3RJjHi2R-3J1heS-hJPfFQom-wuVvhSGoNLota0RImnc3o8vSkrVLHna_L7j2b3BqQNIIRn4lNBgt_PqT-3mxGMnDjnQEQX22OvPi9UAk/s800/scarlett-johansson.jpg"/>

E a imagem aparece dessa forma:



É isso ai. Até a próxima!

6 comentários:

  1. Passei mais uma vez para agradecer não só por este pots, mas por todos que têm sido de grande valia para o melhoramento do meu blog.
    Fico pensando se não fosse site (ou blogs) como o seu; o que seria de tantos outros blogueiros, iniciantes ou não, pois estamos sempre a precisar da ajuda ou orientação de alguém. Precisamos disso para melhorar!
    Parabéns mais uma vez pelos posts, eles atendem as minhas necessidades (acho que de todos que freqüentamos) com precisão cirúrgica. Que continuem assim!
    Até breve!

    ResponderExcluir
  2. Poxa!! perfeito seu post...

    a gente só tem que agradecer pelas dicas
    valeeeu

    ResponderExcluir
  3. Muito bom seu post
    Ajudou muito ...

    ResponderExcluir
  4. Só uma dúvida,isse tamanho vai ficar em tdas as imagens pq eu qr que fique tipo as imagens do wordpress que já ficam grandes 'naturalmente' tipo, uma imagem 'pequena' fica 600x400 e a grande fica 600x900 dia esse código deixa as imagens assim ou irão ficar todas grandes como no exemplo que vc citou no teu post?
    Ah, amei o tutorial viu!

    ResponderExcluir
  5. Oieeee, eu fiz no meu blog de teste coloquei no tamanho de 600px mais dai qnd fui visualizar afetou o cabeçalho, a imagem do cabeçalho é ficou pequeno!Poxa!
    Eu amo foto grande nos posts e atualmente uso o Writer do MSN, só que da um pouco de trabalho pq tem que fazer o post lá com as imagens pra depois importar para o Blogger e as vezes as fotos ficam com um espaço enorme entre elas e mesmo arrumando no post do blog continua enorme por isso estou rocurando um outro recurso pra postar fotos grandes.
    bjoOs!

    ResponderExcluir

LEIA AS REGRAS COM MUITA ATENÇÃO:

- Seu comentário precisa ter relação com o assunto do post;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Se quiser deixar sua URL, comente usando a opção OpenID;
- Comentários com CAIXA ALTA, miguxês ou erros de ortografia não serão aceitos;
- Ofensas pessoais, ameaças e xingamentos não são permitidos.