Personalizando a data da postagem com imagem
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 
Nao esqueçam de comentar o post!!! E claro...de seguir o blog!
Confiram mais TUTORIAIS >>>> AQUI <<<<
Bjinhos
9 comentários
Ai Re, acredita que não deu certo =(
ResponderExcluirNão sei porque, fiz tudo certinho e a data continua igual. O que será que pode ser?
Beijo
Juliane Blog Psicologicamente Bela
Oiee Ju, iai voce conseguiu?
ExcluirFuncionou RÊ!!!
ResponderExcluirObrigada, seu blog é muito lindo, parabéns...
-
http://blogdajozy.blogspot.com.br/
Que bom Jozee que funcionou! Ah obrigada pelo carinho, vou la no seu blog conferir!!! Bjao linda!
Excluiroi não sei porque mas não consigo achar o código no meu blog..O que devo fazer??
ResponderExcluirOie muito obrigada me ajudo mundo!
ResponderExcluirJá tinha tentado varios esse foi o unico que deu certo
Obrigada mesmo!
Visite meu blog Palavra ao Vento
Beijos ^_~
Ai eu não estou conseguindo fazer de jeito nenhum. Parece até que a data está bloqueada.
ResponderExcluirMuito obrigada por este post! Foi de muita valia!
ResponderExcluirDeus abençoe!
http://resgatadapelorei.blogspot.com.br/
obrigada, so tive que ajustar a posição do meu mas deu super certo...bjbjbj
ResponderExcluirMande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.