27 de ago de 2011

Personalize: Título da postagem

Postagem atualizada dia 23/08/2013 20h39

Tumblr_lpumlyvjb31qcy3seo1_500_large

Após ter recebido alguns pedidos para este tutorial, hoje vou postá-lo. Entenda que o título da postagem você pode personalizar a cor, a fonte e o tamanho da mesma pelo Designer de Modelo, certo? Então vou ensinar para vocês algumas outras coisas básicas que dá para personalizar através do HTML do seu layout. Básicas, mas que fazem uma boa diferença. Vamos?

Título centralizado
Vá até Design » Editar HTML e proucure por:
h3.post-title {
E, logo abaixo, acrescente esse código:
text-align: center
Caso queira o título alinhado à direita, substitua center por right.
Fundo colorido
Continue no mesmo trecho (h3.post-title {), e, abaixo dessa tag cole o seguinte código:
background: #E4E4E4;
Substitua #E4E4E4 por uma destas cores, se preferir.
Divisória abaixo do título
Design » Editar HTML » Expandir modelos de widgets, e proucure por:
<div class='post-header'>
Logo acima dele, cole:
<div style="border-top: 1px dashed #707070"></div> 
Entenda: 1px é a espessura da divisória, dashed é o modelo (que, nesse caso, é pontilhado) e #707070 a cor. Caso queira uma imagem, apenas adicione acima da tag este código:
<img src="LINK_DA_DIVISÓRIA"/>
Caso seu layout tenha duas tags iguais (a que se pede para procurar), uma não vai funcionar quando você salvar/visualizar, e obviamente cole acima da outra tag e visualize, caso estiver tudo certo, salve.

Imagem como fundo da postagem 
Novamente, vá até Design » Editar HTML e localize a tag:
h3.post-title {
Após a chave ({), cole o código abaixo:
background-image: url ('LINK_DA_IMAGEM');
width: 500px;
height: 40px;
Agora faça as devidas alterações: 500px é o valor da largura do seu fundo do título, e 40px a altura.

E então, é isso! Obrigada por tudo! Beijo, qualquer dúvida: comentários ou e-mail.

38 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Oi flor , segui suas dicas e estou tentando aprender HTML/CSS é já consigo personalizar alguns códigos , por isso muito Obrigada amiga!
    Bjo,
    http://blogdasgarotasby.blogspot.com/

    ResponderExcluir
  3. Adorei Emily, fiquei super feliz em ver que esse tutorial está aqui. *-*
    Visita e comenta?
    girlteen-s2.blogspot.com

    ResponderExcluir
  4. Gostei muito parabéns!
    Bjs http://cherryintheclouds.blogspot.com/

    ResponderExcluir
  5. Esse tutorial é muito util
    http://disneyprogramacao.blogspot.com/2011/08/sorteio-edicao-especial-merheje.html

    ResponderExcluir
  6. s2 muito bom, THE PERFECT

    ResponderExcluir
  7. Participa do sorteio do meu blog e concorra a 8 brindes INCRIVEIS
    http://disneyprogramacao.blogspot.com/2011/08/sorteio-edicao-especial-merheje.html

    ResponderExcluir
  8. E como mudar colocar uma fonte diferente no titulo do post ?
    Responde o coment aqui mesmo [blog fechado], depois venho aqui denovo e vejo.

    Beijoos

    ResponderExcluir
  9. Nhá *-* muito legal! to pensando em colocar uma linha embaixo do titulo *--------*
    Ah, pode mesmo? hahaha Ensina como fazer pra colocar os marcadores comentários e cia embaixo do titulo de posts só que um do lado do outro? ><
    beeeijos,
    http://theattitudeincluded.blogspot.com

    ResponderExcluir
  10. Alexia Ibrahim!: No Designer de Modelo tem váááárias!

    ResponderExcluir
  11. Aaaaah que fofo que ficou com a reforma *--*
    Queria pedir que você ensinasse como colocar a imagem do marcador do ladinho da postagem como tá aqui no EPF, e como deixar a letra embaixo do titulo do post com marcadores e tal pequenininha assim, você podia ensinar tudo em um tutorial e botar o nome tipo 'Configurar Dados Do post'?
    Ia ser legal!!
    Beijos ^^
    http://sermenina-blog.blogspot.com

    ResponderExcluir
  12. Oi não quero ser chata mais tem um blog que tá com o cabeçalho mais o menos parecido com o seu http://blogdasgarotasby.blogspot.com/p/creditos.html

    ResponderExcluir
  13. adorei as dicas, vc sempre arrepiando nos tutoriais, já gravei o video, tá salvando :P

    beeeijos

    http://tahmakeup.blogspot.com

    ResponderExcluir
  14. Eu vi vcê falando lá no Trashy Girl, que o tutorial "Barra Lateral um pouco mais acima", eu resolvi o caso. Amanhã eu vou postar o tutorial, é que ela postou como colocar o Gadget, mas não ensinou como colocar o fundo, por isso fica transparente! Pra subir o fundo, acrescente o mesmo código (margin-top: -150px;) em baixo de '.main-inner .fauxcolumn-left-outer {' Pronto é só visualizar!

    Beijoos, espero ter ajudado ;)
    http://closetteen-ct.blogspot.com

    ResponderExcluir
  15. Nossa! legal seu blog!
    Tenho uma dúvida:
    como coloca uma imagem marcando post, tipo ao lado do título do seu blog, muda quando é tutorial ou aviso?
    espero a resposta! ^^
    kissus

    http://adoleser-girls.blogspot.com/

    ResponderExcluir
  16. Ownt era tudo o que eu precisava, já tá nos meus favoritos para quando eu mudar de layout usa-lo rs.

    Beijos!
    http://blog-mundo-da-moda.blogspot.com/

    ResponderExcluir
  17. Hey flor já troquei lá , tá?
    http://blogdasgarotasby.blogspot.com/

    ResponderExcluir
  18. Flor, to com uma dúvida besta aqui, mas vi uns comentários seus e achei muito legal, e pode parecer idiotísse mas sou assim mesma (ignora) e quanto tenho uma dúvida, tenho que perguntar!
    Eu sei comentar com palavras em negrito, e em itálico, mas tenho uma dúvida tipo, só por o nome de algo e colocar o link, tipo, como você faz sabe (place fame | extras etc) só com o nome e com link =p

    Bom, eu sei que deve ser iper mega ultra fácil, mas é uma dúvida babaca cruel, haha.

    Beijos, Sabrina.
    http://blog-mundo-da-moda.blogspot.com/

    ResponderExcluir
  19. seguindo aqui e o place fame,segue de volta? Beijos,flor

    www.secretsofmylifes.blogspot.com

    ResponderExcluir
  20. Amei, muito útil !
    http://innocenceteen.blogspot.com/

    ResponderExcluir
  21. Não consegui centralizar o título da postagem :/
    será que é pq uso o novo blogger e meu layout não é personalizado e sim do blogger?

    osdesastresdececi.blogspot.com

    ResponderExcluir
  22. Deu Certo! Obrigada pela atenção, linda!
    vou linkar seu blog na minha lista de blogs, ok?
    beijos :))

    ResponderExcluir
  23. Oiiie flor
    Acabei de criar um blog e queria que tu desse uma passadinha la e se puder seguise
    ja to seguindo aquii viuu!
    SUCESSO

    blog-charmy-girl.blogspot.com

    ResponderExcluir
  24. adorei o blog! já estou seguindo e usando esse tutorial :]
    http://beijofosco.blogspot.com/

    ResponderExcluir
  25. adoro o blog, demais! e já estou usando esse tutorial *-*
    http://beijofosco.blogspot.com/

    ResponderExcluir
  26. Adorei seu blog nega


    webgleicy.blogspot.com

    ResponderExcluir
  27. Oi amei o teu blog! To seguindo! Se quiser segue la o meu tb pf! Quem ler tb segue ta gente!

    http://sempreinnamoda.blogspot.com/

    ResponderExcluir
  28. Nossa que Blog fantastico mim ajudou muito...Estou part, segui o meu por favor sou nova nesse ramo.
    http://lorrainevezeseu.blogspot.com/
    Obrigado...Bjim

    ResponderExcluir
  29. Olá,

    Eu gostaria de saber como faco para mudar a fonte dos titulos de minhas postagem. Estou me sentindo meio leiga nesse assunto,e em todos os sites de ajuda que eu ja fui,todos so falam no texto html,porem eu nao sei nem por onde comecar. Nao entendo nada! Por favor me ajude!

    ResponderExcluir
  30. Excelente tutorial!!!
    Obrigada por compartilhar!!

    ResponderExcluir
  31. Amei Otimo Brigadinha !

    www.foryoyou.blogspot.com.br

    ResponderExcluir
  32. vlw me ajudo muito mesmo entrem no meu site http;//jorrandodownloads.blogspot.com

    ResponderExcluir
  33. Boa noite flor!!!
    Vim agradecer por compartilhar seus conhecimentos.
    Deus abençoe!!!
    Tenha dias felizes...
    Bjokas...da Bia!!!

    ResponderExcluir
  34. Ajudou amiga entra ai http://multlink-br.blogspot.com/b/post-preview?token=JIPLQUABAAA.t7Oca9cHFqH5VfOSZVcrqA.w4HiUl3EURtMmLk5VUjiOg&postId=6848026834402435977&type=PAGE criei vendo seu post.

    ResponderExcluir

Comentários como "o blog tá lindo, bjo" "to seguindo, segue de volta??" "ai que lindo o blog, retribui a visita/comentário?" serão ignorados. Por favor, leia a FAQ e as outras páginas internas antes de perguntar qualquer coisa.