Série Fazendo meu layout- ajustes finais - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Série Fazendo meu layout- ajustes finais

Publicado em 08/07/2019

Série Fazendo meu layout- ajustes finais
Conforme eu disse na postagem anterior à esta na Série Fazendo meu layout vou te mostrar hoje como criar a conta no Google Analytics para seu blog (caso ainda não a tenha criado), adicionar o código de acompanhamento ao blog e finalizar a série com os ajustes finais ao tema.

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!

Vou começar com a criação da conta Google Analytics e a colocação do código de acompanhamento no blog.
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:
Clique no botão Inscrever-se.
Abrirá a página de cadastro:
Preencha com os dados pedidos, assim:
  • 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;
Antes, porém, aparecerá a janela com os termos de uso do serviço.
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


Agora vamos realizar os últimos ajustes ao tema!
Abra a página com os códigos que vamos usar hoje:


Copiar os códigos


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


Agora, para finalizar de fato a Série Fazendo meu layout deixo o arquivo .xml do Tema Fernanda, grátis para baixar.
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:

Fazer o download


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!





8 comentários

  1. Meu blog (https://bibliaeoracaoalimentosdaalma.blogspot.com/?) ainda não está aparecendo na pesquisa do Google e já configurei tudo... O que devo fazer? Por favor e obrigada

    ResponderExcluir
    Respostas
    1. Demora mesmo. Agora é produzir bons conteúdos, com bom SEO, divulgar bem e dar tempo ao tempo.

      Excluir
  2. Ok. Obrigao que é SEO?


    OUTRA DÚVIDA: QUANDO EU COPIO O LINK DA IMAGEM /POST SAI ASSIM: https://1.bp.blogspot.com/-J56WUBc1CjI/XSyu6hy4xUI/AAAAAAAACAQ/hqXZVoXKRx8Kx6EKRawJCWMF9UsmqxyWQCLcBGAs/s1600/20190426_153558_0000.png e quando compartilhopelo WhatsApp sai cert : https://bibliaeoracaoalimentosdaalma.blogspot.com/2019/07/oracao-de-terca-feira.html... Por favor como faço pra copiar o link correto, ou seja com nome do blog?
    Desde já agradeço pela atenção.

    ResponderExcluir
    Respostas
    1. Seo são técnicas de otimização, aqui no blog tem vários posts, pode procurar por seo ou otimização.
      O endereço do post vc copia do navegador e não da imagem.
      Entre no post que deseja compartilhar e copie a url que aparece no navegador, ou use os botões de compartilhar.

      Excluir
  3. Você é ótima. Que Deus te abençõe 😍

    ResponderExcluir
  4. Olá Elaine tudo bem? Não consegui corrigir as heading tags, pois deu erro, é especifico para o Tema Fernanda, eu uso o Tema Amanda e consegui inserir metatags e consegui fazer os tbm os ajustes finais que colocam o Twitter logo no começo, fiz o Analytics e quero aplicar o máximo das suas dicas no meu Blog.

    ResponderExcluir
    Respostas
    1. Os códigos disponibilizados nessa série servem especificamente para o Tema Fernanda, conforme explico nos vídeos.
      Para obter o mesmo resultado em outros temas como o amanda siga os tutoriais originais linkados no post.
      No caso das heading tags o tutorial original está linkado no post desta série, ele é que deve ser seguido em temas outros que não o desta série.
      Na faq de cada tema eu também listo o que adicionei ou não, o que corrigi, etc...
      bjsss

      Excluir
    2. Elaine obrigada pela resposta, obrigada pelo trabalho excelente, me ajudou e muito viu, vou procurar o código e fazer as alterações necessárias. Bjs e abraços.

      Excluir

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.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
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…