quinta-feira, 23 de janeiro de 2014

Como personalizar a data do blog



Marque a penúltima opção:


Agora você tem que editar o HTML do seu blog, vá em Editar HTML>Proseguir, depois marque a caixinha "Expandir modelos de widget".





Aperte CTRL+F no seu teclado e procure por </head>
Abaixo de </head> cole 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>


Depois procure pela primeira linho do seguinte código:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>


Logo abaixo desse código cole o seguinte:

<a expr:name='data:post.id'/>

Vai ficar assim:

Logo depois procure pelo seguinte código:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Talvez você encontre mais de um, então substitua todos que encontrar por esse:


<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div> 


Pra terminar você procura por ]]></b:skin> e logo acima dele você cola o seguinte código:


#fecha {
color: #464646; /*Edite a cor da data*/
padding-top: 5px; /*Margem interna superior da data*/
padding-right: 5px; /*Margem interna direira da data*/
padding-left: 5px; /*Margem interna esquerda da data*/
padding-bottom: 5px; /*Margem interna inferior da data*/
margin-right: -0px; /*Margem externa direita */
margin-left: -0px; /*Margem externa esquerda*/

float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('URL AQUI') no-repeat; /*Imagem de fundo*/
height: 30px; /*Altura da imagem*/
width: 30px; /*Largura da imagem*/
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:9px; /*Altura da Linha*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:8px; /*Altura da Linha*/
display:block;
}


Agora você pode alterar o que quiser. Aumente os valores de margin destacados no início do código para alinhar a data onde você quiser. Onde tem URL AQUI, você coloca o URL da imagem (não diga?!) .

Aqui tem umas imagens, más você pode usar a sua própria.

     

                    créditos-clica aqui

Nenhum comentário:

Postar um comentário