Ir ao conteúdo

Posts recomendados

Postado

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

 

eddiCHG.jpg

 

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

 

  • Moderador
Postado

@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.

 

Postado

@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!

Postado

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)?

  • 2 semanas depois...
Postado

@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).

 

  • Moderador
Postado

@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.

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!