Tutorial - Personalizando o título das postagens²


Hoje eu trouxe um tutorial, principalmente porque meu PS está um lixo, toda hora fecha, ainda bem que consegui fazer a ilustração pelo menos. Enfim, hoje o tutorial é no HTML e vou ensinar -para que ainda não sabe- como personalizar o título da postagem, é bem para iniciante mesmo, mas pode ajudar muita gente, enfim, para conferir, leia mais ~ ♥.

1. Procure em seu HTML, a tag ''h3.post-title {'', e apague dessa tag, até a última chave, lá do h3.post-title a:hover {. 

2. Substitua por esse código.

h3.post-title {
 margin-top: 10px; /* espaço entre o título e a margem */
border-bottom: 1px solid #dadad9; /* bordinha abaixo do título */
text-align: center; /* alinhamento */
}
h3.post-title a {
font-family: Parisienne; /* fonte do título */
color: #f3ebb4; /* cor do título */
text-shadow: 0px 1px 2px #dfdede; /* sobra do título se não quiser apague */
font-size: 30px; /* tamanho do título */
-webkit-transition: color 0.4s ease-in; /* hover */
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
text-align: center; /* alinhamento do texto */
}
h3.post-title a:hover {
color: #71b4d7; /* cor hover */
text-shadow: 0px 1px 1px #dfdede; /* sombra hover */
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
}

E você vai mudando, as coisas mais importantes. Uma dica, se você quiser uma fonte que você baixou no computador, use o font face, é só procurar no google como usar. 

10 comentários:

  1. O que será que a dona Bianca quer dizer quando diz "coisas fofas".. ^O^

    Adorei o turorial, fica tão lindo <33

    Beijos,

    Juu-Chan, do Nescau com Nutella.

    ResponderExcluir
  2. Eu também só posto à noite porquê é quando eu tenho que sair do computador, ai eu me lembro que tenho um blog e vou postar, heheh
    É bastante útil, o tutorial.

    >> bleeding-freaks.blogspot.com

    ResponderExcluir
  3. Olá eu me chamo Larissa e sou dona do blog Blogando com Lalu, eu passei aqui para falar que eu amei muito mesmo o seu blog, e eu acho que ele realmente merece o meu respeito. Eu gostaria que você desse uma passadinha lá no meu blog, ele não é novo, mas eu parei de postar a 2 meses atrás, e voltei agora, então eu não tenho mais nenhuma leitora fiel como antes, posso contar com a sua ajuda? Obrigado desde agora. seguindo, retribui?
    http://blogando-comlalu.blogspot.com.br/

    ResponderExcluir
  4. Eu posto pela manhã, ou assim que me vem inspiração, e este tuto é bem fácil e dá um novo "ambiente" no blog. *-* .
    Flor, eu amo seu blog! Você é uma ótima postadora, poderia postar lá no meu blog né? shaushauhsa'

    Beijos, Chuvas-de-inverno.blogspost.com.br ♥

    ResponderExcluir
  5. Gostei, é um tuto bem simples, mas a fonte dos posts dá um charme no blog, né?!

    Beijos!

    http://kawaii-planeta.blogspot.com.br/

    ResponderExcluir
  6. Como sempre, seus tutoriais continuam sendo super úteis e sempre acabam nos ajudando bastante. Esse blog é tão maravilhoso...
    Beijinhos ^^

    http://merry-teen.blogspot.com.br/2013/06/porque-existe-tanto-odio-da-selena-gomez.html

    ResponderExcluir
  7. Ótimo tuto, personalizar o titulo do post é
    fundamental, haha :3

    Lovers Of Html | loversofhtml.blogspot.com || Estamos devolta!

    ResponderExcluir
  8. Fico tão lindinho, não? Só que eu não uso título dos posts no meu blog rsrs

    http://quirky-tree.blogspot.com.br/

    ResponderExcluir
  9. Amei todo o teu blog, e as posts, e sobre essa queria saber como faço para deixar os títulos em letras maiusculas ? Todas as letras.. Espero tua visita no meu blog, estou seguindo, beijosss

    http://temqueterstyle.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada! Bom, é só adicionar text-transform: uppercase; ao código.

      Excluir

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. ♥

« » +