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
Nao esqueçam de comentar o post!!! E claro...de seguir o blog!
Confiram mais TUTORIAIS >>>> AQUI <<<<
Bjinhos













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?
ExcluirQue bom Jozee que funcionou! Ah obrigada pelo carinho, vou la no seu blog conferir!!! Bjao linda!
ResponderExcluiroi 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.
ResponderExcluirobrigada, so tive que ajustar a posição do meu mas deu super certo...bjbjbj
ResponderExcluirhttp://www.riachuelopress.com.br
ResponderExcluir