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;
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;
}
}
.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;
-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 :)
Sem palavras!
ResponderExcluirObrigada,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/