10 Dicas de SEO que Pouca Gente Sabe

Para adicionar o Preload no seu blog do Blogger, siga os passos abaixo:

Acesse o painel do Blogger e faça login na sua conta.

No menu lateral esquerdo, clique em "Tema" e, em seguida, clique no botão "Editar HTML".

Na seção do código HTML, role a página até encontrar uma tag </body>. Você pode usar o atalho "Ctrl + F" (ou "Cmd + F" no Mac) para pesquisar rapidamente pela tag.

Cole o código abaixo logo acima da tag </body>:

 
<style>
  .pldW {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 990;
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
  }

  .pldW.flat {
    background: #fffdfc;
  }

  .pldW.fadeOut {
    animation: loadFadeOut 1s backwards;
  }

  .pldW.hidden {
    display: none;
  }

  .pldW .crcl {
    width: 70px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -15px;
    justify-content: center;
    align-items: center;
  }

  .crcl .r,
  .crcl .g,
  .crcl .y,
  .crcl .b {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin: 2px;
  }

  .crcl .r {
    background-color: #ea4335;
    animation: movingUp 0.5s infinite alternate;
  }

  .crcl .b {
    background-color: #4285f4;
    animation: movingUp 0.5s 0.2s infinite alternate;
  }

  .crcl .g {
    background-color: #34a853;
    animation: movingUp 0.5s 0.5s infinite alternate;
  }

  .crcl .y {
    background-color: #fbbc05;
    animation: movingUp 0.5s 0.7s infinite alternate;
  }

  .darkMode .pldW {
    background: rgba(0, 0, 0, 0.1);
  }

  .darkMode .pldW.flat {
    background: #1e1e1e;
  }

  @keyframes loadFadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes movingUp {
    from {
      top: 0px;
    }
    to {
      top: -15px;
    }
  }
</style>

<b:if cond="data:view.isSinglePost">
  <div class="pldW flat">
    <div class="crcl">
      <div class="r"></div>
      <div class="b"></div>
      <div class="g"></div>
      <div class="y"></div>
    </div>
  </div>
  <script>
    /*<![CDATA[*/
    document.addEventListener('DOMContentLoaded', function() {
      setTimeout(function() {
        document.querySelector('.pldW').classList.add('fadeOut');
      }, 2000);
      setTimeout(function() {
        document.querySelector('.pldW').classList.add('hidden');
      }, 2850);
    });
    /*]]>*/
  </script>
</b:if>

	

Clique no botão "Salvar tema" para aplicar as alterações.

Agora, o código do preloader será adicionado ao seu blog do Blogger, e ele aparecerá nas postagens individuai. O pré-carregador será exibido quando um visitante acessar uma postagem, e desaparecerá gradualmente após um curto período de tempo (cerca de 2,85 segundos neste caso).

Certifique-se de testar o seu blog após adicionar o pré-carregador para garantir que ele esteja funcionando conforme o esperado e não cause problemas no layout ou desempenho do site.

DEMOSTRAÇÃO

Qual é a Importancia?

A importância do pré-carregamento (indicador de carregamento) em um blog está diretamente relacionada à experiência do usuário. Veja alguns motivos pelos quais o uso de um preload é relevante:

Melhora a Percepção de Velocidade:
O pré-carregamento mostra visualmente aos usuários que o conteúdo está sendo carregado. Mesmo que o carregamento real da página leve um pouco de tempo, o indicador de carregamento dá uma sensação de progresso e faz com que a página atraia mais responsiva, o que melhora a percepção da velocidade do site.

Reduz a Sensação de Espera:
Quando os usuários acessam um site e precisam esperar sem qualquer indicação de progresso, a experiência pode ser frustrante e fazer com que eles abandonem a página antes mesmo de ela ser totalmente carregada. O preload reduz essa sensação de espera, tornando a espera mais tolerável. 

  Melhora a Experiência de Navegação:
Uma barra de carregamento ou outro indicador de progresso fornece feedback visual aos usuários sobre o carregamento da página. Isso cria uma experiência mais interativa e envolvente, permitindo que os visitantes saibam que a página está carregando e que podem interagir com o conteúdo em breve.

Reduz a Taxa de Rejeiçã:
A taxa de rejeição é a porcentagem de visitantes que deixam o site sem interagir com outras páginas. Um pré-carregamento pode ajudar a reduzir a taxa de rejeição, pois dá aos visitantes um incentivo para aguardar o carregamento completo da página, aumentando a probabilidade de eles explorarem mais conteúdo.

Transmite Profissionalismo:
Ter um pré-carregamento bem projetado e funcional transmite uma imagem de profissionalismo e cuidado com a experiência do usuário. Isso pode gerar confiança nos visitantes e incentivá-los a retornar ao seu blog no futuro.

Compatibilidade com Conexões Lentas:
Em algumas situações, como em conexões de internet mais lentas ou dispositivos móveis com conexões instáveis, o preload pode ser especialmente útil para que os usuários saibam que a página está carregando, mesmo que a velocidade seja mais baixa. Lembrando que a implementação de um preload deve ser cuidadosa para não afetar o desempenho do site. Um preload simples e bem projetado pode ser uma adição valiosa ao seu blog, tornando a experiência do usuário mais positiva e agradável.

Ir para o Link