Tutorial HTML/CSS: Posts destaque

Algo que muita gente anda me pedindo para fazer aqui no blog, são tutoriais de HTML/CSS. Como grande maioria já sabe, faço layouts por encomenda (encomende aqui) e bastante gente vem me perguntar como se faz determinada coisa para melhorar o visual de seu blog. Algum tempo atras tive essa ideia de trazer alguns tutoriais HTML, mas acabei desistindo e hoje voltei com a mesma ideia, pensando em um melhor conteúdo e esclarecer duvidas.

Nesse post vou ensinar como fazer esses "posts destaque" em quadradinhos, é o que grande maioria vem me perguntando e encontro essa duvida também em diversos grupos de blogueiras. São esses que estão no topo dos posts aqui do blog (exemplo), ensinarei a fazer um exatamente como esse do exemplo. Lembrando que para "atualiza-los" é preciso que você faça manualmente.

ATENÇÃO: Antes que qualquer alteração em seu layout, faça um backup!

Primeiramente vá no seu painel do blog, clique em Modelo > Editar HTML. 

Com o ctrl+f procure por ]]></b:skin> (acima desse código fica sua CSS) logo acima dele cole o código abaixo:

/* BOX DE IMAGENS - POSTS DESTAQUE
----------------------------------------------- */
.boxgrid h3{ 
  margin-top:3px;
  color:#FFF; /*Cor do titulo*/
  font-size:15px; /*Mude o 15 pelo tamanho da fonte que desejar*/
  font-family: tahoma; /*Nome da fonte*/
  font-weight: normal;
  text-align: left; /*Alinhamento do titulo (left=esquerda/center=centro/right:direita)*/
  padding-left:10px;
}
.boxgrid{
  width: 200px; /*Largura dos quadrados*/
  height: 200px; /*Altura deles*/
  margin:5px;
  float:left;
  background:#000;
  position: relative;
  margin-top: 0px; /*Altere o 0 por um numero maior para que eles desçam*/
}
.boxgrid img{
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 200px; /*Aqui coloque o mesmo valor da largura do seu quadrado*/
  height: 200px; /*A mesma altura*/
}
.boxcaption{
  float: left;
  margin-top:140px; /*Dependendo da altura do seu quadrado, aumente esse valor para que a barra do titulo desça*/
  position: absolute;
  height: 30%; /*Altura da barra*/
  width: 100%;
  background-color: rgba(26, 26, 26, 0.7);
}
 .captionfull .boxcaption {
  top: 0px;
  left: 0;
}
.caption .boxcaption2 {
  top: 0px;
  left: 0;
}

Altere somente as linhas com as instruções, caso tenha nenhum conhecimento de CSS, não altere mais nada.
Agora vamos colocar os posts destaque em seu layout. Vá no seu painel e clique em Layout, crie uma nova Gadget e adicione um HTML/JavaScript. Lá você irá colar o seguinte código:

<div class="boxgrid caption">
<img src="LINK DA PRIMEIRA IMAGEM (DEIXE-A DO MESMO TAMANHO QUE COLOCOU NA CSS)" />
<div class="cover boxcaption">
<a href="LINK DO POST"class="moreLink"><h3>TITULO DO POST</h3></a></div>
</div>
<div class="boxgrid caption">
<img src="LINK DA SEGUNDA IMAGEM" />
<div class="cover boxcaption">
<a href="LINK DO POST"class="moreLink"><h3>TITULO DO POST</h3></a></div>
</div>
<div class="boxgrid caption">
<img src="LINK DA TERCEIRA IMAGEM" />
<div class="cover boxcaption">
<a href="LINK DO POST"class="moreLink"><h3>TITULO DO POST</h3></a></div>
</div>
<div class="boxgrid caption">
<img src="LINK DA QUARTA IMAGEM" />
<div class="cover boxcaption">
<a href="LINK DO POST"class="moreLink"><h3>TITULO DO POST</h3></a></div>
</div>

Caso queira acrescentar mais posts destaque, é só acrescentar esse código abaixo:

<div class="boxgrid caption">
<img src="LINK DA QUINTA IMAGEM" />
<div class="cover boxcaption">
<a href="LINK DO POST"class="moreLink"><h3>TITULO DO POST</h3></a></div>
</div>

Você pode hospedar as suas imagens pelo Tumblr (caso tenha uma conta) ou pelo Casimagens 

Super bobo de fazer, né? Qualquer duvida é só deixar nos comentários que irei responder todos, ou pode me add nas redes sociais que respondo lá também. Espero que tenham gostado e deixem dicas para próximos tutoriais.