30/07/2012

tutorial - datas


oooie :) hey hey, eu resolvi postar um tutorial fácil, e que deixa o layout muito bonito, é a alteração da data, mas antes, créditos ao kawaii-world espero que a Kaorii-chan não se importe :B

vamos ao tutorial: 

Antes de mais nada, você vão precisar ir em Configurações > Formatação e mudar o formato de data para o abaixo:  


Depois disso, vá em Design > Editar Html aperte Ctrl + F e procure por

.main-inner h2.date-header {

Abaixo disso cole:

font: Tahoma;
color: #333;

margin-left: -80px;
background: #f49cca;
float: left;
font-size: 11px;
padding: 4px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.main-inner h2.date-header:hover {
background: #87cefa;
}


Entendendo o código:


font: Tahoma;
A fonte escolhida para a data.
color: #333;
Cor da data.

margin-left-80px;
- left = Deixa a data na esquerda, troque por right se quiser ela na direita.
-80px = Distância entre a data e o título do post . Quanto menor, mais próximo.


background: #f49cca;
Cor do fundo.


float: left;
 Muda a localização da data. Troque por Right se quiser na direita.

font-size: 11px;
Tamanho da fonte.


padding: 4px;
Margem do quadrado.


-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
Essa parte é um adicional. Deixa as bordas arredondadas, mas se você quiser que elas fiquem quadradas apague essa parte TODA.


background: #87cefa
Cor do fundo quando passa o mouse.


veja se deu tudo certo e salve.

bom, o tutorial é esse, lembrando que isso é só um base para você fazer do seu jeito, tenha originalidade.

é isso, até a próxima, tchau :)



Um comentário:

  1. Sem palavras!
    Obrigada,obrigada mesmo
    Sempre procuro tutoriais de datas mas são sempre confusos.Mas o seu não,é simples e explicativos.Cheguei agora no seu blog mas se todo os seus tutoriais forem assim,vou amar o blog.
    http://tardedemaisbaby.blogspot.com/

    ResponderExcluir