Tutorial - Data do post com faixinha


O tutorial que vamos aprender hoje é bem simples mesmo, como já havia dito antes; ele é como personalizar a data do post com uma faixinha que, na minha opinião, dá um charme no blog que a data normal não dá. Vocês podem ver como fica mais ou menos aqui.

1. Vá em Modelo> Editar HTML e clique em "Prosseguir" no aviso que surgir. Depois, prima CTRL+F e pesquise pela tag .main-inner h2.date-header {. Apague tudo que estiver entre as chaves e cole o seguinte código:
background: url(URL DA SUA FAIXINHA AQUI);
height: 45px;
width: 90px;
margin-top: 5px;
margin-left: -29px;
float:left;
line-height: 50px;
padding-left: 15px;
color: #BA55D3;
font-size: 12px;
Entenda o código: Margin-top e Margin-left são responsáveis pelas coordenadas de sua faixinha. Então mexendo em "Margin-top" você verá que ela poderá subir ou descer, de acordo com o número colocado. E, alterando "Margin-left" sua movimentação será para esquerda ou para a direita. Ajuste tudo até que fique proporcional a área de posts. Visualize e se estiver do seu agrado, salve.

Para o post não ficar muito inútil, trouxe para vocês algumas faixinhas para usarem, confere:




Fiz apenas seis, mas garanto que tentei fazer da melhor maneira possível, para que ficasse acessível a todos os layouts e a todas as paletas de cores. Espero que tenham gostado e caso usem algo lembre-se dos créditos. Bezzo,
/Sarah

11 comentários:

  1. acho que fica bem mais fofo né !
    beijos

    ResponderExcluir
  2. Já usei a faixinha no meu layout anterior.

    Beijos!
    http://productions-ofdreams.blogspot.com.br/

    ResponderExcluir
  3. Nossa, flor, não havia te visto por aqui, ainda o.O Rs', amei o tutorial! Sempre usei-o nos meus layouts *-* Beijão!

    Ju, do Epílogos e Finais.

    PS.: frango assado? A inveja está a mil aqui, rsrs' Melhoras pra você, flor!!

    ResponderExcluir
  4. Um , frango assado delicia !
    Fiquei até com fome , adorei o tutorial ,
    yono-berry.blogspot.com

    ResponderExcluir
  5. Adorei o tuto flor, eu uso muito as datas assim, mas o meu código eu tive que descobrir sozinha como modificar porque nunca conseguia fazer os tutoriais disponibilizados por outros blogs u__u
    Lindas faixinhas *--*
    Beijos~

    myacidblackcherry.blogspot.com

    ResponderExcluir
  6. Lindos *-* amei seu blog,ainda não tenho blog então vou vir visitar aqui para conhecer melhor a blogsfera (: Beijos

    ResponderExcluir
  7. Não uso faixinha, deixo o meu do mesmo jeito. Antes personalizava, mas no novo layout fiquei com preguiça e não fiz kkk
    >>> republicacrash.blogspot.com.br

    ResponderExcluir
  8. Nossa de tando que eu procurei eu achei e usei umas das suas faixas, fico diferente o blog já que é a primeira vez que eu mudo essa área. ^^

    Beijo e muito obrigada!
    www.prochosk.blogspot.com.br/

    ResponderExcluir
  9. Coloquei tudo lá, mas no meu blog não está funcionando. :(
    A data não aparece de jeito nenhum!
    Se alguém souber como me ajudar, por favor, me mande um email.
    petra.potter@hotmail.com

    http://naproximapagina.blogspot.com.br/

    ResponderExcluir
  10. Adoreeei o tutorial, obrigada! Estou tentando fazer um layout pra mim e você está me ajudando bastante!

    desapeg-ar.blogspot.com

    ResponderExcluir
  11. Ameeei , muuito obrigada, já usandoo *-*

    beijinhoos

    http://noivinhadodan.blogspot.com.br

    ResponderExcluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +