Este é um "efeito" que eu já queria ter aprendido há bastante tempo, mas só consegui encontrar um tutorial que funcionasse comigo recentemente, e portanto decidi trazê-lo. O tutorial é do Mundo Blogger, neste post vou dizer basicamente as mesmas etapas, mas irei apresentar-vos o meu modelo. Claro, podem alterar tudo o que vos apetecer. Apesar de isto se chamar "formato calendário", só se parece com um calendário porque o dia, mês e ano aparecem em linhas diferentes e só estão escritas as 3 letras iniciais do mês - o fundo só é um calendário se quisermos. De qualquer forma, eu acho bonitinho. Prévia: www
Parte que não afeta o código:
É importante que façam isto antes do resto. Só têm de ir às configurações do blog e escolher o formato de data apresentado na imagem. Pelo sim pelo não, eu verificaria se na postagem, em "Esquema", ficou igual, pois é suposto que fique.
Parte do código:
Primeiro, procurem por <head> e adicionem este código em BAIXO caso queiram a fonte Patrick Hand:
<link href="//fonts.googleapis.com/css?family='Patrick+Hand+SC' rel="stylesheet" type="text/css">
Localizem a linha </head> ou </head ... e colem ABAIXO:
<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>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
</script>
Agora, localize este trecho procurando pela primeira linha:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
Cole ABAIXO da terceira:
<a expr:name='data:post.id'/>
A seguir, procure pela expressão:
<h2 class='date-header'><data:post.dateHeader/></h2> OU <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Substitua-a por isto:
<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>
Por fim, procurem por /b:skin e ACIMA adicionem isto, que corresponde à personalização do modelo:
#fecha { /*data do post no modelo atual*/
color: #88a0e3;
padding: 5px;
margin: 0px 0px 0px -50px;
float:left;
text-align:center;
border: 3px solid #88a0e3;
border-radius: 100px;
list-style:none;
display: block;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
#fecha:hover { /*data do post no modelo atual*/
color: #f2de7c;
border: 3px solid #fff3ad;
background: #fff;
-webkit-transform: rotateY(-360deg);
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.fecha_dia {
display:block;
font-size:18px;
line-height:16px;
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:14px;
line-height:12px;
font-family: Patrick Hand SC;
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px;
line-height:8px;
display:block;
}
Prontinho ^^ Não tem problema se já tinham personalizado a data antes sem ser neste formato, pois a forma antiga será substituída e as linhas correspondentes a essa parte da edição ignoradas. Não alterem nada a não ser o último bloco de código, em que podem personalizar ao vosso gosto.
Oi Ani-chan! Tudo bem?
ResponderEliminarGostei muito do modelo, podias também ensinar como fazes esses modelos de data bonitos com imagem *como por exemplo o modelo deste blog*, porque eu tento procurar tutoriais e nunca encontro *chorando rsrsrs*.
Tu nem sabes o quanto é que custa-me para eu encontrar um modelo de data em condições, eu quase não conheço tutoriais para a data de post.
Bjs! Visite: https://y-ukinoyume.blogspot.pt/
Amanhã vou disponibilizar vários modelos que já fiz, mas já adiantando, fazer com imagem é igual a fazer com fundo sólido - tanto neste modelo calendário como no normal, temos apenas de criar uma imagem que queremos para o fundo, inseri-la no background, definir altura e largura da imagem como altura e largura da data, e depois ajustar o texto com margem e padding.
Eliminar