quarta-feira, 23 de março de 2011

Como Lidar Com Imagens Que Gostam De Passear Pelo Blog

Inicialmente gostaria de dizer que não sou especialista em construção de sites ou algo parecido, o que me traz aqui é somente a vontade de tentar ajudar as pessoas com o pouco que sei sobre alguns assuntos.
Portanto de antemão deixo á seu inteiro critério o uso ou não das coisas que postarei aqui.

Imagens lado á lado sem crise






Quando você clica no botão de ''Publicar postagem'' ,depois de horas de trabalho,finalmente  satisfeito com o conteúdo que acabou de produzir para o seu blog, vê que aquela imagem que você colocou pertinho do rodapé subiu e está  em um animado batepapo com a imagem do cabeçalho do blog ,você:

(   )Chama o Padre Quevedo para exorcizar seu post.
(   )Tenta entrar em acordo com a imagem andarilha.
(   )Desliga o computador e vai dormir.
.
Calma,se as imagens que você postou são rebeldes, e teimam em
ficar passeando pelo seu blog sem a sua autorização ,não arranque os cabelos ainda,vamos pedir socorro.
Pedido o socorro, a única que se prontificou a ajudar foi a senhorita Tabela,ela adora organização e se interessou por nosso caso.

Vamos ver como usa-la,aliás você nem lembrará que ela está te ajudando,pois essa tabela não gosta muito de aparecer.

Vamos  digitar as  palavrinhas mágicas para chama-la:

 
<table style="text-align: left; width: 100px;" border="0"
 cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>     
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>      
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>     
    </tr>
  </tbody>
</table>
 
Acho que é por isso que  a tabela não gosta de ser vista,muito feinha coitada....hehehehe
Vamos interpretar o que esse monte de garrancho quer dizer :


 


Agora sabemos  que esse monte de código aparentemente  sem sentido representa para nosso navegador uma tabela bem organizada.(o navegador escreve certo por linhas tortas heehheheheheheeh)
Queremos que nossas imagens parem de passear e para isso nada melhor  que tranca-las nesses quadradinhos.
( Ado,aado cada imagem no seu quadrado)
Vamos imaginar que temos 3 imagens para colocar, e queremos  que elas  fiquem de forma ascendente na página ,ou seja ,assim :


Lembrando que nada impede  colocarmos as  imagens da maneira que quisermos dentro da tabela.
Na tabela acima,poderiamos colocar até 9 imagens,desde que a largura somada delas não ultrapassem a largura da sua área de postagem.
Mas voltando ao assunto....

Siga o passo á passo:

Vá no seu editor do blog  , inicie uma nova postagem e faça o upload das 3 imagens que vc vai usar:



Abra  o seu bloco de notas, cole o código da tabela abaixo e coloque em forno previamente aquecido........opsss..esqueci, isso aqui não é uma receita de bolo hehehehe.
Você pode aumentar ou diminuir as vagas da sua tabela para imagens como quiser,para isso é só alterar  o número de vezes em que o código
 <td>Lugar vago</td>   aparece  no html.
Cada <td>Lugar vago</td> representa um quadrado na tabela.
 
         Código da tabela :
<table style="text-align: left; width: 100px;" border="0"
 cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>Lugar vago</td>
      <td>Lugar vago</td>
      <td>Reservado para a IMAGEM1</td>
    </tr>
    <tr>
      <td>Lugar vago</td>
      <td>Reservado para a IMAGEM2</td>
      <td>Lugar vago</td>
    </tr>
    <tr>
      <td>Reservado para IMAGEM3</td>
      <td>Lugar vago</td>
      <td>Lugar vago</td>
    </tr>
  </tbody>
</table>

Você notou  que cada foto tem o lugar certinho pra  ficar??
A tabela chegou pra por ordem na desordem.


Volte ao seu blog e copie o código HTML das fotos que você acabou de fazer Upload:
 


Cole  o código das fotos no bloco de nota ,abaixo do código da tabela que você já deixou esperando.
Observe que cada código está separado por uma linha em branco,cada um corresponde á uma imagem.
Agora  passe o código das imagens para os lugares  que estão em destaque,cada um no seu lugar correto.
Prontinho, agora é só  pegar o código  e passar para seu blog  que as imagens irão parar no lugar hehehe
Esse código também pode ser usado nos lugares reservados para gadgets
Lembrando que  a soma da medida da largura das imagens não podem exceder a largura disponível  para postagem.
Se caso isso ocorrer ,abra seu editor de imagens e diminua  um pouco a largura  até que seja suficiente para caber .
Bom,para terminar vamos ver como ficou  o layout  das nossas imagens:

 













Att.



8 comentários:

.: Dani Pimenta :. disse...

Simplesmente demais!
Parabéns pelas explicações... Didática nota 10 e nota 1000 para o bom humor!
Eu adorei e já coloquei em prática!
Abraços,
Daniele Pimenta

su. disse...

AMEI!!! há tanto tempo que procurava uma solução para isto e afinal é tão simples!
muito obrigada.

explicação nota 10!

xx
su.

Camila disse...

Nossa!!!
Que Padre Quevedo que nada, seu post é o milagreiro.
Adorei, vou visitar sempre, a dica foi simples e fácil de aplicar.

bj e obrigada!

Anônimo disse...

seu bom humor é o melhor, a se os professores tambem fizessem issoo , o mundo seria dos espertos

Lylian disse...

muito bom, muito obrigada!

Coraccini disse...

Perfeita a explicação, ajudou muito.

TbRn disse...

Grato pelos comentários!!

Art Ideia Ilustrada disse...

Rapaz,poxa... muito obrigada!

Você salvou minha vida rsrs

Muito obrigada de coração!