18/09/2012

Estilos de data para blog [002]


Yahooo meu morangos com açúcar, trago algo hoje que pode ajudar vocês que esta com dificuldade para arrumar o estilo de data do blog ou tem preguiça mesmo ou sem criatividade. Bom trago três modelinhos em breve trarei outro mais detalhado e com efeitos de pontilhados e ribbons. Vamos lá?!

Os três modelos são esses vocês podem modificar as cores da forma que quiserem e o tamanho, aconselho editarem o formato de data para ficar menor.

1. Para usar qualquer um deles vá em seu HTML e procure por esse trecho:

.main-inner h2.date-header {

Agora abaixo dele depois do { cole o código de um dos modelos abaixo. Visualize para ver se deu certo e salve.




Códigos
  font: Ariel;
    color: #282828;
    margin-left: -85px;
    background: #d5d5d5;
    float: left;
    font-size: 12px;
    padding-bottom: 20px;
padding-top: 20px;
padding-left: 3px;
padding-right: 3px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
box-shadow: inset 5px 3px 1px #eee, 0 0 5px #ffffff;
    }
    .main-inner h2.date-header:hover {
    background: #dedede;
    }

Códigos
font: Ariel;
    color: #000000;
    margin-left: -85px;
    background: #9cd7e2;
    float: left;
    font-size: 13px;
text-shadow: #676767 1px -1px 1px;
    padding-bottom: 10px;
padding-top: 10px;
padding-left: 3px;
padding-right: 3px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
box-shadow: inset 1px 1px 1px #ffffff, 0 0 5px #ffffff;
    }
    .main-inner h2.date-header:hover {
    background: #FC71B4;
    }

Códigos
font: Verdana;
    color: #9B1AB0;
    margin-left: -85px;
    background: #ffffff;
    float: left;
    font-size: 11px;
    padding-bottom: 20px;
padding-top: 20px;
padding-left: 8px;
padding-right: 8px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
box-shadow: inset 1px 1px 1px #ffffff, 0 0 5px #ffffff;
    }
    .main-inner h2.date-header:hover {
    background: #4a494a;
    }
Gostou?  Espero que sim! Não esqueça de comentar viu? =)

5 comentários:

  1. adorei,lindos obrigado ^^

    ResponderExcluir
  2. Amor, no meu HTML não tem esse código .main-inner h2.date-header { :/ Já procurei várias vezes e não encontrei. E agora ?

    ResponderExcluir
  3. Oie que modelo você usa? Se for o simples o código é um pouquinho diferente, mas você também adiciona lo. Mas procure por: .date-header span { vai achar dois, mas a data é o primeiro que aparecer. Para reconhece lo melhor, ele vai estar abaixo do /* Posts e abaixo dele vai estar assim:

    .date-header span {
    background-color: $(date.header.background.color);
    color: $(date.header.color);
    padding: $(date.header.padding);
    letter-spacing: $(date.header.letterspacing);
    margin: $(date.header.margin);
    }

    Você pode modifica-lo ou colocar um dos modelos acima em seu lugar. :3 kiss espero ter ajudado, caso não me avise.

    ResponderExcluir
  4. Peguei o Primeiro modelo e modifiquei *--*

    www.k-awaiicherry.blogspot.com

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345