Descubra como inserir o Google Tradutor em seu Blog no Blogger

Marcelo Silva abril 07, 2025
Se o seu site atrai público de outras partes do mundo, hoje trago um Tutorial para adicionar o Google Tradutor fixo nas suas páginas do seu site para facilitar o acesso às seus leitores gringos. 

Os navegadores atuais já possuem a tradução embutida, mas eu queria um widget que ficasse visível na tela sem atrapalhar a experiência do usuário. Por isso, ele tem a função de desaparecer quando não está em uso, além de ser mais prático e rápido de acessar, já que está a apenas um clique de distância.  

O Blogger também permite adicionar o Google Tradutor como Widget, mas não fica visível logo de cara no site. 



Usei O Chat-GPT para gerar o código e ir ajustando para aprimorar, Além disso, personalizei o widget com uma imagem logo do "Google Tradutor" e também fiz a seleção manual dos idiomas. 

Dica: Eu selecionei os idiomas de acordo com a recorrência de visitas por país olhando as métricas do Blog, recomendo que você também faça isso. 

Vale mencionar que, era possível personalizar um código diretamente no site do Google Tradutor, mas aparentemente essa opção foi desativada. Pois Tentei seguir o tutorial para instalar, mas não encontrei a funcionalidade disponível.  

Abaixo, segue o código completo do Widget para copiar:

  
<!-- Widget do Tradutor Google -->
<div id="google-translate-widget">
  <div id="google-translate-header">
    <img id="google-translate-image" 
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVGuyDsQyAgOdN-qQ4ufAk4MiYmALuzvdTMOo-jUT2F-RPcNeQ_Vsolq0_kn4vvlqNZ-VqMbr6eqfdhbkRTfqLOHTEOb2laorRD7YVW4LtpZoWG2-ZV4zjB80okz5hGsfX6l2zTMmrEcKA320XXNQ5MoROXVo1xcrVFwDtMuKObaNTivZmZDc1wAqouVq/s467/Picsart_25-01-08_20-59-39-325.jpg" 
    alt="Google Tradutor" 
    style="width: 100%; height: auto; display: block;" />
  </div>
  
  <!-- Exposição do Tradutor diretamente -->
  <div id="google_translate_element"></div>
</div>

<!-- Estilos do Widget -->
<style>
  #google-translate-widget {
    position: fixed;
    top: 20px; /* Posiciona o widget mais próximo do topo */
    right: 10px;
    z-index: 9999;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    width: 80px; /* Largura ajustada */
    transition: top 0.3s ease-in-out; /* Suavização no movimento */
  }

  #google-translate-header img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    cursor: pointer;
    border-bottom: 1px solid #ccc; /* Separação visual entre imagem e conteúdo */
  }

  #google_translate_element {
    padding: 10px;
  }
</style>

<!-- Script do Tradutor Google -->
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement(
      { 
        pageLanguage: 'pt', 
        includedLanguages: 'en,hi,zh-CN,es,fr,de,bn,ru,pt,nl,ar,ms,zh-TW,tr,ca,gl,eu,it,id,he,ja,ko,vi,fil,th,pl,pt-PT,haw,zu,af,gu', 
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE 
      },
      'google_translate_element'
    );
  }

  (function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  })();

  document.addEventListener("DOMContentLoaded", function () {
    const widget = document.getElementById("google-translate-widget");
    let lastScrollTop = 0;
    window.addEventListener("scroll", function () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      if (scrollTop > lastScrollTop) {
        widget.style.top = "-100px";
      } else {
        widget.style.top = "47px";
      }
      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
    });
  });
</script>

Para adicionar o widget ao Blogger, siga esses passos simples:

Acesse o painel do Blogger: Faça login na sua conta do Blogger (blogger.com) e selecione o blog onde você quer adicionar o widget.

Vá para o menu "Layout": No menu à esquerda, clique em "Layout". Isso abrirá uma interface visual onde você pode gerenciar as áreas do seu blog, como a barra lateral, cabeçalho ou rodapé.






Escolha onde adicionar o widget: Na seção de "Layout", localize a área onde deseja inserir o widget (por exemplo, "Barra Lateral" ou "Rodapé"). Clique no link "Adicionar um Gadget" (geralmente aparece como um "+") nessa área.




Selecione o tipo de widget: Uma janela pop-up será exibida com uma lista de gadgets disponíveis. O Blogger oferece opções padrão como "Lista de Links", "HTML/JavaScript", "Imagem", "Texto", entre outros. Escolha HTML/JavaScript:



Configure o widget: Após selecionar o gadget, insira um título (se desejar) e adicione o conteúdo. Por exemplo:

Salve as alterações: Clique em "Salvar" na janela do gadget. Depois, na página de "Layout", clique em "Salvar Organização" (botão no canto inferior direito) para aplicar as mudanças ao blog.




Visualize o blog: Abra seu blog para verificar se o widget aparece corretamente. Se precisar ajustar, volte ao "Layout" e edite o gadget.

Pronto! Seu widget agora deve estar funcionando no Blogger. 

Esta será a aparência final do widget em seu site, posicionado no canto superior direito: 




