No post anterior escrevi que fiquei encantada com o video do leão Christian, mas não sei se vocês sabem que existe o livro o qual deixo a sinopse ai abaixo, o qual estou lendo e estou amando.
Autor: Anthony Bourke & John Rendall
Título Original: A Lion Called Christian (2009, edição revista e actualizada da edição original de 1971)
Editor: Editorial Presença
Páginas: 164
ISBN: 9789722342339
Tradutor: Manuela Madureira
Sinopse
Quando em 1969 Anthony Bourke e John Rendall decidiram comprar uma cria de leão nos armazéns Harrods, em Londres, não imaginaram que, décadas depois, a sua extraordinária história continuasse a comover gerações de leitores e espectadores. Publicado pela primeira vez em 1971, Um Leão Chamado Christian retrata o percurso desta amizade invulgar, desde os primeiros meses de vida em Londres, até ao reencontro inesquecível no Quénia. Esta nova edição, completamente revista e actualizada e contendo ainda diversas fotografias enternecedoras, tornou-se um bestseller do New York Times.
Vamos agora ao tutorial:
Personalizando a data dos posts do seu blog:
Resolvi fazer este tutorial porque gosto de estar colocando coisinhas diferente no meu blog quando edito uma nova versão:
Separei então dois exemplos de data que gosto:
Vamos lá ao 1º exemplo:
Coloque no seu css estes códigos abaixo:
/*----------data dos posts-------------*/
.calendar {
float: left;
width:100px;
}
.calendar h4{
padding: 3px 0;
margin-bottom: 8px;
}
/*----------Dia do Mês-------------*/
.calendar h4 span.day {
display: block;
float: right;
line-height: 24px;
font-size: 18px;
border-right: #808080 1px solid; /*DIVISAO DA DATA*/
padding-right: 5px;
color:#FF0000;
}
/*----------Mês e ano-------------*/
.calendar h4 span.month, .calendar h4 span.year {
color:#000;
width: 50px;/*espaço do mes e ano*/
}
/*----------fonte do Mes-------------*/
.calendar h4 span.month {
display: block;
float: right;
font-size: 12px;
line-height: 14px;
padding-left: 4px;
text-align: center;
text-transform: uppercase;
}
/*----------fonte do ano-------------*/
.calendar h4 span.year {
font-size: 12px;
display: block;
}
Coloque acima do ]]></b:skin> este script abaixo:
<div class='edit'>
<script type='text/javascript'>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<span class='day'>"+da[0]+"</span>";
mes = "<span class='month'>"+da[1].slice(0,3)+"<span class='year'>"+da[2]+"</span>"+"</span>";
document.write(mes+dia);
}
</script>
Procure por este código em seu template e substitua por estes:
<data:post.dateHeader/>
Coloque estes agora no lugar:
<div class='calendar'>
<h4 class='calendar '>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</h4>
</div>
Vamos ao 2º exemplo:
Coloque em seu style css este códigos:
#fecha {
height: 46px;
width: 46px;
background: url(http://templatesbylecca.googlepages.com/data-doll-xml.gif) no-repeat;
font: normal 22px Arial, Helvetica, sans-serif;
color: #FFC4E1;
text-align: center;
padding: 0px 2px 0 0;
line-height: 100%;
float: left;
}
.fecha_mes {
height: 16px;
display: block;
font: normal 11px Arial, Helvetica, sans-serif;
color: #A3CA1C;
text-align: center;
padding-top: 3px;
}
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(mes+dia);
}
</script>
Procure por este código em seu template e substitua por estes os mesmo lá de cima:
<data:post.dateHeader/>
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
Imagens para colocar em sua data personalizada, clique para fazer download:
