29 de dez de 2012

Data com Faixinha

Olá anjos! Trouxe um tutorial bem legal para vocês que é a data com faixinha. Esse tutorial foi o que eu usei no Template do meu outro blog. Acho ele muito lindo e fica muito fofo em qualquer blog. 

O tutorial é do Kawaii World e estou repassando. 


Exemplo do resultado

1. Vá até Editar HTML e procure por .main-inner h2.date-header{, após a tag, cole:

width:65px;
height:22px;
margin-left:-75px;
float: left;
text-align: center;
font-size: 10px;
padding: 5px;
background: url(LINK DA SUA FAIXA) no-repeat center;
color: #FFFFFF;
text-shadow:0 1px #ccc;
margin-top: -20px;
- Entendendo o código:

width:65px; - Troque pela largura da sua faixinha.

height:22px; - Troque pela altura da sua faixinha.

margin-left: -75px; - Aumente e mova ele para a esquerda, diminua e mova para a direita. (observe a presença do menos)

float: left; - Troque por right se quiser a data na direita.

text-align: center; - Alinha o que fica dentro da faixa (nesse caso é a data). Pode ser trocado por left ou right.

font-size: 10px; - Tamanho da letra. Quanto maior o número, maior a letra. E vice-versa.

padding: 5px;  - Espaço entre a data e o fim da faixa.

background: url(LINK DA SUA FAIXA) no-repeat center; - Precisa explicar?

color: #FFFFFF; - Cor da fonte.

text-shadow:0 1px #ccc; - Sombra. Troque pela cor.

margin-top: -20px; - Usado para subir e descer a data, juntamente com a faixa.




Se quiser acrescente a tag :hover para mudar quando passa o mouse.

Algumas faixinhas (todas do Kawaii World):



3 comentários:

  1. Já usei uma vez o resultado fica lindo!

    ResponderExcluir
    Respostas
    1. hahah foi mesmo.

      Eu gosto dessa personalização, e dá pra usar umas coisas diferentes nela ^^

      Excluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!