quinta-feira, 5 de maio de 2016

As incríveis maneiras de personalizar os títulos das postagens

Hey hey! Hoje o post é grande mas muito, muito útil! Caro leitor(a), você votou e aqui estou eu para ensinar ótimas maneiras de personalizar o título das postagens do blog! Sem mais delongas, vamos ao tutorial:

O que importa mesmo é achar "h3.post-title"!! Assim que encontrar você vai personalizar logo depois de {. Exemplo:
h3.post-title {
AQUI VOCÊ VAI INSERIR O QUE QUER, LEMBRE SEMPRE DE COLOCAR ";" APÓS O CÓDIGO (background, border ... )
}
Não pode esquecer de colocar ";" após um código! Se esquecer dele, não funcionará. Ok? Ok! Agora sim, vamos lá:

COM IMAGEM:
Basta colocar o código "background: url(URL DA IMAGEM) no-repeat;" e prontinho! Ou substitua por esse código:

h3.post-title {
background: url(URL DA IMAGEM) no-repeat; /**NO-REPEAT SE NÃO QUISER QUE REPITA A IMAGEM. É IDEAL QUANDO A IMAGEM É DO TAMANHO CERTINHO DO POST. AGORA SE OPTAR POR "REPEAT" A IMAGEM VAI SE REPETIR **/
font-family: 'Arial'; /**FONTE DO TÍTULO**/
font-size: 14px; /**TAMANHO DO TÍTULO**/
color: #000000; /**COR DO TÍTULO**/
text-align: center; /**CENTRALIZAR **/  
}

EXEMPLO:

BORDAS:
Esse é um dos mais fáceis e legais de se fazer! Tem um leque enorme de opções!
Basta você colocar esse código: "border: 2px solid #000;" Mas Karol, o que significa essa numeração, o nome solid e essa hashtag com um monte de zero? Simples: 
2 px: Espessura da sua borda. Quanto maior a numeração, maior será a espessura da borda.
solid: Estilo da sua borda!
#000: Cor da sua borda. Basta clicar aqui para ter acesso a tabela de cores. Selecionei alguns estilos de bordas para você! Depois de escolher a sua favorita, basta substituir solid pelo nome da borda que você escolheu.



Para ter uma linha abaixo ou acima do título basta escolher o estilo de borda e colocar:
border-top: 2px solid #000;  /**LINHA ACIMA DO TÍTULO**/
border-bottom: 2px solid #000; /**LINHA ABAIXO DO TÍTULO**/
Se colocar os dois, ficará uma linha acima e outra abaixo do título. Caso queira uma só, basta escolher uma delas e colocar. Lembrando que: Pode mudar a espessura, cor e estilo da borda. Ok?














COM COR:
Mesmo princípio do tutorial de como colocar imagem. Basta você colocar "background: #000;". Escolha uma cor, substitua o #000 e prontinho! E caso queira personalizar, da pra você usar dois métodos que ensinei!! Cor + borda é uma boa pedida.
E aii, curtiu esse tipo de post? O que você acha de trazer mais tutoriais para o blog? Só avisar que eu faço  E pra quem não ta sabendo, liberei meu portfolio! Que tal dar uma olhadinha?
Beijos e até o próximo post 

57 comentários:

  1. Uau! Não sabia dessa dica!
    Super curti. E que blog maravilhoso, cheio de links e ideias úteis!
    Parabéns! :D

    www.plataformaviajante.com.br

    ResponderExcluir
  2. Adorei o post cheia de dicas úteis para nós blogueiras, parabéns pela dedicação com o cantinho...Bjinhos 😘

    ResponderExcluir
  3. Tão feliz de ler este post, e eu preciso dele

    Reidunn

    ResponderExcluir
    Respostas
    1. ❤_❤ eu que fico feliz em saber que precisava de um post assim e agora achou

      Excluir
  4. Então depois toca a partilhar tudo, ok?!

    Bem, que belas dicas. Acho super úteis estes tutoriais para quem, como, adora estar sempre a alterar o blog :D

    NEW OUTFIT POST | Lush Life.
    InstagramFacebook Oficial PageMiguel Gouveia / Blog Pieces Of Me :D

    ResponderExcluir
  5. Respostas
    1. Magina ❤ e fico feliz que tenha gostado das dicas!

      Excluir
  6. Boas dicas!

    Isabel Sá
    http://brilhos-da-moda.blogspot.pt

    ResponderExcluir
  7. Obrigada! ♥
    Realmente não é muito complicado! Adorei a dica!
    https://keepcalmandshopvintage.blogspot.pt/

    ResponderExcluir
  8. Esse post é utilidade pública! hahaha salvei aqui pra mudar o meu!
    Obrigada por compartilhar!
    Beijos

    ResponderExcluir
  9. Além do post ser explicadinho, ainda é todo amorzinho *-* hahahah adorei o post!
    beijos
    www.marinaalessandra.com

    ResponderExcluir
  10. Mais um post amorzinho num blog amorzinho e ainda por cima é bem explicado 😍 EU PRECISO
    https://tudoinfoco.wordpress.com/

    ResponderExcluir
  11. Adorei essas dicas, Karol.
    ótimas para quem quer personalizar o próprio blog sozinho. Eu mesma não entendia nada disso e fui aprendendo assim, por tutoriais.
    http://revelandosentimentos.blogspot.com - Participe do Top Comentarista. DOIS livros para o ganhador

    ResponderExcluir
  12. Gente eu não sabia mexer em nada disso.
    Adoorei as dicas Karol.
    Realmente é bom saber mudar a personalização.
    Beijos!

    Blog Pam Lepletier

    ResponderExcluir
  13. Meu Deus, que dica maravilhosa, obrigada! Amei, amei, amei!
    Um beijão,
    Gabi do likegabs.blogspot.com ♡

    ResponderExcluir
  14. Respostas
    1. Ebaa! Fico mt mt feliz em saber que é útil!

      Excluir
  15. Que post arrasador foi esse? Amei, já vou usar.

    vixeemenina.blogspot.com.br

    ResponderExcluir
  16. Eu uso linha no meu, mas já usei cor e também texturas. Acho demais essas possibilidades de personalização e vira e mexe tô alterando meu layout hehe :D


    Beijos
    Brilho de Aluguel

    ResponderExcluir
  17. Preciosa ajuda mesmo! :)
    Xoxo
    http://myheartaintabrain.blogspot.pt/

    ResponderExcluir
  18. Amei muito a dica, sempre bom saber!
    Beijos,
    http://www.pompomchic.com.br/

    ResponderExcluir
  19. Adorei as dicas são super uteis e no meu próximo layout vou usa-las *o*


    http://www.donab.net/
    https://www.facebook.com/donna14b/

    ResponderExcluir
  20. Ótimas dicas <3 eu sempre personalizo o meu, acho que da um toque legal no blog !

    Obrigado pelo carinho, fico muito feliz por saber que estou fazendo a coisa certa e as pessoas estão gostando do meu trabalho <3

    Seu blog é lindo, você é uma graça, muito sucesso !

    http://www.seteprimaveras.com/

    ResponderExcluir
    Respostas
    1. ♡♡ Obrigadaa!
      E fico feliz que tenha curtido as dicas

      Excluir
  21. Adoro "brincar" de personalizar no meu blog, hahaha!

    Beijos!
    www.likeparadise.com.br

    ResponderExcluir
  22. Adorei as dicas,estava precisando de algumas para personalizar o meu título. Mas a minha preguiça eterna de mexer no layout não deixa x.x
    Beijas,
    Mundo perdido da Carol
    Fan Page
    Instagram

    ResponderExcluir
  23. Que legal o post! Aposto que ajudou muita gente (inclusive eu!) Adoro aprender coisas sobre html, nunca se sabe quando vou querer mudar algo no meu blog, né? Hihi

    Um beijo! ♥
    www.daniquedisse.com.br

    ResponderExcluir
  24. Muito útil esse post!! Sempre bom aprender sobre HTML!!!
    bjs
    blogtrashrock.com

    ResponderExcluir
  25. aiii que legal, não sabia disso! adorei a dica!

    www.blogamorarosa.com

    ResponderExcluir
  26. Eu sinceramente não sabia :0, achei muito legal e útil.Agora dá pra fazer uns teste no meu blog hahaha.

    Beijos


    www.poesiaemtranse.com

    ResponderExcluir
  27. Nossa, obrigada.

    http://www.blogsecretplace.com/

    ResponderExcluir
  28. Ka, amei as dicas de como personalizar o topo do blog. Sobre suas inspirações de layout, todos são lindos mas realmente a criatividade do Depois dos Quinze de utilizar ilustrações diferentes para cada tipo de assunto foi genial.

    Amei o seu blog, muito sucesso com ele!

    Beijos, Viny!

    vinysummer.com
    canal do blog

    ResponderExcluir