Ilustração de post acima do título da postagem

Ohayou ^^

Para segundo post de hoje, não diria propriamente que trago algo fácil ou rápido, mas pelo menos é original. Testei no meu layout de natal e deu certo, e como foi todo feito por conta própria, é com orgulho que venho postá-lo aqui: é uma maneira de colocar o título do post abaixo da ilustração. Para quem não tiver paciência para tudo, trago mesmo uma versão alternativa que não é tão eficaz mas poupa imenso tempo. Cá está:

Prévia

Tutorial

1ª Etapa : Adicionar um efeito à primeira ilustração do post
1» Adicione a ilustração ao post
2» Abra o HTML da postagem: www
3» Adicione o nome do efeito antes do fecho de /> , como podem ver na imagem. Eu chamei "postagem" ao efeito: www
4» Guarde o rascunho/pré-visualize/publique, e recarregue a página conforme proceder à etapa seguinte, para ver como está a ficar

2ª Etapa: Adicionar o efeito
1» Abra o seu HTML: www
2» Com Ctrl + F,procure por /b:skin
3» Adicione acima o efeito com o mesmo nome que usou no passo 2 da etapa anterior ao HTML. No meu caso, escrevi isto:

.postagem {
width: 718px;
margin: -35px 0px 35px -12px;
padding: 4px;
border-radius: 0px!important;
border: 0px solid #ffffff;
background: #fff;
box-shadow: 0px 0px 3px #faca70;
outline: solid 13px rgba(255, 255, 255, .5);
outline-offset: -13px;
-webkit-transition-duration: .60s;
}
.postagem:hover {
background: transparent;
opacity: 0.70;
outline-offset: -5px;
outline: 1px dashed #e66453;
border-radius: 1px;
box-shadow: 0px 0px 3px #f2c28a;
-webkit-transition-duration: .60s;
}

Você pode aproveitar o efeito e o nome, eu fazer as alterações que quiser, incluindo apagar toda a área hover. Mas cuidado para, dentro das primeiras chavetas, não apagar padding nem margin.

3ª Etapa [parte demorada]: Ajustar as margens
Teoricamente, isto não é difícil, mas vai demorar porque todas as margens têm de bater certo, e não basta editar uma área só. Aqui está uma montagem de todas as áreas que editei: www
1» Procure pelas áreas seguintes (se não achar, experimente tirar o espaço entre a última palavra e a chaveta de abertura):

• .post-outer {
• h3.post-title {
• h3.post-title a {
• .main-inner h2.date-header {

2» Em cada uma delas, acrescente antes de } (caso não tenha) e mexa nos valores das linhas:

• padding: 0px 0px 0px 0px;
• margin: 0px 0px 0px 0px;

Explicando» Os zeros correspondem, por ordem: ao topo, direita, baixo, esquerda.
Padding - é para valores internos (entre o limite da área/caixinha e a fonte), e não é possível trabalhar com valores negativos.
Margin - refere-se ao espaçamento externo (entre a caixinha e o que a rodeia) e é possível usar valores negativos.

Batota:

Se achar que este tutorial é demasiado elaborado, pode fazer algo mais simples: Começa a postar sem título, coloca a imagem, escreve o suposto título e, pelo HTML da postagem, adiciona um efeito ao mesmo.

Há ainda esta segunda opção, que inclui as imagens no próprio título. Isso significa que, se o título estiver personalizado, com fundo e tal, a imagem estará enquandrada nessa personalização: www

O único problema de ambas é: as postagens mais antigas ficarão com o título por editar.


Enfim, era isto. Espero que tenham gostado ^^