23/07/2015

Data personalizada no Blogger!



Fiquei um tempinho afastado da web, mas para não deixar o design mania desatualizado hoje vou postar um tutorial bem simples, trata-se de como personalizar a data das postagens. Então vamos lá, let's go!

➲ Antes de fazer qualquer alteração em seu template não se esqueça de fazer um backup, pois se der algo errado, poderá ser recuperado com facilidade. Modelo » Fazer backup/Restaurar » Fazer download do modelo completo

➲ Para copiar os códigos, selecione e solte em seu HTML.

1. Abra o painel administrativo do blogger ▸ aba Configurações ▸ Idioma e formatação ▸ Em FORMATO DA DATA altere para o seguinte modelo 23 de Julho de 2015. Salve as Configurações



2. Vá agora na aba Modelo ▸ EDITAR HTML

3. Com o código da fonte aberto, procure pelo seguinte código [Procure pela primeira linha, Ctrl+F pode ajudar].

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/></h2>
</b:if>

Você encontrará três, mas deverá optar pela primeira aparição do código. Quando encontrar logo abaixo dele cole este código seguinte seguinte:

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

Deverá ficar desta maneira:

4. Neste mesmo código que encontramos acima, vamos substituir o seguinte trecho:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Por esse: 

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

Deverá ficar desta maneira:


5. Agora procure por (Ctrl+F) ]]></b:skin>. Quando encontrar logo acima dele coloque o seguinte código:

/* DATA PERSONALIZADA
----------------------------------------------- */
#fecha {
color: #fff; /*Edite a cor da data*/
padding: 15px 0px 0px 8px; /*Altere as margens internas da data*/
margin-right:5px; /*Margem externa direita*/
float:left;
text-align:center;
border: 1px none #000; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('URL-DA-IMAGEM-COLOQUE-AQUI') no-repeat;
height: 60px; /*Altura da imagem*/
width: 60px; /*Largura da imagem*/
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
margin: 0 5px 0 0px; /*margin caso não esteh=ja centralizado*/
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:9px; /*Altura da Linha*/
margin: 0 5px 0 0px; /*margin caso não esteh=ja centralizado*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:8px; /*Altura da Linha*/
margin: 0 5px 0 0px; /*margin caso não esteh=ja centralizado*/
display:block;
}

Na parte grifada você deverá colocar uma imagem, confira algumas abaixo [click para copiar a URL]:

  
 
 

Os créditos deste tutorial vão para o site Quero Dicas, caso tenha dúvidas pergunte nos comentários ou peça a instalação [Com Taxa].

4 comentários:

  1. Olá, eu amo este blog. Mas preciso urgentemente de ajuda. Quando eu aplico um template no meu blog aparace: erro. O template não pode ser alterado por que todos os html não estão fechados (alguma coisa assim). Eu já pesquisei várias vezes e não achei nada! Espero sua ajuda .

    ResponderExcluir
    Respostas
    1. Manda um print (foto da tela) do erro, para ver se sei responder! :)

      Excluir
  2. Como consigo pegar o url das imagens?

    justnalandisses.blogspot.com.br

    ResponderExcluir

LEIA ANTES DE COMENTAR

• Você pode comentar usando apenas seu Nome e Url. Não aceitamos anônimos, selecione a opção no menu suspenso "comentar como".

• Alguns comentários podem não ser aceitos, dependendo do cunho da mensagem. Seja gentil na blogosfera.

Obrigado por comentar. Sua visita e opinião são importantes. Volte sempre!

DESIGN E PROGRAMAÇÃO POR JOÃO VITOR M.A. • ALL RIGHTS RESERVED TO DESIGN MANIA • TECNOLOGIA BLOGGER