Postagens | Dicas blog, Imagem, Pc Windows

Colocar e mudar aparência da data das postagens do BlogSpot

Mostrarei como ativar a data e hora da postagem do BlogSpot, e também uma tentativa de mudar o tamanho da data, diminuir a fonte preferencialmente, pois geralmente ela é grande demais.

Para aumentar e até estilizar a data da postagem, vai ser necessário alterar o Css do seu html, inserindo ou substituindo tags.

Nesse blog não tem a data da postagem no topo, até porque penso que isso é muito mais importante para blog/site de noticias, eu mesmo, após pesquisar(mais ainda na época em que Sarney estava num sai não sai do $enado) e o que eu fazia ao visitar um blog ou site era olhar a data para me certificar que a noticia e decisão era recente ou era uma das varias vezes passadas em que ameaçou sair e lula pediu para ficar.

    Ativar data ou horário do post no blogger

  1. Acesse e faça login no Blogger.com
  2. Clique no link Layout Design (Design substituiu a palavra Layout. Atualização:2010)
  3. Observe se você foi direcionado para Elementos de página, se não clique no mesmo.
  4. Procure a área referente a Postagens no blog e clique no link Editar
  5. Na janela que abrir, veja que tem Opções da página de postagem, a primeira opção deve ser para a data no topo da postagem, que geralmente fica acima do título, você verá um quadrinho como esse exemplo: deve marcar o quadro e ao lado escolher o formato da data, e hora se quiser, mais abaixo tem novamente opção para você marcar e escolher uma data e hora, essa é que vai ficar abaixo da postagem, nos modelos em que ela é disponível.

    Para não usar as datas na postagem, basta deixar o quadrino desmarcado.

  6. Clique em SALVAR
  7. Na janela que ficou aberta clique em SALVAR também.
  8. Clique para aumentar
    ativar data e hora na postagem do blogspot

Mudar o estilo da fonte da data

É possível mudar o estilo da fonte, porém, é preciso um pouco de dedicação, pois além de usar Css essa data é um título, o que dificulta um pouco, principalmente para diminuir o tamanho da letra, mas se não for possível pode se usar um tipo de fonte menor(é bom ver as configurações de seu navegador, para ter certeza que não está especificado um tamanho mínimo, pois se tiver, você não verá as alterações).

O que você precisará é substituir ou adicionar tags, a primeira coisa é entender um pouco de Css, para isso vou explicar onde vai o estilo para essa data.

Esse código Css bem abaixo, vai diminuir o tamanho da fonte da data, porque vou usar os tipos de fonte menor que conheço e são Garamond, Courier New, Times, vou tentar colocar um tamanho de fonte menor, e vou colocar um código para diminuir os espaços entre as letras(caracteres) e outro para impedir qualquer tipo de maiúscula.

Geralmente essas datas estão muito grandes, e para diminuir, mais fácil é você tentar, fazer um backup de seu modelo antes(caso faça algo errado), Acesse o blogger=> Layout Design, => Editar Html, => encontre ]]><b:skin>

Esse código <b:skin><!--[CDATA[ é onde inicia o Css do seu HTML, fica próximo ao inicio do código, mas, ]]><b:skin> é onde termina o Css e, adicionado códigos de estilo na parte de baixo(antes do termino) do Css eles terão prioridade. Você deve ser cauteloso, pois o código deve ser colocado exatamente antes do término do Css. Aprender onde e como adiciona Css no blogger, clique

Você pode tentar alterar o estilo da data do post, encontrando esse código:
]]><b:skin>

Logo antes(acima) do código acima você deve deixar umas linhas em branco para não confundir e, pode adicionar:
h2.date-header {font-family:Garamond, Courier New, Times; font-size:60%; text-transform:none; letter-spacing:0; font-variant:normal;}Após adicionar o Css, clicar no botão VISUALIZAR, se ficar como você gosta clique em SALVAR MODELO

