Sempre me pedem pra ensinar como eu coloco a data na maioria dos blogs que personalizo.
Há 3 maneiras diferentes, vou ensinar a mais segura, que não dá erro em nenhum template e em nenhum navegador.
Não é difícil, mas é preciso atenção, tá?
Antes de começar leia o artigo atentamente para ter certeza de haver compreendido.
A seguir faça um backup de seu blog.
Caso algo dê errado é só reinserir seu template original e tudo volta a ser como antes.
Outra dica que dou é fazer qualquer modificação em um blog de testes antes de mexer em seu blog "oficial".
Precauções tomadas, vamos ao tutorial?
Acesse o painel de seu blog e clique na aba Layout. Clique em Editar abaixo de Postagens do blog e configure a data para o formato conforme a imagem abaixo:
Salve a alteração.
Agora vamos aos códigos: abra a página onde eles estão, deixe-a aberta e vá ao painel de seu blog.
Agora acesse a aba Modelo. Escolha Editar HTML e dentro da caixa de códigos tecle Ctrl+F.
Na barra de busca digite </head> e tecle Enter para localizar.
E abaixo dela cole o primeiro código.
A seguir visualize para ter certeza de que está tudo indo bem. Agora localize este trecho:
Atenção!
Você encontrará 2 vezes esse trecho. Ignore a primeira ocorrência dele e quando achar a segunda ocorrência SUBSTITUA-O pelo segundo código.
Preste atenção, tá? Substitua apenas a linha que pedi para localizar; ficará assim:
<h2 class='date-header'><span> <div id='fecha'> <script>remplaza_fecha('<data:post.dateHeader/>'); </script> </div> </span></h2>
Visualize novamente. você verá que a data está em formato calendário.
Agora salve as alterações.
Vamos então modificar a aparência da data, dar cor, colocar uma imagem fofa, etc.
Para fazer isso localize a tag ]]></b:skin>
E acima dela cole o código CSS.
Vá mexendo e alterando conforme necessário, até que fique bem alinhado.
Quando estiver como deseja clique em Salvar alterações.
Coloque exatamente a largura e a altura da imagem que usar nos campos:
width:80px; /*Largura da imagem*/
height:80px; /*Altura da imagem*/
Assim a imagem e o texto ficam alinhados corretamente.
Caso não queira usar uma imagem e sim uma cor de fundo troque
background: url('AQUI O ENDEREÇO DE SUA IMAGEM') no-repeat;
por
background: #000000 repeat;
Sendo que o código hexadecimal #000000 se refere à cor preta. Troque pelo código da cor que desejar.
Aqui tem uma tabela de cores completa.
Se quiser arredonde o fundo de sua data.
Basta acrescentar isso abaixo da linha que define a cor de fundo:
border-radius: 10px;
Quanto maior o número mais arredondado fica.
Abaixo separei algumas imagens do meu arquivo para você usar.
Todas estão em .png transparente.
Para usar salve-as em seu pc, *hospede a que desejar e insira o endereço dela no local indicado no código.
*Como hospedar uma imagem usando o próprio Blogger?
Faça assim:
Crie uma postagem 'falsa', que nunca será publicada, ficando sempre no rascunho.
Insira nela a imagem que deseja hospedar. Depois de concluir o upload da imagem clique sobre ela e com o botão direito do mouse copie o endereço, url ou link da imagem (o nome dependerá de qual navegador esteja usando); este é o endereço web de sua imagem.
Para saber o tamanho exato da imagem abra a pasta onde a salvou, pare o mouse sobre ela e o tamanho aparecerá.
Conheça a web-série Como personalizar o blog
- Como criar um blog: criação da conta Google e criação do blog
- Trocar o plano de fundo do blog e alterar largura e disposição das colunas;
- Centralizar o nome do blog, os títulos dos posts e dos elementos de página (gadgets);
- Alterar cores e fontes dos títulos e do texto (fontes especiais, manuscritas, etc);
- Criar um menu com abas abaixo do cabeçalho e inserir links nele;
- Inserir assinatura personalizada;
- Colocar Voltar ao topo com efeito deslizante;
- Personalizar os comentários do blog (numerar, separar, incluir opção Responder, etc)
- Data dos posts em formato calendário
- Número de comentários dentro de um balão
Deu um trabalhão, mas promessa é dívida.
Compartilha?
Eu fico gradecida rsrsrsrs
Caraca! Adorei muito! Vou colocar no Pinto assim que a Rafa deixar! Obrigada minha meta-blogueira-mestra-preferida!
ResponderExcluir<3
Que fofo!! Deu vontade de ter no meu blog :p
ResponderExcluirBjinhosss
http://laialisafa.blogspot.com/
Olá amiga! Vim fazer-lhe uma visitinha e deixar meu carinho.
ResponderExcluirObrigada por compartilhar seu conhecimento.
Tenha uma boa semana!
Beijokas
Oli
http://oliceia.blogspot.com.br
Maravilha de presente heimmm .
ResponderExcluirBeijos querida .
Aí, como gostaria de ter paciência, sabedoria para tentar fazer estas receitinhas tão bem explicadinhas. O PC não gosta de mim e eu tão pouco dele...vivemos em guerra permanente. Ainda bem que temos vc para nos salvar dessa tarefa para para muitos é simples e para outros é bastante complexa.
ResponderExcluirBjus e parabéns pela paciência e presteza em ensinar tanta gente.
que legal, vou colocar no meu blog!!!
ResponderExcluiradorei!
te segui aqui, viu?!
beijinhos
http://weddinginsummer.blogspot.com/
ola adoro seu blog suas postagem
ResponderExcluirsegue tbm *-* ?
http://meubebepropaganda.blogspot.com.br/
Fiz ontem isso no meu blog! Sintoniaaaaa...
ResponderExcluirMas lembra aí que tem que configurar a data lá no painel tbm, viu? Esqueci de fazer isso ontem e me deu nos nervos, e olhe q já sabia disso. Aff...
Te adoro! Beijo...
Elaine, segui os passos, mas não consegui. No meu blog a linha: , repete 3 vezes, fiz um teste com cada uma das linhas, com a primeira e a ultima a data some, e com a segunda a data fica igual está hoje. Adorei a dica e há muito venho querendo alterar a data, o que será que eu fiz de errado?
ResponderExcluirBjs.
Oi Elaine, excelentes dicas como sempre! A que vc colocou no meu blog gosto muito! Aliás, gosto de td que vc colocou no meu blog, trabalho nota mil! :))
ResponderExcluirAh! E não tenho coragem pra ficar mexendo assim não! rs. Essa parte deixo pra vc!
Tenha um lindo dia! :))
Bjssss
viveraprendendo.com
Oi Elaine!
ResponderExcluirVim te convidar para o sorteio de aniversário do meu blog, o Perfeita Ordem.
O prêmio é um vale presente no valor de R$150,00 da Boutique de Achados.
Passa lá!
Vou adorar te ver na minha festa!
http://www.perfeitaordem.com/2013/04/sorteio-de-vale-presente-no-valor-de.html
Beijo.
OLá Elaine
ResponderExcluirObrigada pelas dicas e presente.
bjs
Paty
Linda eu queria que você fizesse minha assinatura para o meu blog Graças Fernandes e flor.
ResponderExcluirMe Blog é artegracy e email gracasfernandes1@yahoo.com.br.
Fique com Deus
Beijo
Oii Elaine Parabéns seu blog é um sucesso, e sempre me ajuda com as suas dicas, quando to no sufoco no meu blog o Um Pouco de Mim me socorre. Eu criei um Memes e tem um pra vc no meu blog, http://coisasdecheinha.blogspot.com.br/; espero que goste. Bjs
ResponderExcluirOi Elaine!
ResponderExcluirAdoro suas dicas e já usei algumas em meu blog!
Estou tentando colocar essa em prática mas não consigo copiar o codigo... Ele não fica selecionado...
É algum tipo de proteção? Ou meu mouse que esta ruim mesmo? hehehe
Beijokas e Parabens!
Olha meu blog: aestranhaestantedagi.blogspot.com.br
Coloquei aquele Voltar ao Topo! Ficou super fofo! ^_^
Consegui copiar! hehehe faltava clicar nos botões do ladinho! hehehe
ResponderExcluirMas não encontrei os codigos Dada..... e Skin....
Não deu certo.... =(
Vou tentar algum outro! \o/
Beijokas!
eu não conseguir, eu procurei esse trecho:
ResponderExcluirmais não tem, mim ajude por favor, meu blog: http://mocidade-k.blogspot.com.br/
Nossa já tentei muitas vezes trocar a data pelo formato calendário,fiz do jeito que você ensino mas,na hora que vou visualizar a data desaparece do blog,não estou intendendo o porque,me ajude por favor.
ResponderExcluirAguardo resposta.
Comigo simplesmente não acontece nada, não encontrei a caixinha para expandir widgets
ExcluirNão deu! Tentei de todas as formas possíveis, mas nada de funcionar. Até apareceu a imagem, mas a data não. Que pena pra mim, todas as dicas desse site deram certo, só essa que não. Os códigos estão certos mesmos? Alguém conseguiu fazê-lo? Obrigado!
ResponderExcluirCaraca! sou sua fã! vou fazer depois conto o que deu!!!!
ResponderExcluirhttp://escrev-arte.blogspot.com.br
Nao consegiu fazer!
ResponderExcluirQue pena achei super legal!
http://carolsucupira.blogspot.com.br/
Olá Elaine, não sei o que acontece mas não consegui, fiz exatamente como você explicou. A figura aparece só que a data não aparece, o coloquei o formato da data como você explicou.
ResponderExcluirPoxa vida não consegui...
ResponderExcluirTentei tanto!! :(
Mais valeu mesmo assim
Beijos
http://meigamakeup.blogspot.com.br/
aaain, eu coloco lá na barrinha pra procurar tal coisas, nunca acha :( magoada viu
ResponderExcluirEmily, você teclou Enter para localizar?
ExcluirTodo template tem esse código...
gostei mais não consegui colocar
ResponderExcluirhttp://cosmeticosbons.blogspot.com.br/
Oooi , só hoje já usei três tutos seus para personalizar meu blog ! Obrigado !
ResponderExcluirhttp://princesadosalvador100.blogspot.com.br/
Elaine, fiz no meu e deu certo! Mas eu gostaria que aparecesse a data em todas as postagens, como podemos repetir? Obrigada!
ResponderExcluirAmiga não consigo achar o (EXPANDIR MODELO DE WIDGETS) Poderia me ajudar? grata!
ResponderExcluirFicou tido muito bom, o prolema é que não quer aparecer a data, o que eu faço??
ResponderExcluirEu amei e conseguir colocar mas eu não conseguir alinha a data, eu tentei varias vezes mas tá difícil alguém pode me ajudar? Elaine sempre to aqui no seu blog e adoro todas suas postagem sempre bom aprender mais um pouco com você.
ResponderExcluirOlá Elaine.
ResponderExcluirEstou tentando instalar no meu blog mais só da erro.
Já tentei de varias formas e não dá certo.. :(
Pode me ajudar por favor!
Fico agradecida
Lilyan, releia o tutorial, veja se não pulou nada, se encontrou os códigos certos, etc...
Excluironde tem isto: line-height:18px; /*Altura da Linha*/
ResponderExcluireu faço o que? apago o /*Altura da Linha*/ e deixo só line-height:18px é?
Parabéns pelo Blog. Gostei muito do Tutorial, só que quando eu altero, o Título da Postagem não fica ao lado da imagem, fica embaixo, como faço para alterar? Para ficar ao lado da data.
ResponderExcluirmeu título da postagem ficou embaixo da data, como faço para ficar ao lado?
ResponderExcluirElaine, segui os passos do tutorial e não consegui deixar como queria, a data não aparecia apenas o formato. Fiz uma busca pela internet e encontrei outro bem similar, decidi então misturar os códigos e por fim deu tudo certo!
ResponderExcluirOlá Eliane, fiz tudo certinho. Unico problema que não consegui encontrar essa caixinha que vc pede pra marcar: expadir widgets. Pode me ajudar?
ResponderExcluirElaine, não dá para copiar os códigos nem as imagens! O teu site tá bloqueado para copiar, logo não dá para fazer o que ensinas aqui no teu site!
ResponderExcluirOiii Elaine parabens... suas dicas sao dez... mas eu nao estou conseguindo colocar no blog pq os codigos estao passando das laterais e ai nao da pra ver o codigo todo... e nao tem como copiar para colocar no blog..
ResponderExcluirvc poderia me dizer como faço pra ver o codigo inteiro.. para eu poder colocar no meu blog...
obrigada desde de ja
e mais uma vez parabens....
Olá eu não consigo copiar os códigos !
ResponderExcluiro que eu faço?