26 janeiro 2015

Personalizando a data do blog - Modelo 3

Aprenda como personalizar a data do seu blog

Mais uma postagem que eu trouxe para você aprender a personalizar a data do seu blog.

Desta vez, eu trouxe o terceiro modelo. Quer ver os outros modelos? Acesse:

• Personalizar a data ao lado do titulo - Modelo 1
• Como personalizar a data do Blogger - Modelo 2.

Nesta semana estarei fazendo um tutorial em vídeo do modelo 1, devido a dificuldade que muita gente está tendo na hora de arrumar a data dentro da imagem eu vice e versa.

Enfim, vamos a este tutorial...

Este modelo fica assim, podendo ficar tanto ao lado direito quanto o esquerdo 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 blog e claro, dê preferências a um blog de teste! Não sabe fazer Backup? Não tem problema, clique e aprenda.

TUTORIAL

1 - 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



Antes de começarmos acesse a página de códigos para podermos começar o tutorial. Deixe-a aberta.

2 - Agora, vá em Tema e Editar HTML

3 - Dentro do HTML, procure por:

</head>

4 - Abaixo dele, cole o seguinte código do link abaixo:
--- Se for o modelo Minima, cole o código acima de </head>

Continuando...

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! 

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 CSS

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

Tabela de cores: AQUI

E ai, gostou? Então deixe seu comentário!
Beijinhos

4 comentários:

  1. não consegui =(
    fica sem data nenhuma

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

      Excluir
  2. 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

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

      Excluir

Amigos do Blog



Agregadores