Aprenda como personalizar a data com imagem facilmente | Quero Dicas Quero Dicas : Aprenda como personalizar a data com imagem facilmente

Quero Dicas : Aprenda como personalizar a data com imagem facilmente

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!

Compartilhe


17 comentários:


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

Apenas peço que leia:

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 palavras de baixo calão, não serão publicados ou respondidos.

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

4 - Por favor, não adicione links externos nos comentários.

Beijinhos ♥

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

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

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

    ResponderExcluir
    Respostas
    1. 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

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

    ResponderExcluir
    Respostas
    1. 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 ♥

      Excluir
  4. 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?

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

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

      Excluir
  5. 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 ?

    ResponderExcluir
    Respostas
    1. 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 ♥

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

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

      Excluir
  7. Respostas
    1. 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 ♥

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

    ResponderExcluir
    Respostas
    1. 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 ♥

      Excluir

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir