Hoje vou mostrar a outra maneira que conheço para fazer isso, descoberta graças ao Cor Seletiva, em que a data aparece em cada postagem, independente de ter sido feita no mesmo dia ou não, e será mostrado dia e mês, igual a forma como uso aqui no blog atualmente.
Antes de tudo...
- Faça um backup do seu template.
- Vá em Configurações - Idioma e Formatação - Formato da Data e deixe assim:
- Em seu Modelo - Editar HTML - marque "Expandir Modelos de Widgets".
Vamos começar, lembrando que uso o tutorial no Modelo Travel editado pelo Designer do Blogger...
1. No seu template, adicione isso acima de ]]></b:skin>:
#fecha {
background: #fee;
box-shadow: 2px 3px 5px #fcc;
border-radius: 50px;
border: 3px solid #fcc;
width:50px;
height:60px;
float:left;
text-align: center;
list-style:none;
display: block;
font-family: 'Kavoon';
font-weight: bold;
color:#FF9FA5;
margin: 5px 2px 0 -70px; /* Altere -70px por 0px se quiser que a data apareça dentro da postagem ou para posicionar */
padding: 0 0 8px 0px;
}
.fecha_dia {
display:block;
font-size:20px;
line-height:30px;
padding:12px 0 0 0;
}
.fecha_mes {
text-transform: uppercase;
font-size:18px;
color: #f0b6d6;
line-height:8px;
display:block;
}
2. Abaixo de </head> cole isso:
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
document.write(dia+mes);
}
</script>
3. Encontre...
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Nessa parte tem que tomar cuidado. Pode ser que apareça mais de 1 vez; nas 2 primeiras vezes troque por:<div id='fecha'> <script>var ultimaFecha = '<data:post.dateHeader/>';</script> <script>remplaza_fecha('<data:post.dateHeader/>');</script> </div> <b:else/> <div id='fecha'> <script>remplaza_fecha('<data:post.dateHeader/>');</script> <script>remplaza_fecha(ultimaFecha);</script> </div>
Como vocês viram, tem uma fonte chamada Kavoon para deixar o texto personalizado. Adicione-a em seu HTML, abaixo de <head>:
<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'/>
E por fim você irá obter um resultado mais ou menos assim:
Áreas personalizáveis:
- background: #fee; = cor de fundo da data; para adicionar uma imagem troque por: background: url(URL DA IMAGEM) no-repeat;
- box-shadow: 2px 3px 5px #fcc; = sombreamento.
- border-radius: 50px; = arredondar.
- border: 3px solid #fcc; = cor e estilo da borda.
- width:50px; e height:60px; = largura e altura.
- float:left; = aparecer a esquerda do post; se quiser a direita troque por float:right;
- text-align: center; = alinhamento do texto no centro.
- font-family: 'Kavoon'; = tipo da fonte.
- font-weight: bold; = fonte em negrito.
- color:#FF9FA5; = cor do número do dia.
- padding: 0 0 8px 0px; = posicionamento.
- font-size:20px; = tamanho do texto do dia.
- padding:12px 0 0 0; = posicionamento do dia.
- text-transform: uppercase; = deixa tudo maiúsculo no texto do mês.
- font-size:18px; = tamanho do texto do mês.
- color: #f0b6d6; = cor do texto do mês.
Essa foi a forma que fiz. Visualize e se não tiver dado certo dessa maneira, pode tentar dessa aqui do Mundo Blogger:
Beijus...
o blog está fofo, parabéns!
ResponderExcluirhttp://crazyferraz.blogspot.com.br/
Muito obrigada <3
ExcluirBeijus ;3
Uau! que lindo o estilo de data, amei o tutorial ^_^ sempre arrasando!
ResponderExcluirAh, mudei de layout, queria que você desse uma olhada nos 'blogs que amo' hihihi
Mudamos de layout // Adolescente Nerd
Obrigada e com certeza passo lá no blog que adoro!!!
ExcluirBjus …
Olá!
ResponderExcluirJá apliquei o código no meu blog mas, estou com dificuldade de alinhar a data de calendário com o titulo da postagem.
Ficou um espaço enorme entre a data e o titulo da postagem.
Tô penando aqui pra alinhar. Já tirei um pouco de padding, já aumentei e nada de alinhar como sua data e o titulos das postagens de seu blog.
Pode tirar-me essa duvida? Em que padding devo mexer pra alinha como esta no seu blog?
Obrigada desde já pela atenção
P.S. se eu continuar com esse código postarei os creditos na minha página, ok? Abraços
Tente alterar os valores em margin, principalmente o -70px.
ResponderExcluirOk e beijuus ;3
Oi, eu usei o código no meu blog, mas eu não estou conseguindo colocar a data dentro do bloco do post, quando eu edito o -70px, o calendário some, provavelmente ele fica por trás do bloco do post.
ResponderExcluirEu uso outro código, mas separar as postagens no modelo viagem, tem como resolver meu problema?
pixelsflamejantes.blogspot.com
Aqui continuou dando certo; testei novamente no modelo Viagem personalizado pelo Designer do Blogger com um código de separação de postagens e a data ficou bem próxima do título.
ExcluirTente ir testando valores no local do -70px, valores negativos e positivos, e também adicione/remova valores em margin e padding.
Eu queria saber, como você fez para mostrar as postagens em caixinhas tão organizadas. Eu amei!
ResponderExcluirhttp://mundootomee.blogspot.com.br/
Nesse layout já veio tudo pronto :3
ExcluirMas conheço uma forma de se fazer isso e posteriormente posso postar para vcs ^^
Beijinhus <3
Oieeee!!! Axei super bem explicadinho como alterar a html!!!
ResponderExcluirPorém estou com um problema e talvez vc possa me ajudar!!
Eu tirei os códigos que deixam a data dos post visiveis... para fazer algumas alterações que eu acabei nem fazendo...
Esqueci...rsrs... e p/ complicar eu SALVEI... ou seja não consigo localizar as linhas que precisam ser mudadas .. não encontro nenuhma parte... =/
E agora?? Estou sem data! Como eu faço p colocar uma data na minha postagem?!?!
Você não salvou um backup? Aí era só usar seu modelo de backup e refazer as alterações que fez neste atual sem alterar a data.
ExcluirNo post Exibir data em todas as postagens no Designer de Modelo do Mundo Blogger a autora mostra alguns trechos de códigos referentes a data; talvez te auxilie a localizar algo referente.
Lá no layout também, em Postagens no blog, veja se a caixinha de data em Opções da página de postagem está marcada para ficar visível.
Se não resolver e vc não quiser alterar o html, acho que seria legal usar um widget em forma de calendário dos arquivos do Mundo Blogger que mostra um calendário de postagens por data, mês, tudo organizadinho...
Espero ter ajudado ^^
Beijus...