Como personalizar a data do Blog | Quero Dicas

Quero Dicas : Como personalizar a data do Blog

Como personalizar a data do Blog

|


Como personalizar a data do Blog
Olá pessoal. Depois de quase uma semana resolvendo sobre o domínio próprio no blog, vou voltar a prática de dar dicas a 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 da imagem.

Houve também, muita gente que teve dificuldade na hora da instalação. Por isso, hoje eu trouxe outra forma de personalização bem mais simples.

É muito fácil e rápido, eu garanto!

Caso não goste desse estilo, deixo alguns links abaixo para que você possa escolher:
♥ 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 o tutorial vamos em 2 passinhos muito rápidos. 
Claro, sem falar na customização, que é mais rápido.

Para que saiba, ele também ficará ao lado do titulo do post, podendo escolher, lado direto ou esquerdo, você decide!
Veja na imagem
Como personalizar a data do Blog


  TUTORIAL

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.


Como alterar a data do Blog

3 - Salve

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 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 dele (.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 e salve. Pronto!
Tabela de cores AQUI

E ai o que achou? Comente!
Beijinhos

Compartilhe


Nenhum comentário:

Postar um comentário

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.

Beijinhos ♥


Divulgue o seu Blog

Agenda dos Blogs - Blog de divulgação de blogs

Agregadores e Amigos

Atoananet Linkirado Linkicha GeraLinks Universo das Dicas
subir