Como criar ou personalizar um codigo html para ajustar a data de um site?

[PseudoProgramador]

Bom eu já tentei personalizar um codigo css pronto porém do conseguir!

Peço a ajudar de vocês de como fazer isso pois pretendo ajustar a parte do post do meu blog e não consigo.

Eu quero que a data fica assim no menu de postagem

 

 

Quero que fique desse jeito a data, podem me ajudar?

 

[DiF]

@Anonimo3366 No css não dá para manipular datas. é preciso usar ou javascript ou uma linguagem de programação por exemplo o php.

agora se o blog é feito no wordpress... outro parecido .. acredito que eles já tenham uma opção de deixar a data como quer.

 

[nick4xd]

@dif Imaginei que se tratava de layout, não da estrutura da data.

 

Enfim, @Anonimo3366 por gentileza, seja um pouco mais específico. Deseja alterar a posição, layout da data ou sua estrutura (dd/mm/aaaa)?

 

[PseudoProgramador]

@nick4xd Cara quero alterar a posição da data e colocar um background no fundo. Porém não consigo, tipo a imagem que enviei! A plataforma é blogger!

[nick4xd]

@Anonimo3366  Mostre-nos seu código css para que possamos analisar as mudanças necessárias.

[PseudoProgramador]

@nick4xd Primeiro eu tenho que ir ao  </head>  e colar abaixo dele este codigo

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

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

e colocar a baixo dele este código <a expr:name='data:post.id'/>

 

dps procurar por este aqui <h2 class='date-header'><data:post.dateHeader/></h2> e substituir todos que eu achar por este <div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

 

Agora é a parte da edição da data tenho que procurar por ]]></b:skin> e acima dele colar isso

 

#fecha {
color: #464646; 
padding-top: 5px; 
padding-right: 5px; 
padding-left: 5px; 
padding-bottom: 5px; 
margin-right: -0px; 
margin-left: -0px; 
float:left;
text-align:center;
border: 1px none #dedede; 
list-style:none;
display: block;
background: url('') no-repeat; 
height: 30px; 
width: 30px; 
}
.fecha_dia {
display:block;
font-size:18px; 
line-height:16px; 
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; 
line-height:9px; 
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; 
line-height:8px; 
display:block;
}

Porém ao fazer isso a data fica na vertical não na horizontal como na foto que mostrei. Já tentei editar porém como não tenho muita experiencia não deu certo!

[nick4xd]

Hum.. Ficou um pouco complicado acompanhar isso. Imagino que esteja seguindo um tutorial, certo? Se sim, de onde é?

Pelo css não vejo motivos para o texto ficar na vertical, pelo menos não há nenhuma linha dispondo-as na vertical. Tem como postar o resultado que está tendo com esse código (na vertical mesmo)?

[PseudoProgramador]

@nick4xd Desculpa a demora! Bom cara foi de um tutorial sim que é deste site aqui http://goo.gl/KUGX9i 

 

O código fica assim no blog   mas eu queria ele no formato 31/01/2016 horizontal! 

 

 

[nick4xd]

@Anonimo3366 Tente alterar a seguinte linha no código css (o que estiver entre #fecha{}):

 

width: 30px; /*Largura da imagem*/

Aumente o valor desse width e vê se muda alguma coisa. Procure diminuir o valor do height (linha acima desta).

 

[DiF]

@Anonimo3366 Veja esta linha:

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

 

Veja que são 3 elementos div, cada um deles com uma class diferente.

Na class deles.. olhe esta linha: 

display:block;

isto diz ao navegador renderizar a nível de bloco, ou seja, cada elemento um em cima do outro. uma pilha.

Se quiser deixar lado a lado, só com CSS por exemplo, tem que mudar display para float left

 

veja dois exemplos online:

https://jsfiddle.net/7v2kqmbw/1/  display block
https://jsfiddle.net/7v2kqmbw/2/ float left 

 

Fora isso, o jeito que está retornando a data com nomes.. acho que é da plataforma .. alguma configuração.. para que ele possa entregar em números e não pelo nome do mes.. e etc.