Só isso pode não ser suficiente, se você quer mudar o estilo da data ou não diminuiu o suficiente, você deve saber um pouco de Css, abaixo vou mostrar alguns exemplos, e, você pode substituir ou personalizar, principalmente se já existe no seu Css esse código h2.date-header { Pois você não estará colocando mais um código já existente, isso deixaria seu Html menos pesado.

Entenda mais sobre o Css e a data do post

Se você expandir widgets do Html de seu blogger irá encontrar nele esse trecho de código Html+Xml:
<h2 class='date-header'><data:post.dateheader/></h2>
Esse acima é o código da data no topo do post do blogspot, até aí tudo bem, mas quem da estilo a ela é um código inserido no Css do Html e, no código Css dois caracteres que são as chaves {} e dentro dessas você adiciona qualidades/estilos para a data. O código Css para estilizar a data no topo do post do blogger é:
h2.date-header {}
Os estilos ou qualidades sempre estão entre-chaves, nesse caso ainda está vazio, e você pode comparar esse código que é Css com aquele mais acima Html+Xml e, ver que tem dois nomes semelhantes, é que eles se "comunicam", agora vou mostrar o código Css para tornar a data vermelha:
h2.date-header {color:red;}
Agora para entender melhor, além de uma cor vou adicionar um código para aumentar a fonte:
h2.date-header {color:red; font-size:130%;}
Agora Fonte verde, menor e arial ou verdana:
h2.date-header {color:green; font-size:70%; font-family: arial, verdana;}
Nota-se que para dar qualidades foi adicionado códigos entre-chaves, e cada um desses tem uma função diferente:
color:green; Cor da fonte verde
font-size:70%; Tamaho da fonte menor, porém, para títulos nem sempre funciona.
font-family: arial, verdana; Tipo de fonte arial, mas se no computador da pessoa não tem arial vai aparecer a segunda opção que é verdana.

Isso mostra que você pode fazer o estilo para essa data da maneira que quiser, basta usar estilos de fontes Css para eles.

Outra opção, que não aconselho muito, mas você pode diminuir a letra da data mais ainda, é preciso expandir modelo de widgets e modificar o seguinte código Html+Xml:
<h2 class='date-header'><data:post.dateheader/></h2>
para:
<h6 class='date-header'><data:post.dateheader/></h6>

Nesse caso, para dar estilo, terá também que mudar no Css esse código:
h2.date-header {

para:
h6.date-header {
Quando não aconselho mudar o h2 para h6 é porque não sei quais as consequências(caso houver) pode ocasionar a seu blog, não no design dele, mas sim, em como os sites de busca vão encarar isso, uma vez que você estará dando menos valor a essa data-título, os sites de busca poderiam te passar um pouco mais abaixo em alguma pesquisa especifica para noticias ou blogs, mas, na busca normal não creio que tem muita influencia, pode ser dado mais valor ao título da postagem, ou mesma coisa, seria algo para alguém que posta quase todos os dias testar e ver o que traz mais visitas a seu blog.

17 comentários:

  1. Olá, preciso de uma GRANDEE ajuda :S
    As minhas actualizações não aparecem na pagina de quem me está a seguir ... podem ajudar? sff

    ResponderExcluir
  2. Marta D'Almeida

    Quem usou o blogger para seguir verá no Painel do blogger, já quem usou outro site vai depender do outro site que usou, não é culpa sua e nem há nada para você fazer.

    ResponderExcluir
  3. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  4. ola tou aqui tentando centralizar e mudar a fonte da data das postagens do meu blog porém não estou conseguindo alguma dica, abraços desde ja muito obrigado meu blog: http://biologiaquepariu.blogspot.com

    ResponderExcluir
  5. Oi minha conexão não tá funcionado prof. Fabiano Reise a discada é ruim,

    então vou ser curto, você percebeu que entre-chaves nos expls acima vão estilos Css, tenta adicionar
    text-align:center;

    observe se tiver text-align:left; ou text-align:right; esses devem ser removidos, mas apenas dentro de chaves logo após h2.date-header

    Parecido assim:
    h2.date-header {text-align:center;}

    ResponderExcluir
  6. nossa que postagem boa, fazia tempo que eu tava procurando isso!
    Parabéns!

    ResponderExcluir
  7. Olá, queria saber como coloar a data ao lado do título no canto direito. Alguem pode me ajudar?
    Vlw.

    ResponderExcluir
  8. biblioteca.icf

    Quem usa um modelo do blogger pode tentar procurar no HTML por esse trecho:

    <h2 class='date-header'><data:post.dateheader/></h2>

    E substituir por algo parecido com:

    <div style='float:right;width:180px'><h2 class='date-header'><data:post.dateheader/></h2></div>

    Aí, precisa ajustar a largura que coloquei width:180px pode aumentar ou diminuir o valor.


    Pode não dar certo, porque depende do modelo, por exemplo, existe alguns que usam display:block para o título, isso faz com que o título ocupa uma linha única

    ResponderExcluir
  9. Muito obrigado, seu blog tem me ajudado muito.

    Tu poderia me dizer se tem como mudar o formato da data para um formato estrangeiro. ex.:
    em vez de : 30 de agosto de 2011 09:38
    aparecer: 30-a de aŭgusto 2011 je 09:38

    e assim para todos os meses, com os nomes dos meses na outra língua?

    grato

    ResponderExcluir
  10. Nova Suno

    Dificilmente, até pode existir uma maneira usando JavaScript, mas é improvável, o que poderia fazer é mudar o idioma do blog, mas alteraria varias outras coisas e poderia fazer seu blog aparecer menos nas buscas para o Brasil...

    ResponderExcluir
  11. Oi FT. Tudo bem?
    Estou com um problema que ainda não consegui solucionar: resolvi personalizar a pagina inicial, até aí tudo bem, e queria que a data não aparecesse nela, também consegui fazer, mas...
    a data também não aparece nas páginas internas, ou seja, pra qualquer lugar que eu for não aparece a data dos posts, o que para o meu blog não é bom, pois a data localiza a notícia no tempo.
    Só um detalhe quando personalizei as páginas estáticas, consegui tirar a data e não alterou as outras páginas.
    Esse problema tem solução? Aguardando. Bj.

    ResponderExcluir
  12. Kátia

    Para ocultar a data você usou no Css isso:
    h2.date-header{display:none;}

    Só para você que já inseriu o código acima que oculta a data acima do post, você pode adicionar um código que vai reverter isso, mas, só nas postagens do blogger, faça uma cópia de seu código antes, e localize exatamente essa tag </head> e cuidado para não confundir com outra parecida, e, logo acima/antes dela(nem um caracter antes ou depois) Adicione esse código abaixo:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    h2.date-header{display:block}
    </style>
    </b:if>

    E salve seu modelo.

    ResponderExcluir
  13. Aff menino!!! Tú é tão sabido! (rsrsrs...)
    Deu certinho, certinho. Só você mesmo pra tirar as minhas dúvidas e solucionar minhas questões.Você é d+ mesmo.
    Muito obrigada. Bjão.
    Ah, pra dá estilo a data que voltou a aparecer como faço? Sabe pq pergunto, é que já tentei fazer essa modificação e não consegui.

    ResponderExcluir
  14. Kátia

    No código que comentei acima, logo após display:block você acrescenta o caractere ponto-e-vírgula ; que esqueci, e após ele você pode colocar qualquer propriedade Css que você encontrar em tutoriais, desde que eles estejam entre-chaves significa que são propriedades Css, mas cuidado, veja se são tutoriais Css e não outras linguagens, no caso desse post eu coloquei códigos color:red; font-size:130%; um que deixa a cor da fonte vermelha outro deixa ela maior.

    O problema desse post é que indiquei que colocasse o estilo no começo do Css e o mais correto é colocar ele no final do Css para ele valer mais do que os já existentes, vou modificar o post hoje.

    ResponderExcluir
  15. Mais uma vez tudo ok. E OBRIGADA.
    Mas quero perguntar mais (tenho fome de saber,hehe...): Veja bem, a data das minhas postagens sempre ficam acima do título, como se fosse um padrão do Template, já tentei coloca-la abaixo do título bem como o nome do autor do post e não consegui. Tem como?

    ResponderExcluir
  16. Kátia

    Também tentei mudar ela de local, no Html eu mudei, mas na página não mudava, talvez alguma configuração do blogger que impeça isso, nem tudo que a gente quer consegue, o que você pode fazer é dar menos destaque a ela e colocar num formato diferente de forma a não ficar tão 'gritante'.

    ResponderExcluir
  17. De uma olhadinha
    http://sweet-oficial.blogspot.com.br/

    ResponderExcluir

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!

Postagens Populares