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):

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar