18/09/2012

Tutorial: Estilos para Data do Blog

||

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 3 modelinhos em breve trarei outro mais detalhado e com efeitos de pontilhados e ribbons. Vamos lá?!

Os 3 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.



  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;
    }

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;
    }

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;
    }
 Para usar qualquer um deles vá em seu HTML e procure por esse trexinho

.main-inner h2.date-header {

Agora abaixo dele depois do { cole o modelo que você escolheu a cima. Visualize para ver se deu certo e salve. 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
    Respostas
    1. Esta certo, faça ficar bem lindo!

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram