Como personalizar a data do Blog | Quero Dicas Quero Dicas : Como personalizar a data do Blog

Quero Dicas : Como personalizar a data do Blog

Quero Dicas , Como personalizar a data do Blog , Day , Dicas Blog , Tutoriais ,

Como personalizar a data do Blog

| |

Aprenda como personalizar a data do seu blog

Olá pessoal. Depois de quase uma semana resolvendo sobre o domínio próprio do blog, vou voltar a prática de dar dicas para vocês.

Na primeira postagem desse blog, eu ensinei como personalizar a data dos post ao lado do titulo. Muita gente adorou este formato, devido a utilização de uma imagem no local. Houve também, muita gente que teve dificuldade na hora da instalação. Por isso, hoje eu trouxe outra forma de personalização que é bem mais simples e muito mais fácil e rápido, eu garanto!

Caso não goste desse formato, deixo alguns links abaixo para que você escolher seu estilo:

♥ Aprenda como personalizar a data do seu blog
Personalizando a data do blog - Modelo 3
Aprenda como personalizar a data com imagem facilmente
♥ Como personalizar a data do blog estilo calendário

Seguindo este tutorial, vamos em 2 passinhos muito rápidos. Claro, sem falar na customização, que é mais rápido ainda.

Para para você ver como ele fica, neste formato você poderá escolher o lado direto ou esquerdo e  também ficará ao lado do titulo do seu post. Você decide!

Veja na imagem
Como personalizar a data do Blog


Formato da data

1 - Acesse o painel do seu blog. 

2 - Clique em "Configurações", "Idioma e formatação" e mude o formato da data para 21/11/2014 (dia/mês/ano).

Dica: Este formato é o melhor por ser pequeno. dando assim mais espaço para o titulo dos seus posts.

3 - Salve

Como alterar a data do Blog


Instalação do código

1 - Agora siga para "Modelo" e "Editar HTML"

2 - Tecle Ctrl + F e procure por: 

 main-inner h2.date-header { 

3 - Agora abaixo dele cole:

 font-family: ARIAL; /* formato da fonte */
color: #000; /* cor da fonte */
margin-left: -80px; 
background: #f49cca; /* Cor do fundo */
float: right; /* lado esquero Right ou diretio left */
font-size: 14px; /* tamanho da fonte */
padding: 4px;
-webkit-border-radius: 5px; /* bordas arredondadas */
-moz-border-radius: 5px;/* bordas arredondadas */
border-radius: 5px; /* bordas arredondadas */
}
 

4 - Personalize onde eu deixe ao lado de cada códig e salve.

Tabela de cores AQUI


NÃO ENCONTROU O CÓDIGO ACIMA?

1 - Então procure por este:

 .date-header span { 

2 - Agora abaixo de .date-header span { você o selecionará e apagará tudo,  até } e colará o código  a seguir:

font-family: ARIAL;  /* formato da fonte */
color: #000;  /* cor da fonte */
margin-left: -80px; 
background: #f49cca;  /* Cor do fundo */
float: right; /* lado esquero Right ou diretio left */
font-size: 14px;  /* tamanho da fonte */
padding: 4px;
-webkit-border-radius: 5px;  /* bordas arredondadas */
-moz-border-radius: 5px;/* bordas arredondadas */
border-radius: 5px; /* bordas arredondadas */
}

 
3 - Personalize, salve e pronto!

Tabela de cores AQUI

E ai o que achou? Comente!
Beijinhos



Compartilhe

* Você reservou um tempinho para comentar? *

Desde já agradeço!

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


Nenhum comentário:

Postar um comentário

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Atoananet Linkirado
subir