• Acessórios

  • Layouts para blog

  • kits de imagens

  • Goodies

  • Layouts free

  • NOME DA FOTO OU TEXTO

6 de janeiro de 2012

Data personalizada no blogger




é fácil mas precisa de muita atenção pois é comprido de mais!



O primeiro passo é alterar o formato da data, no modo "configuração" no layout do seu template, e para isso você deve Clicar em "Configurações » Formatação » Formato da data no índice do arquivo", e escolha o formato: 24 Julho 2009.
Salve as configurações.

Feito isso, você deve modificar o HTML do seu template e para isso, vá em "design » Editar HTML"
Localize a linha:
</head>

Cole ABAIXO dela 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>

Salve as modificações.

Agora você deve colocar a data ao lado do título do post, e para isso clique "Expandir modelos de widgets" e Localize as seguintes linhas:


Você poderá encontrá-lo 2 vezes. Na segunda vez é o que importa (aperte as teclas CTRL+F para procurar o código acima, depois clique em próxima).

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

E cole logo abaixo dela:

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


Agora você deve configurar a data para o formato vertical. Veja como:
Substitua a linha:

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

Pelo código abaixo:

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


Para configurar a imagem ou bloco da data você deve copiar este código abaixo e colar acima da tag: ]]></b:skin>

#fecha {
color: #464646; /*Edite a cor da data*/
padding: 0px 0px 0px 0px; /*Altere as margens internas da data*/
margin-right:5px; /*Altere a Margem externa direita*/
float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
}
.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;
}


Caso você queira incluir uma imagem/icone na data, acrescente estas linhas a seguir dentro do bloco de código em: #fecha 

background: url(URL DE SUA IMAGEM) no-repeat;
width:XXpx; /*Largura da imagem*/
height:XXpx; /*Altura da imagem*/

Em "width e height" coloque o tamanho da largura e da altura da sua imagem.
Por exemplo: se a sua imagem tem um tamanho de 50x50, inclua:
widht:50px;
height:50px;


Caso o título do seu post fique acima da data, você deve configurar os comandosmargin e padding para que tudo fique alinhado.


Conforme vai alterando,vá visualizando os resultados.
Uma dica: Experimente inserir a linha: margin-left:35px; no titulo do post no comando .post h3{ 
 
 



5 comentários:

  1. Amei o blog, ótima as dicas, tipo que já vi que vou voltar aqui várias vezes. rsrs

    Seguindo o blog, dá uma passadinha lá no meu e se gostar segue tbm ;)

    http://senhoritamarmelada.blogspot.com

    Bjos

    ResponderExcluir
  2. Gostei do seu blog e já estou seguindo (;
    voltarei aqui mais vezes para ver as novidades :D

    Beijo flor :*

    umcharminhoamais.blogspot.com

    ResponderExcluir
  3. no meu não pegou :(
    testei em dois blogs meu, e não foi :(
    gostei tanto desse tuto
    http://yasmimsantiagoo.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Linda acho pq tem dois Código igual a esse quando vc pesquisa, tenta colocar na segundo opção q aparece, naquela caixinha aonde digita o nome tem umas setas p cima e uma p baixo, clica na para baixo q vai aparecer o segundo Código selecionado coloca nele... bjaooo

      Excluir

Deixe seu link nos comentários que irei retribui a visitinha ^^

Related Posts Plugin for WordPress, Blogger...