html

Personalizando a data dos Posts

18:06

                               

Oi garotas tudo beleza? Comigo tá tudo otímo também.
Primeiro vim dizer que logo eu vou postar para vocês a resposta do debate passado, para quem não sabe ou não viu o debate foi Leitores ou Seguidores, quem não viu clica aqui. Então hoje eu não tenho muito o que dizer, só quis trazer esse tutorial para vocês, porque até onde eu vi é bem raro achar ele. Pois é muito fácil, e por ser muito fácil as pessoas acabam deixando de fazer. Mas como eu sou uma menina muito dedicada, sqn. Decidi trazer para vocês hoje. Chega de blá blá blá e vamos ver?





Vá até Configurações >> Formatação >> Formato da data, e ajuste a data dessa maneira:




Salve tudo, e então vá até o seu HTML e procure pelo código abaixo:

.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}
E substitua esse código pelo debaixo:

.main-inner h2.date-header {
font: georgia;
color: #333;
margin-right: -100px;
background: #FFB6C1;
float: right;
font-size: 11px;
padding: 4px;
}
.main-inner h2.date-header:hover {
background: #DB7093;
}


Primeiramente temos que alinhar a data. Se sua area de postagem está à direita não mude nada. Já se não esta mude o "float: right;" e o "margin-right: -100px;"  substituindo por right por left.


Entendendo o código:


font: georgia; É a fonte da data.
color: #333; É a cor da data.
margin-right: -100px; Este código é a margem externa da data, ou seja, ela ira dar o espaçamento necessário entre o quadro da postagem e o quadro da data. Quanto menor o número mais perto fica, quanto maior mais longe.
background: #FFB6C1; Cor do fundo do quadro.
float: right; Alinhamento do quadro da data.
font-size: 11px; Tamanho da fonte da data.
padding: 4px; Margem interna do quadro, ou seja, espaçamento de dentro da caixinha.

PROPRIEDADE HOVER
background: #DB7093; Cor do fundo do quadro quando passa o mouse em cima.

Bom acho que é só isso, caso não tenham entendido me comuniquem. E se quiserem algo mais é só pedir. 
Um beijinho á todos.

You Might Also Like

20 Chocolates viraram Cupcakes

  1. Adorei o tutorial! Testei ele no meu lay de testes e ficou muito lindo *--* Kissez!

    Ju, do Epílogos e Finais.

    ResponderExcluir
  2. adorei, bem fácil!

    @esteffanifontes, do blog Aos Dezesseis Anos
    aosdezesseisanos.blogspot.com.br

    ResponderExcluir

  3. Adoreeeeeeeei maravilhoso , ja estou segui , me segue ?
    foreveermakeup.blogspot.com.br

    ResponderExcluir
  4. Respostas
    1. Oi linda desculpa esqueci de postar um preview
      Vou ver se consigo atualizar pra ti;
      Beijinhos e desculpa

      Excluir
  5. Passei aqui ontem pra avisar de um concurso que está tendo no meu blog, porém eu enviei o link errado, espero que me desculpe
    e aqui está o certo, gostaria que participasse
    Desculpa *-*
    http://comentariosde1garotaqualquer.blogspot.com.br/2013/02/sorteio-valendo-colar-de-directioner-3.html

    ResponderExcluir
  6. Eu já conhecia e ajuda muito :33

    Mudei de url : http://lost-in-paradise-oficial.blogspot.com.br/

    ResponderExcluir
  7. Eu não consigo localizar o codigo no meu HTML quando coloco no Ctrl+F aparece zero dizendo q o codigo não existe.

    ResponderExcluir
    Respostas
    1. Ola. Vou te ajudar nessa.
      Bom, o modelo do blogger mudou, a plataforma mudou. Por isso os codigos estao "diferentes", na verdade estao iguais, mas com algumas mudanças no formato onde ficavam, agora os com os codigos ocultos, por isso esta meio diferente. Mas vou preparar um post para te ajudar nisso, e te mando o link bem certinho dessa mudança.
      Beijos!

      Excluir
  8. Muito bom adorei
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  9. Adorei! tenho uma dúvida gomo eu faço Giselle para que a data fique um dado abaixo do outro porque a minha ficou dia e mês juntos e o ano abaixo( nos meses que tem muitas letras ele corta) Obrigado. Bjs

    ResponderExcluir
  10. Adorei! tenho uma dúvida gomo eu faço Giselle para que a data fique um dado abaixo do outro porque a minha ficou dia e mês juntos e o ano abaixo( nos meses que tem muitas letras ele corta) Obrigado. Bjs

    ResponderExcluir
    Respostas
    1. É só vc ir em configurações, idioma e formatação e formato da data.
      Ai vc escolhe a que mais lhe agrada. A que eu uso aqui no blog é 23 junho 2013
      Beijinhos

      Excluir
  11. Adorei! Tenho uma dúvida , será que você poderia me ajudar? Como eu faço Giselle para que fique cada tópico em uma linha. A minha data ficou assim: dia e mês juntos, entretanto quando o mês tem muitas letras ele corta a palavra. Obrigado, bjs

    ResponderExcluir
  12. Não estou conseguindo achar o código diz que o código não existe. Será que você pode me ajudar?

    ResponderExcluir

Deixe um recadinho sobre o blog. Obrigada!

Related Posts Plugin for WordPress, Blogger...