Como publicar várias imagens lado a lado nas postagens de um blog do Blogger?

Você está aqui: Home » Blog » Como publicar várias imagens lado a lado nas postagens de um blog do Blogger?. Postado por: Paulo Roberto.

Publicar imagens nas postagens de um blog hospedado na plataforma Blogger é muito fácil e rápido, pois todas as imagens contidas no blog e nos artigos são armazenadas direto nos servidores do Picasa. Mas, é bom você tomar algumas precauções antes de sair publicando qualquer tipo de arquivo de imagens e tamanhos... O Picasa disponibiliza 1GB livre de espaço para você armazenar todas as imagens do blog; 1GB não é muito espaço se você não souber usá-lo! Agora com as novas regras da Google, você pode postar imagens com dimensões de até 800 pixels nos artigos do seu blog, que ela não será contabilizada no crédito de 1GB (eu recomendo no máximo uns 780 pixels). Portanto, se você postar imagens grandes com dimensões maiores que 800 pixels, o seu crédito livre do Picasa vai acabar bem rápido; porém, se você postar imagens pequenas (máximo 750 a 780 pixels) você poderá postar uma quantidade infinita de imagens nos artigos do seu blog!

Quanto aos arquivos de imagens (JPG, JPEG, GIF, PNG, BMP etc), procure usar os arquivos de imagens mais leves jpg, jpeg e png; bmp e gif, por exemplo, são arquivos mais pesados que irão fazer as páginas do seu blog demorar mais para carregar. É bom lembrar que a grande maioria dos usuários não possuem internet banda larga em sua residência... Um blog que carrega rápido é bom e os usuários agradecem! Vejamos agora como colocar várias imagens lado a lado nos artigos do seu blog. Antes de tudo, eu quero esclarecer que, a quantidade de imagens que aparecerão uma ao lado da outra vai depender do tamanho das imagens e da largura da área de postagens do seu blog; por exemplo, um blog com 660 pixels de largura na área das postagens, não poderá colocar 3 imagens lado a lado com dimensões de 230 pixels de largura. Lembrando que as imagens que você for colocar no seu blog devem ter dimensões menores que 800 pixels (altura e/ou largura); portanto, antes de fazer upload das imagens para o seu blog, você deve redimensioná-las num editor de imagens (Paint, Photo Scape, Picture Resizer (Ferramenta online grátis) etc). Evite fazer upload de imagens com dimensões a partir de 800 pixels para editá-la no editor de postagens do Blogger, pois a edição é apenas uma ilusão de óptica (redimensão falsa, serve apenas para acomodar a imagem no template do seu blog).

a)Para colocar várias imagens lado a lado num artigo do blog, vá ao painel de controle do Blogger e clique no link Criar nova postagem (representado por um ícone de lápis);
b)Você será encaminhado para a página do editor de texto; deixe ele no modo Escrever e depois clique no ícone de imagem ao lado direito de Link; abrirá uma pequena janela pop-up para você escolher as imagens, clique em Escolher arquivos, escolha as imagens espere carregar e depois clique em Add Selected;
c)As imagens irão aparecer no seu editor de texto; agora você deve clicar em HTML para o editor de texto mostrar o código das imagens para você poder personalizá-las no tamanho desejado.
d)O código das imagens será mostrado igual (ou parecido) com o código abaixo:

Localize no código de cada imagem os trechos destacados em vermelho no código acima e apague-os. O código de cada imagem começa com <div class e termina com </div>. Após apagar os trechos destacados no código, restará isso:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZNK43OQjy9z_HNBxTxLapzAVoRiEwM21eupHa0L_8C552ieyJE8eE3Dw038sLZSls2obzjFSvqaQNvvqKzy5jEgdsr_-u3_NOGwb-QWRa4TZ4JmRmM0fY7ZWrjL6fBtS1PcU9_ultQABt/s1600/passaro+colorido.jpg" />

ou isso:

Caso não tenha o height="XXX" e width="XXX" (altura e largura) no código restante da imagem, basta você acrescentar isso antes de "src". Vai ficar assim:

<img border="0" height="XXX" width="XXX"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZNK43OQjy9z_HNBxTxLapzAVoRiEwM21eupHa0L_8C552ieyJE8eE3Dw038sLZSls2obzjFSvqaQNvvqKzy5jEgdsr_-u3_NOGwb-QWRa4TZ4JmRmM0fY7ZWrjL6fBtS1PcU9_ultQABt/s1600/passaro+colorido.jpg" />

Serão (height= altura da imagem.width= largura da imagem) esses valores que você deverá personalizar para determinar a largura e altura das imagens que irão aparecer lado a lado no artigo do seu blog. Não deixe os códigos das imagens colados assim:

<img border="0" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit9IntaWFlKuznRlKTdz1kpaOwZlNIMJLjLKqBb4hkdiSrLNy68lQx0hMP5YZ_yV0UGs2735UglV2bvxWuwAD2kILGnXJKY0q7ZMcWQFw-J2xFs9-nWtxRiezjzmaua-pMv_ubUYC3N_VH/s320/periquitos+na+arvore.jpg" width="320" /><img border="0" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit9IntaWFlKuznRlKTdz1kpaOwZlNIMJLjLKqBb4hkdiSrLNy68lQx0hMP5YZ_yV0UGs2735UglV2bvxWuwAD2kILGnXJKY0q7ZMcWQFw-J2xFs9-nWtxRiezjzmaua-pMv_ubUYC3N_VH/s320/periquitos+na+arvore.jpg" width="320" />

Dê 2 cliques de espaço para as imagens não ficarem coladas umas nas outras! Assim fica bom:

Caso você queira alinhar o grupo das imagens dentro da sua postagem, basta jogar o código de todas as imagens dentro disso: <div align="center"> CODIGO DAS IMAGENS AQUI </div>
Center= Alinha as imagens ao centro, Left= Alinha as imagens à esquerda eRight= Alinha as imagens à direita.

Imagens: Google Imagens/Reprodução.