#Comofaz: data ao lado do título

#fecha {
display: block;
margin: 28px -33px 0 0px; (margem da data nesta ordem: superior, direita, inferior, esquerda)
float:right; (lado em que a data vai ficar. Se quiser à direita, deixe como está. Se não, troque o right por left)
padding-left: 20px; (margem interna esquerda)
padding-top: 10px; (margem interna superior)
color: #ffffff; (cor da fonte)
background: url(‘linkdasuaimagem’); (imagem de fundo)
width: 46px; (largura)
height: 57px; (altura)
border: #DCDCDC 0px solid; (borda. Aconselho a deixar como está. Caso queira uma borda, troque o 0 pelo número da espessura que deseja)
font-family: Verdana; (fonte da data)
text-transform: uppercase; (esta linha deixa a fonte em maiúsculo sempre. Se não quiser, basta removê-la)
}

.fecha_dia {
display: block;
font-size: 16px; (tamanho da fonte do número que corresponde ao dia)
}

.fecha_mes {
display: block;
font-size: 11px; (tamanho da fonte do número que corresponde ao mês)
}

.fecha_anio {
display: block;
font-size: 9px; (tamanho da fonte no número que corresponde ao ano)
}

2- Depois, marque a caixinha “Expandir modelos de widgets” e procure por esta linha:

<h2 class=’date-header’>

Abaixo dela, cole este código:

<span><div id=’fecha’>

<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>

</div></span>

3- Depois disso, você deve hospedar sua imagem na internet. Eu uso (e recomendo) o Imageshack. Você precisa ter uma conta lá para fazer o upload.

Vale lembrar que, caso escolha um coração, você deverá salvá-lo em PNG para que o fundo fique transparente. Comofaz: no Photoshop, abra um novo documento do tamanho desejado (o meu tem 66×67 pixels), lembrando-se que você deve deixar o fundo transparente (não esqueça de selecionar a opção transparent no Background Contents). Assim:

Com o documento criado, use a forma/shape escolhida (coração, círculo, estrela, etc) e desenhe-a proporcionalmente ao espaço criado, de preferência o mais próximo possível das bordas. Deste jeito:

Após isso, vá em File > Save for Web ou Save for Web & Devices (atalho: Alt+Shift+Ctrl+S). Em preset selecione a opção PNG-24 e deixe marcada a opção Transparency. Como no print:

Agora é só clicar em Save, dar o nome ao arquivo e fazer o upload. Então adicione o link da imagem no local indicado.

4- Para finalizar, vamos adicionar o script ao código. Você deve colar isso após a tag </head> do HTML do seu layout.

<script>
function remplaza_fecha(d){
var da = d.split(&#39; &#39;);
dia = &quot;<div class=’fecha_dia’>&quot;+da[0]+&quot;</div>&quot;;
mes = &quot;<div class=’fecha_mes’>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
anio = &quot;<div class=’fecha_anio’>&quot;+da[2]+&quot;</div>&quot;;
document.write(dia+mes+anio);
}
</script>

Clique em Visualizar para conferir se está tudo correto. Depois é só salvar e pronto! Sua data está personalizada.

E vocês? Curtiram o tutorial? Conta pra gente! E não deixem de passar lá no meu Ask para deixar outras sugestões e tirar suas dúvidas.