Também vou deixar, ao final deste tutorial o arquivo do Tema Fernanda para você baixar e usar em seu blog caso não queira fazer a série mas queira usar o Tema Fernanda.
O arquivo que disponibilizo ao final é exatamente como o Tema Fernanda está agora. Troque o cabeçalho, edite, etc... Só não retire os créditos caso baixe-o.
Vamos lá?
Google Analytics- criar a conta e obter o ID de acompanhamento
Para não restar pedra sobre pedra nenhuma dúvida eu gravei esta última etapa em vídeo.
Aperta o play!
Caso você já tenha uma conta Analytics pode pular essa etapa. Aí só precisará adicionar o ID de acompanhamento ao blog.
Para criar a conta faça assim:
Clique no link: https://analytics.google.com/analytics/web/provision/?authuser=1#/provision
Na página que abrir aparecerá isso:
Abrirá a página de cadastro:
- Nome da conta: é o nome de exibição, sugiro o nome de seu blog;
- Nome do website: repita o nome de seu blog;
- URL do website: coloque o endereço de seu blog. Se for https selecione essa opção;
- Escolha a categoria na qual seu blog melhor se encaixa;
- Selecione o país e seu fuso horário (isso é importante);
- Deixe marcadas todas as caixinhas com a indicação Recomendável;
- Aí clique em Ver ID de acompanhamento;
Selecione seu idioma, leia os termos e ao final marque as 2 caixinhas para aceitar os termos.
Finalize clicando em Aceitar.
Aparecerá a página com seu código de acompanhamento.
O que nos importa é o ID de acompanhamento, algo assim:
UA-143387320-1
Agora vá ao painel administrativo de seu blog, este que você acabou de gerar o ID e clique na aba Configurações.
Aí selecione a opção Outro.
Role a página e no campo Google Analytics cole o seu ID de acompanhamento.
Está feito.
Quando houver tráfego o Google Analytics exibirão os relatórios para você, na página https://analytics.google.com/analytics/
Nota: nos templates nativos do Blogger, e nos personalizados com base nos templates nativos não é preciso adicionar o código de acompanhamento completo porque já existe, no código-fonte dos templates a tag do Analytics.
Essa:
<b:include data='blog' name='google-analytics'/>
Pode procurar, ela está em seu código-fonte. No caso do Tema Fernanda eu a deixei exatamente acima da tag </head>.
Caso não esteja basta adiciona-la acima da tag de fechamento </head> e salvar.
Série Fazendo meu layout- ajustes finais
Abra a página com os códigos que vamos usar hoje:
Acesse o painel administrativo do blog onde estamos trabalhando e clique em Tema.
Aí clique em Editar HTML.
Vamos começar centralizando elementos de página nativos, como o Tradutor e as Estatísticas.
Seguirei esse tutorial:
Não tem erro, é só identificar o que deseja centralizar, aplicar a div e salvar.
Veja o vídeo que adicionei no começo do post, para não restar dúvidas, tá?
Agora vamos eliminar códigos desnecessários.
Na caixa do código-fonte tecle Ctrl+F e na barra de busca que expandir digite /* Tabs
Selecione todo o trecho e apague.
Sim, pode apagar, esse código não serve para nada pois se refere ao menu de páginas nativo do tema, e nós não o usamos.
Então código desnecessário só serve para pesar o carregamento.
Também localize e apague o trecho que começa com /* Mobile e termina com border-$startSide: 1px solid $(tabs.border.color);
Esse trecho não nos serve porque ele é relativo a exibição do tema em celulares quando o tema não é responsivo.
Como nós aplicamos a responsividade não usaremos a versão mobile friendly nativa do Blogger.
Então o trecho todo é desnecessário.
Agora selecione de <Group description="Tabs Text" selector=".tabs-inner .widget li a"> até <Variable name="tabs.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="#222222"/>
</Group> e apague.
Essas variáveis não estão sendo usadas, então podemos deleta-las sem dó.
São códigos que só ocupam espaço, se não os estamos usando não faz sentido deixa-los lá.
Nota: deixei todos os trechos que precisam ser localizados e deletados na página com os códigos, tá?
Todos esses trechos que deletamos ajudam a economizar tempo de carregamento do tema.
Veja o resultado do Tema Fernanda no Page Speed Insights
Importante:
Muito possivelmente seus resultados podem ser outros, mesmo tendo feito toda a série.
E no blog de testes o resultado também pode diferir do resultado no blog real, mesmo usando o mesmíssimo tema e os mesmos gadgets.
Explico: tamanhos dos posts, quantidade das imagens de cada post, quantidade de posts por página, horário do teste, velocidade da internet no momento do teste, e mais dezenas de fatores podem interferir nesse resultado.
Não se preocupe tanto, é normal.
E lembre-se que cada pequeno elemento que adicionamos ao blog, em especial imagens, eleva o tempo de carregamento.
Sim, é uma luta diária reduzir esse tempo. Reduzir um milésimo de segundo dá trabalho, eu que o diga :)
Baixar o Tema Fernanda
O tema está pronto, exatamente como fizemos na série.
Para baixar basta clicar no botão, o download é automático.
Caso baixe atente apenas aos termos de uso, ok?
Termos de uso dos templates gratuitos by Elaine Gaspareto
Calma que não tem regra demais não, são apenas 3, porém extremamente importantes:
1- Todos os templates que eu disponibilizar devem ser baixados apenas daqui do blog.
Não compartilhe o link de download em seu blog. Indique o post onde eles estiverem caso queira divulgar.
2- A principal exigência que faço: em nenhuma circunstância, de jeito nenhum, jamais, altere os meus créditos presentes no template. Mesmo que você mude o plano de fundo, as cores, o logo e o cabeçalho, ainda assim os créditos devem ser mantidos. Sem exceção. Ok?
3- Para finalizar: jamais use meus temas para vender. Não use como base, não venda o template e nem partes dele.
Acredite, eu saberei, então por favor não faça.
Combinado?
Baixe o Tema Fernanda:
E terminamos!
A Série Fazendo meu layout está completa, o tema que desenvolvemos está disponível para baixar, todos os tutoriais possuem vídeo-aula e se você começar a série e tiver alguma dúvida ou pergunta que não esteja contemplada nos posts diga nos comentários do tutorial em questão e eu ajudo assim que possível.
Muito obrigada por ter acompanhado a série, obrigada pela companhia!
A gente se vê em breve, tenho a intenção de fazer outra série em breve.
Enjoy!
