12 novembro 2013

Como personalizar a data do blog



Oi gente, hoje eu vou postar um tutorial de como personalizar a data do seu blog.
É bem simples, no seu blog você vai em Configurações> Idioma e Formatação> e marca a penúltima opção.

Pra quem não entendeu tenho essas imagens do Cherry Bomb:


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: THE PARADISE

18 comentários:

  1. Respostas
    1. Dá certo sim.. aliás esse foi o único que funcionou quando eu fiz a pesquisa

      Excluir
  2. cara, soh pra vc ficar sabendo: a opcao de "expandir modelos de widgets" nao existe mais. Este tutorial do Cherry bomb ta desatualizado. Tutoriais que pedem pra marcar a caixinha "expandir modelos de widgets" nao funcionam, pelo menos no html do meu blog.

    ResponderExcluir
    Respostas
    1. Sabe Aquelas Flechinhas Do Lado dos Números? É Só Clicar Em Todas Para Expandir

      http://criatividadesnamoda.blogspot.com.br/

      Excluir
    2. No meu modelo travel funcionou perfeitamente, é só seguir passo a passo cuidadosamente. E não tem nada a ver isso de que tutorias que pedem para expandir modelos de widgets não funcionarem, muitos funcionam sim, flor! <3

      A propósito amei o tutorial, tava cansa já de tanto procurar. Obrigada! <3

      Excluir
  3. Valeu!!
    Fiz do jeitinho que você falou e ficou DEZ!
    Obrigada!!!

    ResponderExcluir
  4. Deu certinho, obrigada!
    Amei seu blog, estou seguindo *-*

    ResponderExcluir
  5. AMei o tuto. Pra mim deu super certo Obg.
    mythings2.blogspot.com

    ResponderExcluir
  6. Este comentário foi removido pelo autor.

    ResponderExcluir
  7. Deu certo , vi tantos esse foi o único que deu certo.
    O meu aparece isso no blog:a expr:name='data:post.id'/> ,do lado da data queria tirar ,como faço?
    vê : http://marianasnuvenss.blogspot.com.br/

    ResponderExcluir
  8. aqui so aparece na postagem mais recente ou quando clica para ver só a noticia

    http://camisa20rn.blogspot.com.br/

    ResponderExcluir
  9. Funcionou, mas eu usei cor no lugar de imagem! Muito OBG!!! :D

    Beijão BLOG TANAMODA / MEU ESPAÇO NATURA

    ResponderExcluir

Procure aqui

No Facebook

Encomendas

No Instagram

Seguidores

Na Ask.fm