Mudandando o título do post

Olá pessoal! Não sei se alguém leu a postagem passada (afinal não teve nenhum comentário #CHOREMOS) , mas nela eu falei que, caso estivessem interessados, eu ia começar a fazer uma série de posts para criar um layout, então voltei com o 2° post [2° porque já tem um tutorial aqui de retirar a borda do layout e outros tutos básicos (x)] e , finalmente, trouxe para vocês um tutorial de customização de layout. Faz um bom tempo que eu estou enrolando mais hoje é dia de voltar as raízes do blog e postar um tuto. Na verdade o tutorial é bem fácil! Hoje vim mostrar maneiras de como vocês podem mudar o titulo do post: mudando a fonte, alinhando o título e colocando um background. Vamos lá?

Bom, primeiro irei ensinar a mudar a fonte do título. Há várias maneiras de você fazer isso, pode usar font-faces prontas(x) ou usar esse site do google, preste bastante atenção nos códigos para não estragar o layout, ok?!

 Usando o google fonts:

na verdade é bem fácil. Você vai entrar no site e após encontrar a fonte desejada (eu escolhi essa x ) o próprio site te ensina a como colocar a fonte no blog. A visão site é a seguinte:


Essa parte que eu destaquei é aonde você vai clicar para poder utilizar a fonte e essa vai ser a visão que você terá:

Você irá rolar a página até o passo 3 onde haverá uma caixinha com o 1° código que iremos utilizar:
Eu destaquei aquele texto ali no canto para mostrar a vocês que o próprio site ensina a colocar (só que em inglês hehe). Você copia esse código e guarda. Agora vai em Modelo >> clica em "Editar HTML" >>   aperta CTRL+F e procura por:
<head>
e embaixo dessa chave você vai colar o código da fonte. O meu ficou assim:


Agora salve e volte para a página do google fonts e copie o segundo código:


E guarde no bloco de notas. Agora volte no html do blog e pesquise por:
h3.post-title a {
e você vai encontrar algo assim:


 E onde está escrito  "font-family:$(post.title.font);" você irá colar o código que guardou no bloco de notas. O meu ficou assim:



salve e veja a fonte foi mudada. Você vai ver que tem um espaço enorme antes do título:


Agora vamos subir o título e mudar a fonte de posição. ainda no código HTML, pesquisaremos por:
margin-top: 20px;
 e você vai alterar o número de acordo com a sua preferencia {quanto menor o número (-) mais alto} e salve. Agora abaixo desse código, você irá acrescentar "text-align:" que é a posicão do título. Se quiser no centro, digite "center;", na direita, "right;" e nas esquerda "left;". Agora , finalmente, colocar o background no título.
 Para o background, procure por
h3.post-title {
e embaixo desse código cole :
background:url(url da imagem aqui);
 Onde está escrito 'url da imagem aqui' é aonde você vai colocar a url da imagem que você hospedou. Mas se você não quiser usar uma imagem, pode usar uma cor, ai é só você colocar:
 background:#n°dacor;
 Aqui tem uma tabela de cores {x}. E após todos esses tutoriais, o meu resultado foi esse no HTML:


e esse no layout:

Se vocês ficaram com qualquer dúvida, avisem nos comentários. Prometo que mais tarde, trarei alguns modelos prontos para vocês :)

5 comentários:

Anyellen disse...

Oi, tudo bom? O layout ficou bem legal >3< Já conhecia essa post, e eu sempre uso em meus templates, faz uma tremenda diferença!

[dor à tona]

Luiz Lacks disse...

Eu como já faz tempo que mexo com html nem uso mais tutorial, só quando é algo mais complicadinho mesmo. Mas isso é sempre bom para os iniciantes e é bom que tenha que faça, porque tem vários iniciantes por aí que sempre precisam de muita ajuda <3

www.luizlacks.com

Valentina Lacks disse...

Que amorzinho o layout ♥
Esse tutorial muita gente precisa, e nem sempre achamos em qualquer blog de tutoriais ♥ Eu não precisarei agora, mais no proximo layout com certeza!

Feliz Ano Novo || visite o Valentinices ♥

Tsuki ♥ disse...

Já conhecia esse tutorial e acho ele super útil!
Adorei a forma como você explica e ilustra cada passo..

Kissus de menta ♥ ~ alcoolize.blogspot.com.br

HSAMA disse...

Oi Sereia!
Vem pro cardume no facebook do Sereias BR?

www.h-sama.com

Postar um comentário

Oie, pode comentar a vontade, mais antes siga as regras.

- Não é permitido usar palavras insultantes.
- De criticas construtivas!
- Aceito "segue de volta", mas comente sobre o post primeiro né!
- Tem vaga para afiliados é só pedir!
- Deixe o link do seu blog para eu retribuir a visita!!!
Bjs ♥

Algumas fofuras para você usar:
ッ ≧✯◡✯≦ ≧^◡^≦ :[ ✿◕ ‿ ◕✿ ➳♥ ❣ ☜♡☞❤ ❥ ❦ ❧ ♡ ✗ ✘ ⊗ ♒ Ω ♦ ♠ ♥ ♣ ♢ ♤ ♡ ♧ ✦ ✧ ♔ ♕ ♚ ♛ ★ ☆ ✮ ✯ ☄ ☾ ☽ ☼ ☀ ☁ ☂ ☃