Visitem amores ?Ola aqui
vamos falar
de HTML,
Utilitarios e Varias coisas legais,tb sobre coisas Kawaiis epero que
vocês Gostem :)

Personalize a data do seu blog

Tumblr_lx8n3ovm8c1qil5qho1_500_large
oi,tudo bem?hoje trouxe um tutu bem legal mais tem muito
códigos então faça com calma

você pode deixar a sua data do seu blog assim
 


 quer aprender?então clica em leia mais



Abra o painel do blogger, clique no nome do seu blog, depois, clique em "Configurações" > "Idioma e formatação":
 Mude o formato da data para a penúltima opção:

Salve as alterações. Clique agora em "Modelo" no menu lateral. É recomendável que você baixe uma cópia do seu modelo antes de prosseguir. Para fazer isso, clique no botão "Fazer backup/Restaurar" e depois em "Fazer download do modelo completo".
Depois de fazer download do seu modelo, clique no botão "Editar HTML" que fica abaixo da miniatura do seu blog. Clique em prosseguir no aviso que aparecer.

Marque a opção "Expandir modelos de widget":








Aperte Ctrl+F e procure por </head>

logo abaixo disso, cole esse 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>

Aperte Ctrl+F novamente e procure pela primeira linha deste código:

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

Logo abaixo do trecho que você procurou, cole isso:

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




Agora substitua essa linha:
<h2 class='date-header'><data:post.dateHeader/></h2>

Por esse código:

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

Agora para finalizar, procure por  ]]></b:skin>
E acima disso, cole o código a seguir:

#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;
}

É nesse último código que você vai editar o estilo da data, colocar imagem de fundo e alterar a fonte.
Se você quiser que a data fique para fora da área de postagens, você deve aumentar os valores de "margin", que estão destacados em rosa. Se sua sidebar ficar no lado direito, aumente o valor de margin-left, sem apagar o tracinho (-) até que fique onde você quer. Agora se sua sidebar fica á esquerda, aumente o valor de margin-right.

Visualize se está tudo certo e salve. Se não funcionar, limpe as alterações e tente de novo com mais atenção. Abaixo tem algumas imagens para você usar como plano de fundo da data:

     


            créditos:www

Um comentário:

  1. Ameii o tutorial, eii vc pode me colocar como afiliada se vc não tem elite de afiliados?
    http://cliquesnocapricho.blogspot.com.br/

    ResponderExcluir