Data estilo Faixinhas [001]

Yooo!!! Trago um tutu bem legal de colocar faixinha na data das postagens. Uma amiga me pediu para fazer pós ela não consegui achar, então vou ensinar. Esse tutu e bem fácil nada de códigos longos e complicados. Vamos lá!

-chacomanjos.blogspot.com-

1. Escolha qual blog deseja adicionar o estilo de data. Vá em Temas e depois  HTML.  Ative a barra de pesquisa com Ctrl+ F e então procure por .main-inner h2.date-header {, assim que achar cole o próximo código abaixo dele:

Códigos

width:65px;

height:22px;

margin-left:-75px;

float: left;

text-align: center;

font-size: 10px;

padding: 5px;

background: url(LINK DE SUA FAIXA) no-repeat center;

color: #FFFFFF;

text-shadow:0 1px #ccc;

margin-top: -20px;

◤Entendendo o código◥

• width:65px; Largura da sua faixinha.

• height:22px; 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, pode remove para mover mais para o lado.)

• 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. 

• padding: 5px; Espaço interno.

• background: url(LINK DA SUA FAIXA) no-repeat center; Endereço da imagem.

• color: #FFFFFF; Cor da fonte.

• text-shadow:0 1px #ccc; Sombra do texto.

• 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.

Alguns modelos de faixinhas:

 

Agora é só salvar! E modificar como desejar.

Credito das faixas: Kawaii World