Aprenda como personalizar a data com imagem facilmente | Quero Dicas | Tutoriais para seu blogs


Aprenda como personalizar a data com imagem facilmente


Devido a grande demanda do post "Aprenda como personalizar a data do seu blog", ainda tem gente com dificuldade na hora da instalação, então, hoje eu criei este tutorial, que segue o mesmo critério do outro, com imagem e ao lado do titulo, só que muito mais fácil de fazê-lo.

Siga o tutorial abaixo

  TUTORIAL




1 - Vá em "Modelo" e "Editar HTML"
2 - Procure por:

.main-inner h2.date-header {
   
Você encontrará mais ou menos assim
.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}

► Caso não encontre, procure por:

>.date-header span {
Você encontrará mais ou menos assim
.date-header span {
 background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

3 - Onde eu destaquei em AZUL (até o fechamento } ) substitua por:

 /* DATA PERSONALIZADA www.querodicasde.com.br */
font: normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #ffffff;/* cor da fonte da data */
background: url('URL DA IMAGEM');
background-repeat: no-repeat;
text-align:center;/* alinha o texto */
font-family: 'Arimo', sans-serif;
font-size: 13px;/* fonte da data */
width: 80px;/* largura */ 
height: 80px;/* altura */
float:left; /* localização */
margin-left: -20px; /* margin */
margin-top: -20px; /* margin */
padding: 19px 13px 52px 1px; /* margin entre o texto e imagem */
overflow:hidden;
line-height: 20px;/* margin */
word-spacing: 55px;/* margin */
}

Ficando assim (exemplo):

.date-header span {
font: normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #ffffff;/* cor da fonte da data */
background: url('URL DA IMAGEM');
background-repeat: no-repeat;
--- restante do código ---


5 - No destaque em laranja (URL DA IMAGEM), coloque o endereço da sua imagem

6 - Faça alterações onde deixei destacado ao lado de cada item (código), salve e pronto!

Espero que tenha ajudado. Faço questão do seu comentário sobre o modo de instalação. Beijinhos

Caso queira reblogar, dê os meus devidos créditos.


Baixo algumas imagens
Clique para pegar ou copie a url
  

   

Me Contrate!

17 comentários

Clique e deixe seu comentários
terça-feira, 28 julho, 2015 ×

não consigo encontrar o código no html :/
me ajuda?
te passo ate a senha.

Resposta
avatar
admin
quarta-feira, 29 julho, 2015 ×

Caroline, entre em contato comigo por e-mail
contatosbiabarros@hotmail.com

Resposta
avatar
admin
sábado, 01 agosto, 2015 ×

Otimo tutorial, pena que vc bloqueia o botão direito e fica muito ruim de executar, já desisti, vou procurar outro.

Resposta
avatar
admin
sábado, 01 agosto, 2015 ×

Olá Luana.
Desculpa, mas não bloquei o botão direito e sim o esquerdo de seleção de texto.Você pode abrir em outra aba do seu navegador, caso seja alguma imagem que queira utilizar. Em relação a seleção dos códigos, ele funciona perfeitamente.
Mesmo assim, obrigada pelo comentário e sua visita. =D

Resposta
avatar
admin
domingo, 01 novembro, 2015 ×

Não consigo copiar e colar tenho que ficar digitando letra por letra assim é muito ruim é so comigo que acontece isso?

Resposta
avatar
admin
domingo, 01 novembro, 2015 ×

Oi Amora.
Para copiar os códigos que disponibilizei, é só selecionar o que está dentro da caixinha de seleção.
Depois de copiado, cole no local indicado como informei no tutorial.
Beijinhos ♥

Resposta
avatar
admin
terça-feira, 05 janeiro, 2016 ×

Foi super fácil esse tutorial. Obrigada. Mas não consigo colocar a imagem. Tentei com todas essas que vocês disponibilizou, mas não foi nenhuma. Qual será o problema?

Resposta
avatar
admin
quarta-feira, 06 janeiro, 2016 ×

Olá, EKatherina.
Talvez, você esteja apagando as aspas (" ") ao colocar o endereço da imagem.
Espero ter ajudado =D
Beijinhos ♥

Resposta
avatar
admin
quarta-feira, 06 janeiro, 2016 ×

Yup! Era isso mesmo. Agora eu consegui e está lindo <3
Muito obrigada ^^
Seu blog é um amor :3

Resposta
avatar
admin
quarta-feira, 27 janeiro, 2016 ×

Olá eu fiz tudo certo, personalizei e tals, mas o problema é que a imagem aparece em todas as paginas. Tipo eu acho desnecessário data na pagina de sobre e contato, dai eu tiro a data porém continua a imagem :( tem como você me ajudar ?

Resposta
avatar
admin
sexta-feira, 29 janeiro, 2016 ×

Olá Amanda.
Existe sim está possibilidade de retirar a data das páginas estáticas. Infelizmente, não dá para te explicar por aqui (são códigos de troca). Mas, pode deixar que no próximo post desta semana irei falar sobre ela =D
Afinal é importante todos saberem. =D
Beijinhos ♥

Resposta
avatar
admin
sábado, 20 fevereiro, 2016 ×

oi como eu coloco a imagem DENTRO do post? amei mas não consigo fazer isso

Resposta
avatar
admin
sábado, 20 fevereiro, 2016 ×

Olá Dani.
Como assim colocar a imagem DENTRO do post? Me explique melhor.
Beijinhos ♥

Resposta
avatar
admin
sexta-feira, 18 março, 2016 ×

no meu a imagem não aparece

Resposta
avatar
admin
sábado, 19 março, 2016 ×

Oi Zelia.
Veja se a url da imagem está dentro das aspas ( " aqui dentro " ).
Outra dica: Altere o tamanho da imagen e o posicionamento.

Espero ter ajudado.
Beijinhos ♥

Resposta
avatar
admin
sábado, 08 outubro, 2016 ×

Nossa eu adoreiiii <3 parabéns.. ótima explicação e ficou lindo.
Ficou exatamente do jeito que eu queria nossa <3 <3

Resposta
avatar
admin
sábado, 08 outubro, 2016 ×

Fico muito feliz em saber que você conseguiu e que ficou do jeitinho que desejava. =D
Obrigada por seu comentário e continue visitando o blog
Beijinhos ♥

Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.