Tutorial: Como personalizar um layout passo a passo - Parte 3

13 dezembro 2015
  Finalmente dei as caras novamente com as séries de tutoriais, dessa vez vou ensinar a personalizar a sidebar (barra lateral), colocando fontes diferentes e background. Ensinarei também a personalizar o título dos posts, bora prosseguir?


Tutorial: Como personalizar um layout passo a passo - Parte 3


Vá em "Modelo" > "Editar Html" > expanda as setinhas > Aperte "Ctrl+F" e na caixinha de busca procure pelo seguinte trecho:
/* Headings
ABAIXO dessa tag cole o seguinte código:
.sidebar h2 {
margin: -11px -11px .65em -11px; /* margem */
font-family: Verdana; /* tipo de fonte do titulo */
line-height: 1.8em; /* altura da linha */
text-transform: capitalize; /* transformação do texto */
color: #FFFFFF; /* cor do título */
background: #22222; /* cor de fundo dos títulos */
font-size: 12px; /*tamanho da fonte */
text-align: center; /* alinhamento centralizado do texto */
font-weight: bold; /* deixa o título em negrito, troque por normal para tirar o negrito */
border-radius: 10px 10px 0 0; /* deixa apenas as bordas acima arredondadas */
word-spacing:.2em; /* espaço entre palavras do título */
}
A partir daí você pode alterar a fonte, o background, tamanho da fonte e as margens para que fiquem de acordo com o seu gosto e a cara do layout. Mas, vamos alterar a fonte por uma fonte mais bacana?
A forma mais simples de alterar as fontes é usando o Google Web Fonts, entre no site e escolha a fonte que você deseja seguindo os seguintes passos:

Como usar fontes do Google Web Fonts


1- Digite o nome da fonte que você deseja
2- Clique na seta para buscar os links - Quick-use.

  Após isso irá abrir uma nova página, nessa página copie os códigos do passo 3 e do passo 4, salve-os em um bloco de notas.

Agora voltando para "Modelo" > "Editar HTML" procure pela seguinte tag:
<head>
 Abaixo dessa tag cole o código do passo 3, porém, adicionando uma barrinha antes de ">" (no final). Exemplo:
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
Só funcionará se você acrescentar essa barra, não esqueça!

  Agora, voltando para o primeiro código que acrescentamos, em font-family: Verdana; substitua pelo passo 4 do código que você salvou, visualize, salve e pronto!

Como personalizar o título dos posts


  Agora vamos personalizar o título dos posts, essa área exige 3 personalizações que são elas: quando está na página inicial, quando o mouse está em cima do título do post e quando você clica no título.

Vá em "Modelo" > "Editar Html" > expanda as setinhas > Ctrl+F e procure por:
h3.post-title a {
ANTES da tag de fechamento " } " cole o seguinte código:

text-align:center; /*deixa o título dos posts centralizado. Se você não quiser centralizá-los, apague essa linha.*/
font-family: "NOME DA FONTE AQUI"; /*Se refere a fonte*/
font-size: 20px; /*Tamanho da fonte*/
color: #000; /*Se refere a cor da fonte*/
border-bottom: 1px dashed #ccc; /*Se refere a borda pontilhada abaixo do titulo. Se não quiser apague essa linha*/
Faça as alterações de acordo com o seu gosto. Agora procure por:
h3.post-title a:hover {
E cole o mesmo código, porém, se preferir troque a cor da fonte, pois essa personalização se refere a quando o mouse está em cima do título.

Procure por:
h3.post-title {
E cole o mesmo código. A personalização da fonte é feita do mesmo jeito que fizemos a da sidebar, siga os mesmos passos!
Para trocar as cores, utilize ESSA tabela de cores.

Qualquer dúvida ou sugestões de próximas postagens, é só deixar nos comentários, ta? Responderei o mais rápido possível! 

Leia também:
Tutorial: Como personalizar um layout passo a passo - Parte 1
Tutorial: Como personalizar um layout passo a passo - Parte 2

11 comentários:

  1. Nanda amei seu post, eu ainda não consegui fazer as alterações que quero mais vou usar todas as suas dicas com certeza rsrsr.
    E Nanda eu achei mais bonito o blog agora, ficou uma graça, é muito capricho, Beijos!!!

    ResponderExcluir
    Respostas
    1. Como eu sempre falo, Pri, no começo você vai se embolar um pouco mas depois pega o jeito! rs
      Fico feliz que tenha gostado do novo layout, enjoei muito rápido daquele e estou amando esse! ♥ BEIJOS

      Excluir
  2. Meninaaaaa!
    Seu Blog tá muito diferente tá mais perfeito ainda, pode isso meu Deus!?
    Na hora que eu entrei aqui eu fiquei chocada de um dia pro outro!Como pode O_o Totalmente apaixonada e extremamente feliz neste momento!
    ARRAAAAAAAASOOOOOOOOOU ♥ ♥ ♥ ♥ ♥ Te Adooora Nanda ♥

    ResponderExcluir
    Respostas
    1. Pasme, fiquei mais de duas semanas "trabalhando" nesse novo layout, e ainda faltam algumas coisinhas. rs
      Fico muito feliz que tenha gostado ♥ Obrigada pelo carinho. Beijos ♥-♥

      Excluir
  3. para quem esta começando nesse mundo maravilhoso de blogs, é muito útil essas dicas, um abraço.

    ResponderExcluir
    Respostas
    1. Minha intenção é poder ajudar sempre. <3
      Abraços!

      Excluir
  4. Adorei as dicas, vou tentar fazer no meu blog testa para treinar

    Bjss

    Linda Menina

    ResponderExcluir
    Respostas
    1. Recomendo fazer em um blog de teste, tá? É sempre melhor! :D
      Beijos <3

      Excluir
  5. Oi Nanda!
    Estou amando esta sua série de tutoriais, me ajudaram demais!!!
    Sempre vou voltar para conseguir personalizar meu blog ;)

    Ah, seu layout tá lindo! Parabéns e sucesso!!!

    Bjokas da Vaci :*

    papodeesmaltebyvacieni.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Fico feliz que esteja gostando, qualquer dúvida é só deixar nos comentários ou mandar um e-mail, ta?

      Obrigada ♥ Sucesso pra nós ♥ Beijos

      Excluir
    2. Opa!
      Qualquer dúvida eu recorro a você sim ;)
      Obrigada!
      Bjokas da Vaci :*

      Excluir

- Os comentários são de responsabilidade de seus respectivos autores!
- Não são permitidos links que redirecionam diretamente para um post, vídeo ou sorteio. Comente porque gostou e não para se promover. Comentários que contenham esse tipo de link serão removidos.
- Seu comentário é muito importante para o andamento do blog e é um grande incentivo para mim, deixe sua opinião, dica, elogio, critica (com fundamento) ou sugestão.
- Deixe APENAS o link do seu blog para que eu possa conhecer. Comentários cheios de links também serão excluídos.
- Não ofenda nem desrespeite ninguém.
- Deixe a opção "Notifique-me" marcada para ser notificado(a) quando eu responder seu comentário!