Personalizando a data da postagem com imagem

12:10

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

Você pode gostar também

7 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. 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

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda