Personalizando a data da postagem com imagem

dicas para blogs

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

You Might Also Like

10 comentários

  1. Ai Re, acredita que não deu certo =(
    Não sei porque, fiz tudo certinho e a data continua igual. O que será que pode ser?

    Beijo
    Juliane Blog Psicologicamente Bela

    ResponderExcluir
  2. Funcionou RÊ!!!
    Obrigada, seu blog é muito lindo, parabéns...
    -
    http://blogdajozy.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom Jozee que funcionou! Ah obrigada pelo carinho, vou la no seu blog conferir!!! Bjao linda!

      Excluir
  3. Anônimo01 maio

    oi não sei porque mas não consigo achar o código no meu blog..O que devo fazer??

    ResponderExcluir
  4. Oie muito obrigada me ajudo mundo!
    Já tinha tentado varios esse foi o unico que deu certo
    Obrigada mesmo!
    Visite meu blog Palavra ao Vento
    Beijos ^_~

    ResponderExcluir
  5. Ai eu não estou conseguindo fazer de jeito nenhum. Parece até que a data está bloqueada.

    ResponderExcluir
  6. Muito obrigada por este post! Foi de muita valia!
    Deus abençoe!
    http://resgatadapelorei.blogspot.com.br/

    ResponderExcluir
  7. obrigada, so tive que ajustar a posição do meu mas deu super certo...bjbjbj

    ResponderExcluir
  8. http://www.riachuelopress.com.br

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.