Obs: No WordPress, você pode fazer isso usando o elementor, existe tutoriais no YouTube ensinando. 


Nota: Caso preferir você pode mudar a posição do widget na tela, basta solicitar ao Ia para fazer isso, caso você tenha conhecimento mais avançado em html, você mesmo pode fazer isso, faça seus testes. 


Por que usar o Google Tradutor no seu site? 

Segue algumas uma lista de Vantagens de Ter o Google Tradutor em seu site:

Incorporar o Google Tradutor em um site oferece diversas vantagens significativas, especialmente em um mundo cada vez mais globalizado e conectado. Confira os principais benefícios:

1. Aumenta o Alcance do Público

Com o Google Tradutor, seu site pode ser acessado por pessoas de diferentes países e idiomas, eliminando a barreira linguística. Isso amplia seu público-alvo e aumenta as chances de atrair visitantes internacionais.

2. Melhora a Experiência do Usuário

Visitar um site em um idioma desconhecido pode afastar potenciais clientes ou leitores. O tradutor automático permite que os usuários leiam o conteúdo em sua língua nativa, tornando a navegação mais confortável e incentivando maior tempo de permanência no site.

3. Facilita a Acessibilidade

Além de beneficiar usuários internacionais, o Google Tradutor também auxilia pessoas que têm dificuldade em outros idiomas, como estudantes, pesquisadores ou turistas, garantindo que seu conteúdo seja acessível a um público mais diversificado.

4. Não Requer Tradução Manual

Traduzir um site manualmente pode ser caro e demorado. O Google Tradutor oferece uma solução rápida e gratuita (ou de baixo custo, dependendo da versão utilizada), economizando tempo e recursos.

5. Benefícios para SEO

Embora a tradução automática não substitua uma otimização profissional para SEO em outros idiomas, ela pode ajudar a melhorar o tráfego orgânico, pois usuários de diferentes países encontrarão seu conteúdo mais facilmente.

6. Integração Simples

Adicionar o Google Tradutor ao site é um processo rápido e fácil, podendo ser feito por meio de um widget ou plugin, sem a necessidade de conhecimentos avançados em programação.

Conclusão

Ter o Google Tradutor no site é uma estratégia eficaz para expandir seu alcance, melhorar a experiência do usuário e aumentar a acessibilidade, tudo isso com baixo custo e facilidade de implementação. Se o seu objetivo é conectar-se com um público global, essa ferramenta é um recurso indispensável.

Quer mais dicas sobre como melhorar a presença digital do seu site? Fique atento às nossas próximas publicações! 🌍💡


E Entre em meu canal no Telegram para saber tudo em primeira mão! Clique aqui


Se você precisar saber os detalhes técnicas, segue as especificações do código:

Funções no JavaScript:

  1. googleTranslateElementInit()
    • Localização: Dentro do <script type="text/javascript">.
    • Descrição: Inicializa o elemento de tradução do Google Tradutor. Cria uma instância do google.translate.TranslateElement com configurações específicas, como:
      • pageLanguage: 'pt': Define o idioma padrão da página como português.
      • includedLanguages: Lista de idiomas suportados para tradução (ex.: inglês, hindi, chinês simplificado, espanhol, etc.).
      • layout: google.translate.TranslateElement.InlineLayout.SIMPLE: Define o layout simples para o tradutor.
    • Parâmetro: O ID 'google_translate_element', que é onde o tradutor será renderizado no HTML.
  2. Função anônima (function() { ... })()
    • Localização: Logo após a definição de googleTranslateElementInit.
    • Descrição: Uma IIFE (Immediately Invoked Function Expression) que carrega dinamicamente o script do Google Tradutor (translate_a/element.js) de forma assíncrona. Insere o script antes do primeiro elemento <script> encontrado no documento.
    • Propósito: Garante que o Google Tradutor seja carregado e inicializado assim que o script é executado.
  3. Função anônima no document.addEventListener("DOMContentLoaded", function () { ... })
    • Localização: Dentro do segundo bloco <script>.
    • Descrição: Executada quando o DOM da página é completamente carregado. Configura o comportamento do widget para acompanhar a rolagem da página.
    • Subfunção interna:
      • window.addEventListener("scroll", function () { ... })
        • Descrição: Monitora o evento de rolagem da página e ajusta a posição vertical do widget (#google-translate-widget) com base na direção da rolagem:
          • Se rolar para baixo (scrollTop > lastScrollTop), o widget é movido para fora da tela (top: "-100px").
          • Se rolar para cima, o widget retorna à posição original (top: "20px").
        • Variáveis: Usa lastScrollTop para rastrear a posição anterior do scroll e evitar cálculos incorretos.

Observações:

  • Funções implícitas: O código depende de APIs externas do Google Tradutor (como google.translate.TranslateElement), mas essas funções não são definidas explicitamente no código fornecido, pois são carregadas pelo script externo translate_a/element.js.
  • Ausência de outras funções explícitas: Não há outras funções nomeadas ou anônimas além das listadas acima.


O que você achou? 

Marcelo Silva

Postado por Marcelo Silva