Tutorial- Data Com Faixinha


Ola meus amore tudo bem?? espero que sim

e ai animados para o natal?? Confesso que eu não pois infelizmente vai ser a mesma coisa de sempre, mas enfim hoje trago um tutorial bem fofo para vocês, é como colocar a data do post com faixinhas fica bem legal...

Enjoy...


1. Vá no seu HTML e procure por  .main-inner h2.date-header{ logo após a tag procurada cole o seguinte código.

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;


width:65px; - Larguara da faixinha

height:22px; - altura da sua faixinha.

margin-left: -75px; - Aumentando o numero voce vai mover para a esquerda e diminuindo voce irá mover para  a direira.

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



font-size: 10px; - Tamanho da letra. 

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

background: url(LINK DA SUA FAIXA) no-repeat center; - o link da sua faixinha

color: #FFFFFF; - Cor da fonte.


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


Pronto agora visualize e se estiver tudo certinho salve.


Kissus


>>>>>Fim do post<<<<<

Nenhum comentário:

Postar um comentário