Image Map

05/11/2012

Tutorial: Faixinha na data do post

Créditos: 
don't be afraid of the dark
 Hoje é dia de tutorial pedido por leitora impaciente, aee /o/
 Só pra explicar, a leitora anônima pediu o tutorial e, porque eu ainda não tinha postado, decicidiu reclamar. Ok que eu compreendo que você queria o tutorial, mas eu não sou obrigada a fazer todos os posts que você(s) pedem, por mais que eu tente fazer isso, além de que todos os posts do PC são programados, ou seja, demora pra sair um pedido.
 Mas voltando aos assuntos legais, o tutorial hoje é bem simples e fácil, tudo mastigadinho procêis. Caso alguém não saiba como fica, aqui tem print:
a data tá pequena, mas é porque eu dei ctrl-  pra aparecer e_e

 Vá em Configurações> Idioma e Formatação> e mude o modelo da data pra DIA/MÊS/ANO.
 Depois, vá no seu blog e clique em Modelo> Editar HTML> Expandir modelos de widgets> tecle Ctrl+F e procure por:
main-inner h2.date-header{
 Aí é só colar em baixo da tag:

width: LARGURA_DA_FAIXApx; height: ALTURA_DA_FAIXApx;margin-left:-75px;float: left;text-align: center;font-size: 10px;padding: 5px;background: url(URL_DA_FAIXA) no-repeat center;color: #COR_DA_DATA;text-shadow:0 1px #DCDCDC;margin-top: -20px;
  Ok, agora é só mudar o que já está óbvio (largura, altura, url e cor) e editar o resto. Pra editar a "margin-left" você só precisa aumentar (pra mexer a faixinha pra esquerda) ou diminuir (pra mexer pra direita). Alterando o "margin-top" você vai subir a faixinha (se diminuir o -20px) ou descer (se aumentar o -20px)
 Os dois códigos em que tem escrito "left" você pode trocar para right e adequar a faixa á sua área de posts. O que está sublinhado são detalhes sobre como estará a data em si.
 Enfim, é isso, muito simples, fácil e rápido e o resultado é lindo. No Goodies de Novembro trago umas faixinhas pra vocês, ok? ^^
Postagem completa por Piink Cookie. Todos os direitos reservados. Copyright 2012. Plágio é crime.

 E aí, gostaram? Espero que sim. Prometo que não vou mais ser esse tipo de blogueira chata que só reclama da vida/anônimos/leitores no post, ok? ><
 É isso. Beijinhos com glitter :*

41 comentários:

  1. Que massa, adorei o tuto :D
    Bjos!
    http://amonailart.blogspot.com.br/

    ResponderExcluir
  2. Adorei o tutorial. Talvez eu use no meu próximo layout! *-*

    senhorita-insana.blogspot.com

    ResponderExcluir
  3. Super útil, vou tentar colocar lá no blog ( Tomara que eu consiga (yn)).
    Paula, você poderia avisar lá no blog, quando as encomendas estiverem abertas? :S
    Obrigada ~

    Garotek.blogspot.com.br

    ResponderExcluir
  4. Nossa que fácil. Adorei. Bjus!!!
    galerafashion.blogspot.com.br

    ResponderExcluir
  5. Legal, mas eu não uso data.
    Beijo, Lili
    Princesa Imperfeita / Layout novo.

    ResponderExcluir
  6. Eu adoro esse tuto! Fica tãoo bonitinho, a data normal fica tão... normal!
    Beijooos!


    summer-bomb.blogspot.com

    ResponderExcluir
  7. Amei o tuto, super útil. Fica bem fofa e discreta ^^

    ResponderExcluir
  8. Fica muito fofo! É super delicado e a faixinha fica boa pra qualquer layout ♥

    omeubrilhantemundo.tk

    ResponderExcluir
  9. Eu não gosto muito dele não sabe? A data não aparece e isso me dá zica e_e
    E tudo bem você reclamar da vida/anônimos/leitores,eles que são chatos mesmo ^^ (nem todos os leitores)

    ResponderExcluir
  10. essa faixinho é muito fofa né ;S

    ResponderExcluir
  11. Putz' Essas pessoas de hoje não entendem o que é um pedido/sugestão.. -.-'

    É super fofa essa data! Adorei o tuto, super útil *-----*

    ResponderExcluir
  12. Adorei o tuto *--* Eu uso ele >.< haha'
    Beijos
    ill-helpyou.blogspot.com

    ResponderExcluir
  13. Adorei o tuto,usarei no próximo lay.

    Beijos
    Amora Ruffles

    ResponderExcluir
  14. Gostei do tutorial,vou tentar usar
    no meu próximo layout.
    Bjus!

    ResponderExcluir
  15. O Resultado é bem legal, vc faz umas faixinhas pra gente por?? *-*
    NaFlordaiidade (.blogspot.com) é sem o parênteses Amore *3*

    ResponderExcluir
  16. adorei o tuto .
    essas pessoas de hoje n tem paciência ;s;s
    bjks

    ResponderExcluir
  17. Nossa flor, que leitora mais folgada rsrs.. Você é só uma, acho que ela deveria respeitar isso! Mas, por fim esse tutorial ficou simplesmente lindo

    Sweet Teen

    ResponderExcluir
  18. Ain, que eu acho super chato essas pessoas impacientes que não sabem esperar o pedido ser atendido. Isso acontece muito comigo.
    E vou tentar colocar essa faixinha agora.

    - xoxo -

    ResponderExcluir
  19. Ótimo tutorial! Com certeza vai ajudar muita gente desinformada como sempre hehe :}

    http://rascunhosdasuuka.com/

    ResponderExcluir
  20. infelizmente eu não achei main-inner h2.date-header{

    ResponderExcluir