19 de dez de 2007

Data no blog costumizada

Vou ensinar como se modificar o layot da data que temos no Blogger, para ficar assim como a que tenho aqui, mas é claro, no seu blog, ficará com o fundo que você escolher.

O primeiro passo é clicar em "Configurações"







Agora clique em "Formatação e depois clique na seta ao lado do "Formato da data", para abrir a tabela, conforme mostra a imagem abaixo. Clique na opção mostrada na imagem abaixo e depois salve.




Clique em "Modelo" e depois em "Editar HTML", procure pelo código:
]]></b:skin
e ABAIXO dele, cole o código:


<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>




Clique em Salvar.

Agora clique em "Expandir Modelos de Windgets", procure pelo código:

<data:post.dateHeader/>

e substitua pelo código abaixo:



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

Se você quer que a data apareça em todos os posts, coloque o código abaixo:


<b:if cond='data:post.dateHeader'> <h2 class='date-header'><div id='fecha'><script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div></h2>
<b:else/>
<h2 class='date-header'><div id='fecha'>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script><script>remplaza_fecha(ultimaFecha);</script></div></h2>
</b:if>



Procure por:

]]></b:skin>




E cole acima todo o código abaixo, fazendo suas substituições. (Em verde cor da letra, em vermelho endereço de sua imagem, em azul, cor da borda)




#fecha {
height: 60px;
width: 60px;
background: #fff;
border: 2px solid #000;
color: #808080;
text-align: center;
padding: 0 2px 0 0;
line-height: 100%;
float: left;
}
.fecha_dia {
display: block;
font-size: 18px;
font-weight:bold;
}
.fecha_mes {
height: 16px;
display: block;
font: normal 11px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
padding-top: 3px;
}
.fecha_anio {
display: block;
font-size: 10px;
}


Créditos: Blog and Web

4 comentários:

  1. oi

    buuuaaaaaaaaaaaa!

    coloquei esse codigo no meu blog e todas as datas sumiram ;'(

    me ajuda?

    ResponderExcluir
  2. ÊÊÊÊ

    TA FICANDO MASSA!!!!!!!!!!!!!!!

    ResponderExcluir
  3. PARABÉNS PELO SEU ÓTIMO TRABALHO, DEU CERTO NO MEU BLOG

    ACESSE:WWW.WESLEIARANTES.BLOGSPOT.COM

    ResponderExcluir
  4. Oi, no meu deu um problema

    aparece duas vezes a data, olha só:
    http://naavemae.blogspot.com

    como que eu faço pra aparecer só uma??

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube