Calendário Personalizado No Blogger
Nesta postagem compartilho com vocês um dica bem interessante para quem deseja melhorar o Design do blogger deixando o ainda melhor.
Para colocar no blog...
Para coloca-la no blogger... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag
]]></b:skin>
Tendo encontrado a tag, cole ACIMA dela o seguinte código
/* CALENDÁRIO PERSONALIZADO BY DICASHOT */
#fecha {
color: #464646;
padding: 8px;
margin-right:10px;
background: #eee;
border: 4px solid #ccc;
float:left;
text-align:center;
list-style:none;
display: block;
-moz-border-radius:80px;
-webkit-border-radius:80px;
border-radius: 80px;
width: 30px ;
height: 30px;
}
.fecha_dia {
display:block;
font-size:20px;
line-height:16px;
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px;
line-height:9px;
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px;
line-height:8px;
display:block;
}
Agora, procure pela tag
</head>
Tendo encontrado a tag, cole ACIMA dela o seguinte código
<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, procure pela parte
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
Observação: Procure só pela primeira linha (fica mais fácil de encontrar o trecho).
Tendo encontrado o trecho, substitua a segunda linha (a que esta destacada de azul) por este código
<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>
