Personalizando a data do blog - Modelo 3 | Quero Dicas | Tutoriais para seu blogs


Personalizando a data do blog - Modelo 3


Mais uma vez, eu trouxe para vocês, como personalizar a data do seu blog. Desta vez, eu trouxe o modelo 3, quer ver os outros modelos? Acesse: Personalizar a data ao lado do titulo - Modelo 1 e Como personalizar a data do Blogger - Modelo 2. Nesta semana, estarei fazendo um tutorial em vídeo do modelo 1, pois muita gente está tendo dificuldade na hora de arrumar a data dentro da imagem.

Enfim, vamos a este tutorial? =D

Este modelo fica assim, podendo ser colocado ao lado direito e claro, trocando sua cor.

Antes de começarmos o tutorial, eu sempre recomendo fazer um backup do seu template, ao instalar qualquer tipo de implementação de Códigos dentro do template do seu blog e claro, dê preferências ao blog de teste! Não sabe fazer Backup? Não tem problema, clique e aprenda.
TUTORIAL
1 - Antes de acessar o HTML do seu blog, vá em configurações > Idioma e Formatação e altere o formato da data. Ela deve estar assim: 26 Janeiro 2015. Veja na imagem


2 - Agora, vá em Modelo e Editar HTML

3 - Dentro do HTML, procure por:
 </head> 
 


4 - Abaixo dele, cole o seguinte código:

Clique aqui para pegar o Script
Se for o modelo Minima, cole o código acima de </head>
5 - Agora, procure pelo código:

 <data:post.dateheader/> 
 

6 - Você perceberá que haverá mais de um código igual. Então substitua todos que encontrar, por:

 <div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
 
Substitua somente os códigos <data:post.dateheader/>, nem antes e nem depois dele. 
Ficando assim:
<div class='post-header'>
<div class='post-header-line-1'/>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div></span></h2>
</b:if>
</div>


7 - Agora procure por:

]]></b:skin> 
  

8 - Acima dele, cole o código abaixo:

/*** Data personalizada ***/
#fecha {
color: #000; /*Cor da data*/
font-size: 10px;  /*Tamanho da fonte*/
font-weight: NORMAL;  /*pode trocar por italic ou bold*/
background: #CAE1FF;  /*cor do fundo*/
padding-top: 2px;  /*Altere as margens internas da data*/
margin-left: -66px; /*Margem externa direita*/
float:left; /* Ele está a esquerda, para colocar para lado direito troque left por right*/
margin: 0 10 0 0px;
margin-top: -30px;
text-shadow: 1px 1px 1px #fff; /*sombra*/
}
.fecha_dia {
text-align: center;
display:block;
font-size:16px; /*Tamanho da fonte*/
line-height:10px; /*Altura da Linha*/
font-family:'Century Gothic'; /*Estilo de fonte*/
letter-spacing:-1px;
padding-top: 8px;
padding-left: 5px;
padding-right: 5px;
}
.fecha_mes {
text-align: center;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
font-size:16px; /*Tamanho da fonte*/
line-height:10px; /*Altura da Linha*/
font-family:'Century Gothic'; /*Estilo de fonte*/
}
.fecha_anio {
text-align: center;
padding-top: 10px;
font-size:16px; /*Tamanho da fonte*/
line-height:12px; /*Altura da Linha*/
font-family: Century Gothic; /*Estilo de fonte*/
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
}
   


9 - Salve, personalize na cor que desejar e faça as mudanças que deixei ao lado de cada código que poderá mudar e pronto!

Tabela de cores: Flextool

E ai, gostou deste também? Então deixe seu comentário!
Beijinhos
Me Contrate!

4 comentários

Clique e deixe seu comentários
sexta-feira, 06 fevereiro, 2015 ×

não consegui =(
fica sem data nenhuma

Resposta
avatar
admin
sexta-feira, 06 fevereiro, 2015 ×

Olá Maria, felizmente este modo de mudança dá certinho. Eu fiz o teste em 3 tipos de template, o que pode estar acontecendo com você é a cor da data ou você esqueceu/ou errou de mudar o formato da data logo no inicio da postagem =\ Caso ainda não consiga, me enforme e veremos o que podemos fazer =D
Beijinhos ♥

Resposta
avatar
admin
sexta-feira, 27 março, 2015 ×

Da erro! Fiz o layout na hora de instalar no blog sumiu e eu mudei o formato tudo o que dizia no tuto! Agora não consigo remover o tutorial ou fazer aparecer a data! SOCORRO

Resposta
avatar
admin
sexta-feira, 27 março, 2015 ×

Olá Etefani. Bom, felizmente este tipo de modelo não dá erros, pois é o mais simples. Infelizmente você deve ter feito algo de errado, por exemplo retirou (sem querer) algum simbolo dentro de um dos códigos. Peço que preste atenção em qual foi e o coloque novamente. :( Qualquer dúvida ou ajuda me avise. 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.