Como escrever igual a gadget "Posts da Vez"

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Recebi uma dúvida perguntando sobre como fiz para que a gadget da sidebar ficasse com a configuração que está, com a imagem paralela ao texto.

DICA: Aprendi a fazer isso selecionando textos com imagens que me interessam, clico com o botão direito do mouse e visualizo o Código Fonte da seleção. Assim... Fui testando até conseguir.

Aqui fica a dica para você por em prática sempre que quiser aprender algo, mas vou ensinar como está a configuração da gadget "Posts da Vez"

Veja só:
1º O código para a imagem:

<div style="FLOAT: left; WIDTH: 10%"><img style="vertical-align: middle;" src="URL da IMAGEM"/></div>

Entenda o código:
»Para que a imagem fique do lado esquerdo utilizei o comando [float:left;];
»[widht:10%] representa a largura do espaço que a imagem ocupa;
»[vertical-align: middle;] é o alinhamento vertical da imagem→central.
»OBS: Utilizei imagens com o tamanho 48x48px nesta gadget.

2º O código para o Título ao lado da Imagem:

<div style="FLOAT: right; WIDTH: 85%"><span style="font-weight: bold; border-bottom:1px dotted #B30000; line-height:1.4em; display:block; "><a href="URL do TÍTULO" target="_blank"> TÍTULO </a></span></div>

Entenda o código:
»Para que o texto fique do lado direito utilizei o comando [float:right;];
»[widht:85%;] representa a largura do espaço que ao texto ocupa;
»[font-weight: bold;] significa que o texto está em negrito;
»[border-bottom:1px dotted #B30000;] é o sublinhado do texto, apenas em baixo, mas você pode colocar ao lado, ou borda em tono dele todo;
»[line-height:1.4em;] altura da linha;
»[display:block;]para o texto ficar ao lado da imagem deve estar em bloco;
»[font-size:120%;] indica o tamanho da fonte.

3º O texto abaixo da imagem e titulo:

<span style=" margin-left:20px; padding:2px 0 0px 20px;">
<ul> TEXTO 1ªLINHA </ul>
<ul> TEXTO 2ªLINHA </ul>
<ul> TEXTO 3ªLINHA</ul></span>

Entenda o código:
»[padding:2px 0 0px 20px;] margem interna do texto na seguinte ordem: superior, direita, inferior e esquerda;
»[font-size:85%;] indica o tamanho da fonte;
»[margin-left:20px;] indica a margem esquerda do texto.
»[<ul>] define as linhas.

AO FINAL FICARÁ ASSIM:

<div style="FLOAT: left; WIDTH: 10%"><img style="vertical-align: middle;" src="URL da IMAGEM"/></div><div style="FLOAT: right; WIDTH: 85%"><span style="font-weight: bold; border-bottom:1px dotted #B30000; line-height:1.4em; display:block; font-size:120%;"><a href="URL do TÍTULO" target="_blank"> TÍTULO </a></span></div><span style="font-size:85%; margin-left:20px; padding:2px 0 0px 20px;">
<ul> TEXTO 1ªLINHA </ul>
<ul> TEXTO 2ªLINHA </ul>
<ul> TEXTO 3ªLINHA</ul></span>
<br/>

►Use <br/> para saltar uma linha entre os textos.

Siga estes passos e altere da forma que quiser.

Sugiro que visite sites que ensinam sobre códigos CSS e HTML como por exemplo:
CSS PADRÕES ou CSS PARA WEBDESIGN