Série Como personalizar um blog? Aula 1: a estrutura do template

em 21 de janeiro de 2016


Quando pensamos em personalizar um blog a gente pensa, imediatamente, na aparência dele, correto?
Isso, de fato, é muito importante e é por aí que todo mundo começa, pela aparência.
Trocar cores, ajustar larguras, mudar fontes, etc.

Isso tudo é necessário mas, diferentemente da maioria (#diferentona) eu quero começar pela parte mais chata e mais complicada.
Não, não é pra te desanimar, ao contrário!
É para que você entenda o que vamos fazer, e não seja apenas uma série de copiar e colar códigos.
Isso é melhor, é mais profundo: vamos olhar o blog por dentro e entender como cada coisa funciona.

Claro que vou ser bem simples, nada muito complexo ou de difícil entendimento.
Algo simples mas que você precisa saber para personalizar seu blog. Para entender de fato o que estamos fazendo.
Seria mais fácil dar códigos prontos?
Sim.
Mas, à longo prazo isso não adianta se a gente não entende o que está fazendo.
Vamos aprender e não apenas copiar e colar.
Vamos começar?


Um blog de testes, por favor


E por onde a gente começa?
Começamos pela criação do blog. Caso você já tenha seu blog recomendo vivamente que crie outro agora, para ser seu blog de testes.
Repito: não faça nada em seu blog oficial, teste antes em um blog de testes.
Confie em mim, que no começo perdeu muitos templates,  e evite dores de cabeça.

Para criar um blog novo, caso você não saiba como fazer,  veja esta vídeo-aula, que ensina desde a criação da conta até a criação do blog propriamente dito:


Aproveite e se inscreva no canal do blog. Em breve teremos muitas video-aulas lá!



Entendendo cada parte de seu template


Caso já tenha tenha criado seu blog de testes, vamos adiante.
Um template do Blogger sempre terá essa estrutura básica pois trata-se de um documento .xml.
A estrutura será sempre assim:

<html>
<head>
cabeçalho: aqui está contido o estilo da página - CSS
<head/>
<body>
corpo - aqui está contida a estrutura da página, seus elementos.
</body>
</html>

Quer confirmar?
Vá ao seu blog de testes, clique na aba Modelo e a seguir clique em Editar HTML.
Vai abrir o código fonte de seu blog.
Note que ele começa com essas linhas:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>

Elas são importantes pois "ensinam" como o navegador deve ler o código.
Imediatamente após essas linhas começa o documento html, assim:
<html

Aí a forma pode mudar, nos templates nativos do Blogger em geral é assim:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'

Pode mudar algum detalhe mas lembre: sempre vai começar com <html .
Agora role a página do código fonte até o final.
Você verá o fechamento do documento .xml, assim:
</html>

Então, lembre: sempre abre com <html e sempre fecha com </html>. Sempre.
Dentro dessas tags de abertura e fechamento está tudo que compõe seu blog.
Tudo, tudo mesmo, mas dividido em "gavetas".
Então, para reforçar você precisa guardar que está assim dividido:

<html>


<head>
Aqui está contida toda a aparência de seu blog, a folha de estilos ou CSS
</head>


<body>
Aqui está contida a estrutura de seu blog, os códigos das postagens e dos elementos de página
</body>


</html>


Observe que cada tag tem uma abertura e um fechamento.
O não-fechamento de qualquer tag resulta em rejeição do documento.
Agora vamos conhecer o que tem dentro de cada "gavetinha" dessas.

Head, a "cabeça" de seu código

A tag <head> engloba toda a aparência de seu blog.
A folha de estilos, ou CSS, que significa Cascading Style Sheets, define coisas como cor e tipo de fontes, cor ou imagem de fundo, cores dos elementos de página, tipografia em geral, e tudo o mais que define a aparência do blog.
É na folha de estilos, ou CSS que a gente define tudo.

CSS é uma sigla em inglês para Cascading Style Sheet, que foi traduzido para folha de estilo em cascata, é um mecanismo para adicionar estilo (fontes, cores, etc) para documentos web.
Regra CSS é uma declaração que segue uma linguagem própria e que define como será aplicado estilo a um ou mais elementos HTML.
Um conjunto de regras CSS formam uma Folha de Estilos.

Essa folha de estilos começa, dentro da tag <head>, com essa marcação:
<b:skin><![CDATA[/*
E termina com essa marcação:
]]></b:skin>

Então, tudo relativo à aparência do blog estará dentro dessas linhas, sempre.

Agora, vá ao blog de testes de novo e localize essa tag de abertura: <head>
Preste atenção, eu disse de abertura, então não tem o sinal /
Para localizar tecle Ctrl+F dentro da caixa de código.
Na barra de busca que expandir digite o termo procurado e tecle Enter.
Vai aparecer. É aí que começa a mágica!
Agora, dentro da caixa de pesquisa, digite </head>, com a barrinha de fechamento.
Tecle Enter.
Este é o fechamento da "gavetinha" que comporta a folha de estilos, ou CSS, de seu blog.

Body, o "corpo' de seu código

Após o fechamento da tag </head> você verá a abertura da tag <body>.
Em alguns templates ela é aberta assim, mas nos nativos do Blogger ela é aberta assim, com essa marcação:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

O complemento é importante pois é ele que permite que a gente tenha a versão para celular (mobile) nos templates Designer de modelo do Blogger.

Essa tag <body> é fechada assim:
</body>

Pode digitar aí na barra de busca de seu código fonte, você vai achar.
Dentro dessa marcação <body> </body> está contida toda a estrutura de seu blog.
Tudo, os posts, os comentários, todos os elementos de página, as colunas, o rodapé, toda a estrutura.
É o "corpo" de seu template.
Sim, tem muito código aí mas devagar e com paciência você verá que tudo faz sentido e é mais simples do que parece.

Fiz um gráfico colorido pra você entender:



Pronto, primeira aula completa.
Não vou misturar assuntos para não ficar impossível de acompanhar, então vamos devagar, tá?
Nessa primeira semana não tem tarefa de casa (tia elaine é boazinha), mas fica a minha sugestão: releia essa primeira aula até assimilar.
Semana que vem a gente se fala.
Tô te esperando, tá?

Para não perder nenhum post da série você pode:

→ Seguir o blog via gadget Seguidores: basta clicar em Participar deste site ali na lateral do blog e concluir o processo;

→ Pode curtir nossa fanpage: todos os posts têm seu link enviados pra lá no momento em que são postados. Basta clicar em Curtir!


→ Cadastre seu email e receba a atualização direto nele, assim que for postada.
Digite seu endereço de email:



Veja todos os posts desta série:

  1. Série como personalizar um blog- apresentação do projeto
  2. Aula 1: a estrutura do template
  3. Aula 2: tamanho, fontes e resolução de tela


Alguém que escreve. Especialista em si mesma. Leitora voraz. Blogueira apaixonada. Propriedade (atualmente) de 3 cachorras e um cachorrinho muito levado. Casada desde 1995 com o mesmo marido. Feliz.

19 comentários , comente também!

  1. Aula maravilhosa, bem explicada! de volta, graças à Deus, tudo certo com Kiko! bs, chica

    ResponderExcluir
    Respostas
    1. Bem-vinda, querida!
      Senti sua falta.
      Tá tudo bem agora?
      beijossss

      Excluir
  2. Olá, venho aqui lhe fazer um convite para participar do Só Links - agregador links.
    Cadastre-se conosco e aumente consideravelmente seu tráfego. Trazendo muito mais visitas e rendimentos para seu blog/site.
    Cadastre-se e boa sorte!
    http://solinks.com.br/

    ResponderExcluir
  3. Muito boas dicas de HTML para quem é blogger!!! ehehe
    Um beijinho grande, linda! :)
    _________________
    www.focusonmeblog.com

    ResponderExcluir
    Respostas
    1. Oi!
      Espero que a série ajude.
      Vai ser longa e trabalhosa mas muito legal!
      biejosss

      Excluir
    2. Oi, procurei uma profissional para um templante novo no meu blog mas não consigo compartilhar no facebook. Não aparece a foto do entrevistado - no link entrevistas. Só a minha. Fiquei insatisfeita e deixei o blog de lado.

      Excluir
  4. Um dia ainda vou fazer meu blog de fotografias com vc.

    ResponderExcluir
  5. Obaaa, estava ansiosa por essa série!!! Vou acompanhar todos! <3

    ResponderExcluir
  6. Oi Elaine,
    Abri uma pasta nos meus favoritos para guardar estas aulinhas e não te encher tanto qdo enrosco por aqui. Obrigada, esta não é uma aula, é um presente.
    Bjs

    ResponderExcluir
    Respostas
    1. rsrsr favoritos é bom, mas sempre que precisar, me grita.
      Não me enche não, de jeito nenhum!!!!
      bjssss

      Excluir
  7. Oi Elaine,
    muito obrigada por nos ajudar tanto.
    Eu nunca pensei que um dia eu fosse conseguir mexer nos códigos do blog, hoje eu nem acho mais um bicho de sete cabeças. Acho até fácil!
    Aproveitando este poste gostaria de te pedir uma ajuda. Eu não me lembro quando foi, mas em uma dessas mexidas para personalizar o meu blog, ele bloqueou a entrada para editar HTML, ele vai até Modelo, mas quando tento entrar pra editar ele não abre. Aparece uma janela com aquela carinha de vírus, eu acho que ao colocar um desses códigos ele foi com algum vírus.
    Se você puder me ajudar ou pelo menos me dar uma luz do que pode ter acontecido, ficarei muito agradecida.
    Beijos

    ResponderExcluir
  8. Confesso que logo nos meus primeiros meses de blog tinha muita dificuldade em mexer com html, achava que era o fim do mundo, mas depois com pratica fui aprendendo (e ainda estou), se tivesse conhecido seu blog antes não teria quebrado minha cabeça, mas foi bom♥
    Amo seu blog♥

    ResponderExcluir
  9. amando as dicas adoro mexer no meu blog beijo e parabéns

    É Tudo Vaidade!

    ResponderExcluir
  10. Essas dicas estão me ajudando muito na criação do meu Blog. Quem puder me ajudar no meu Blog, eu agradeço. Eu falo sobre Educação Financeira. O link é: http://financasescrivani.blogspot.com.br/

    ResponderExcluir
  11. Oi, lendo seu post eu me lembrei de como eu ignorava minhas aulas de html no colégio e me arrependo bastante disso, pois hoje sei o quanto - uma noção mesmo que básica - me faz falta.
    Gostaria de aprender a personalizar os comentários do blog diferenciando os comentários do autor com o dos leitores.
    Estou gostando bastante das aulas.

    Beijinhos violetas ^^
    Lírios & Violetas

    ResponderExcluir
  12. Boas dicas! Comecei o blog mesmo agora, ainda estou a aprender. Hoje vou dedicar-me as tuas aulas :P beijinho

    ResponderExcluir
  13. Menina,que explicação maravilhosa!! Muito obrigada,seria maravilhoso setodas as pessoas tivessem essa paciência

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…