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.
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:
Portanto de antemão deixo á seu inteiro critério o uso ou não das coisas que postarei aqui.
|
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.
.( )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>
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 :
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.
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>
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:
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:
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:
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
AMEI!!! há tanto tempo que procurava uma solução para isto e afinal é tão simples!
muito obrigada.
explicação nota 10!
xx
su.
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!
seu bom humor é o melhor, a se os professores tambem fizessem issoo , o mundo seria dos espertos
muito bom, muito obrigada!
Perfeita a explicação, ajudou muito.
Grato pelos comentários!!
Rapaz,poxa... muito obrigada!
Você salvou minha vida rsrs
Muito obrigada de coração!
Postar um comentário