Personalizando a data da postagem com imagem

12:10

Ola meus amores, hoje vim com um tutorial super pratico e simples de aplicar, que é a data do post com imagem, existem vários tutoriais que ensinam personalizar a data do post em hover, porem são poucos os que ensinam com imagens, e a maioria è bem complicada para quem esta começando.

Por isso trago esse especialmente para vocês, que não tem muita afinidade com HTML.
Observacao: Esse código é usado por vários sites de tutoriais, não titulariza o autor, mas cada um que personaliza deixa sua marca. Por isso, peço que não tire os créditos da personalização, obrigada!

Uma dica: Caso use uma imagem abaixo da data (a exemplo da imagem que postei logo abaixo) configure a data dessa maneira: 01/04/2015
Caso use a imagem em circulo ou quadrado, use dessa maneira: 01 Abril 2015

EXEMPLO DE FORMATOS

De Contrl+F e perquise por:

.main-inner h2.date-header {

font: $(date.font);

color: $(date.text.color);

}

Obs: Se a data ja foi modificada alguma vez, tente procurar apenas com essa linha:
.main-inner h2.date-header {

Ao encontrar, apague as 4 linhas e substitua por esse codigo:

.main-inner h2.date-header {

/* Data da postagem personalizada por renatamassa.com */

float: left;

width:53px;/** largura **/

height:51px;/** altura **/

overflow:hidden;

font-size:9px;/** tamanho da fonte **/

color: #fff !important;/** cor da fonte **/

text-align:center;

margin-bottom: -45px; /** desce **/

margin-left: -60px; /** margem pra esquerda **/

padding: 8px 2px 0px 2px;

background: url('LINK DA IMAGEM AQUI');

}

/* Fim da data da postagem personalizada por renatamassa.com */

Onde coloquei de vermelho, é onde voce pode alterar conforme a necessidade, por ultimo logo abaixo substitua onde tem 'LINK DA IMAGEM AQUI' pela URL da imagem desejada de preferencia 55px por 55px

E claro nao poderia deixar de disponibilizar algumas imagens para vocês