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 :  

Comentários
0 Comentários


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

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 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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

É proibida a reprodução total ou parcial dos artigos deste blog sem autorização|Somente terá o direito de republicar os códigos publicados dando os devidos créditos.