21 de ago de 2012

Tutorial : Personalizar data do post


Oi diamantes, desculpem o sumiço, tenho de aproveitar as férias antes que elas acabem :(

 Trouxe umas datas personalizadas :) 

Para meter o estilo que você gostar, procure por .main-inner h2.date-header {
A seguir, você achará algo assim :

.main-inner h2.date-header {

  font: $(date.font);
  color: $(date.text.color);
}

Apague esse código e substitua pela data que mais gostar :)




1 - Data simples ( só muda a cor do fundo quando passa o mouse )

.main-inner h2.date-header { 
/* Data personalizada by DDUG*/ 
font: arial; /* Fonte da Data */ 
color: #FFFAFA; /* Cor da Fonte */ 
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */
background: #00BFFF; /* Fundo da data */ 
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */ 
padding: 4px; 
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.main-inner h2.date-header:hover { 
background: #C1CDCD; /* Fundo quando o passa o mouse */ 
/* Fim da data personalizada by DDUG, não retire créditos */
}

2 - Data "folhinha"



.main-inner h2.date-header { 
/* Data personalizada by DDUG */ 
font: arial; /* Fonte da Data */ 
color: #000000; /* Cor da Fonte */ 
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */
background: #FFFFFF; /* Fundo da data */ 
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */ 
padding: 4px; 
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.main-inner h2.date-header:hover { 
background: #FFC0CB; /* Fundo quando o passa o mouse */ 
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
/* Fim da data personalizada by DDUG, não retire créditos */
}

3 - Data redondinha


.main-inner h2.date-header { 
/* Data personalizada by DDUG */ 
font: arial; /* Fonte da Data */ 
color: #00BFFF; /* Cor da Fonte */ 
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */
background: #FFFFFF; /* Fundo da data */ 
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */ 
padding: 4px; 
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-left-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomleft: 100px;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.main-inner h2.date-header:hover { 
background: #000000; /* Fundo quando o passa o mouse */ 
-webkit-border-top-right-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topright: 100px;
-moz-border-radius-bottomright: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
/* Fim da data personalizada by DDUG não retire créditos */
}

Personalize as cores com *esta* tabela
Já tinha postado isto no meu blog mas estou sem inspiração e principalmente sem tempo. Vou tentar postar uns textos para vocês, diamantes.




16 comentários:

  1. Obrigada pela visita e por me seguir no tumblr!Obrigada, volte sempre!
    Beijos.
    pequenomuffin.blogspot.com

    ResponderExcluir
  2. Eu acho liindo a data personalizada, tenho no meu blog e fica uma graça!
    Bjos,
    www.coisasdemenina-vicky.blogspot.com

    ResponderExcluir
  3. Fica muito bonito!! :) Mas confesso que tenho o maior medo de mexer na html sozinha, dá muitos problemas :/ E não se preocupe com a URL, o blog não considera como spam.
    Volte sempre!

    Beijinhos :*

    conversasdochadascinco.blogspot.com

    ResponderExcluir
  4. ÓTIMO TUTORIAL
    Se você poder deixar a sua marquinha lá no meu bloguito ficarei muito feliz!
    --> CLICA?MundoFantásticoFeminino

    ResponderExcluir
  5. fica bonito assim...ah,tem uma tag pra vc lá no blog: http://www.damadevestidoazul.com/2012/08/tag-onze-coisas-sobre-mimreplay.html

    ResponderExcluir
  6. Ámei o tutorial , muito bom *-*
    http://theworldoflena.blogspot.com.br/

    ResponderExcluir
  7. Nossa, tutorial super útil, amei!
    http://victory-blog1.blogspot.com.br/

    ResponderExcluir
  8. Que lindo os efeitos! Amei o tutorial!!

    Garota Vertigem
    ps: O blog está excluindo pessoas que comentam com link, portanto se você for retribuir o comentário clique no perfil pra ver o blog. Obrigado!

    ResponderExcluir
  9. ótimo tuto ! amei , vou fazer no meu blog !, estava procurando um jeito de personalizar a data ...

    livein-paris . blogspot . com (novo nome)

    ResponderExcluir
  10. Amei o tuto, eu tava procurando faz tempo, aqui eu achei \õ
    Vou usar, e ver se fica bom no meu blog de testes ^^
    Estou seguindo, retribui ?

    http://she-dream-with-paradise.blogspot.com.br/

    ResponderExcluir
  11. http://fasnicklovers.blogspot.com.br/
    seguindo vc segue? postagem mto boa

    ResponderExcluir
  12. Ameii!!!
    Visita meu blog?
    http://mundinhomagicodagaby.blogspot.com

    ResponderExcluir
  13. amei, foi bem util, c: seguindo o blog, amei, bjs
    http://window-soul.blogspot.com.br/

    ResponderExcluir
  14. Amei o tuto to seguindo o blog
    segue devolta
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir

Obrigada por ler e comentar!
Deixe o link do seu blog (ou seu perfil aberto) para que eu possa retribuir. Não gosto muito de responder dúvidas via comentários, então prefiro que você mande na ask ali ao lado ->
Comentários de divulgação sem nada sobre o post não serão retribuidos. Fale pelo menos um pouquinho sobre o post, por favor.
Faça aos outros aquilo que você quer que façam para você.