Personalizar os minimos detalhes do seu blog sempre dará a ele uma aparência mais profissional. A data está presente em todas as postagens, indica a quanto tempo a publicação foi postada e ajuda seus leitores a sabarem a quanto tempo o blog foi atualizado pela última vez. A data do post em estilo calendário deixa ela mais fácil e objetiva de se ver e entender, como no exemplo abaixo:
Aprenda a como aplicá-la ao seu blog neste tutorial.
1 Vá em Configurações > Formatação > Mude o Formato da data para Dia Mês Ano (como na imagem):
2 Salve.
3 Vá em Tema > Editar HTML > Procure por <h2 class='date-header'> > Você deve achar um trecho de código semelhante ao abaixo:
4 No trecho de código acima, substitua o trecho <h2 class='date-header'><span><data:post.dateHeader/></span></h2> pelo trecho abaixo:
5 Agora, procure por </head> e cole o seguinte código acima:
6 Agora, procure por ]]></b:skin> e cole o seguinte código acima:
7 Faça as alterações necessárias.
8 Salve.
Aprenda a como aplicá-la ao seu blog neste tutorial.
Perceba que estamos procurando pelodate-headerque não é o mobile (linha onde tem o<b:if cond='!data:mobile'>). Ou seja, alteraremos apenas a data que aparece quando o blog é acessado por um computador.
<script>
//<![CDATA[
function setCalendarDate(date) {
function createCalendarDateSpan(className, value) {
return '<span class="' + className + '">' + value + '</span>';
}
var [dayValue, monthValue, yearValue] = date.split(' ');
var day = createCalendarDateSpan('day', dayValue);
var month = createCalendarDateSpan('month', monthValue.slice(0,3));
var year = createCalendarDateSpan('year', yearValue);
document.write(day + month + year); // Altere a ordem aqui, se quiser
}
//]]>
</script>
span.calendar {
color: rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0.1);
display: flex;
position: absolute;
width: 50px;
height: 50px;
padding: 5px;
margin-left: -70px;
text-align: center;
flex-direction: column;
}
span.calendar span.day {
font-size: 1rem;
}
span.calendar span.month {
color: rgba(0, 0, 0, 0.5);
text-transform: uppercase;
font-size: 0.8rem;
}
span.calendar span.year {
font-size: 0.7rem;
}
Eu já ia perguntar como se fazia este ... mas nem precisei ! Achei bem legal e diferente !
ResponderExcluirVou tentar colocar no meu blog.Valeu a dica!!!
ResponderExcluirFica muito legal, eu talvez coloque no meu blog. Ah, e parabéns pelos 1000 seguidores.
ResponderExcluiretcforme.blogspot.com
Que legal :))
ResponderExcluirhttp://mygoodies1.blogspot.com/
que tuto bacana , não conhecia mas gostei :D
ResponderExcluirs-noowing.blogspot.com.br
Cara, muito obrigado!! finalmente consegui mudar isso no meu blog!! Vc é 1000000
ResponderExcluirnÃO SABE O QUANTO EU QUERIA O TUTORIAL, MDS. Valeu mesmo por postar, o blog é cada vez mais útil e perfeito, scr. *o* Favoritei! (msm http://prntscr.com/2fpq0t) <33333
ResponderExcluirNão consegui :'(
ResponderExcluirQual foi o tipo de erro que você apresentou?
ExcluirOlá, boa noite! Comecei outro template do zero, dessa vez, tentando fazer algo novo e inovador. Haha. Cara, é difícil... Mas, vou conseguir. Obrigado pelo tutorial, deu tudo certo!
ResponderExcluirQue bom que deu certo!
ExcluirSei como é difícil começar outro layout... Às vezes são muitas ideias e juntá-las é complicado, outras vezes a gente não tem ideia alguma do que quer fazer kkkkk Eu costumo entrar em sites com modelos de template, sites profissionais, ou procurar fotos/imagens pra ter alguma inspiração, pegar elementos que podem me ajudar.
Volte sempre ~