Adicionando outros idiomas ao seu site – Google Tradutor

Adicionando outros idiomas ao seu site  – Google Tradutor

Olá, um post rapidinho para inserir uma barra de tradução de idioma no seu site/blog.

Sabemos que dá para inserir o google tradutor no site e que é razoavelmente funcional.
Para incluir em seu site é bem simples, basta inserir o código abaixo em seu HTML;

<div id="google_translate_element"></div>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>

O problema é que fica meio feio, veja abaixo:

google tradutor padrão

Seria legal se não ficasse assim tão “cru”, então o que vamos fazer é:
– Ocultar essa combo padrão do google tradutor.
– Inserir a bandeira de cada idioma disponível no site.

Para ocultar a combo padrão, nós só precisamos dar um display:none em alguns nos elementos, são eles:


#google_translate_element,
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover {
 display:none !important;
}

Agora que ocultamos a coisa feia, precisamos utilizar alguns recursos da combo que foi ocultada… pois é, se não está sendo exibida a combo, como poderemos alterar o idioma? Isso mesmo, javascript, você tá ficando esperto ;D

Essas são as funções que precisamos para disparar eventos do google translator.

function ChangeLang(a) {
 var b, elemento = "";
 if (document.createEvent) {
 var c = document.createEvent("HTMLEvents");
 c.initEvent("click", true, true)
 }
 if (a == 'pt') {
 elemento = $(".goog-te-banner-frame:eq(0)").contents().find("button[id*='restore']")
 } else {
 switch (a) {
 case 'de':
 b = "alem";
 break;
 case 'es':
 b = "espanhol";
 break;
 case 'fr':
 b = "fran";
 break;
 case 'en':
 b = "ing";
 break;
 case 'it':
 b = "italiano";
 break
 }
 elemento = $(".goog-te-menu-frame:eq(0)").contents().find("span:contains('" + b + "')");
 }
 if (elemento.length > 0) {
 if (document.createEvent) {
 elemento[0].dispatchEvent(c)
 } else {
 elemento[0].click()
 }
 }
}
function googleTranslateElementInit() {
 new google.translate.TranslateElement({
 pageLanguage: 'pt',
 autoDisplay: false,
 includedLanguages: 'de,es,fr,en,it',
 layout: google.translate.TranslateElement.InlineLayout.SIMPLE
 },
 'google_translate_element');
}

Agora que já temos as funções para disparar os eventos, vamos criar o HTML com nossas bandeirinhas.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Translate</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/tradutor.js"></script>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="main">
<div id="google_translate_element"></div>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<ul class="nav">
<li><a href="javascript:;" class="pt" onclick="ChangeLang('pt')" title="Traduzir para portugu&ecirc;s"><img src="images/pt.gif" /></a></li>
<li><a href="javascript:;" class="en" onclick="ChangeLang('en')" title="Translate to English"><img src="images/en.gif"  /></a></li>
<li><a href="javascript:;" class="es" onclick="ChangeLang('es')" title="Traducir al espa&ntilde;ol"><img src="images/es.gif"  /></a></li>
<li><a href="javascript:;" class="it" onclick="ChangeLang('it')" title="Traduci in italiano"><img src="images/it.png"  /></a></li>
<li><a href="javascript:;" class="de" onclick="ChangeLang('de')" title="&Uuml;bersetzen in Deutsch"><img src="images/al.png"  /></a></li>
<li><a href="javascript:;" class="fr" onclick="ChangeLang('fr')" title="Traduire en fran&ccedil;ais"><img src="images/fr.png"  /></a></li>
</ul>
<p>Esse texto e qualquer outro contido no site serão traduzidos!</p>
</div>
</body>
</html>

Pronto agora você tem uma “barrinha” mais atraente, é claro que não é uma coisa que se diga “que linda essa barrinha” mas está melhor.



A idéia agora é você alterar o CSS para organizar à sua maneira as bandeiras ou seja lá o que você quiser colocar, desde que chame a function que criamos.

Então,
Até a próxima
Until next time
Hasta la próxima
Fino alla prossima volta
Bis zum nächsten Mal
Jusqu’à la prochaine fois

Demo e Download


Comments

  1. Responder

  2. By Gabriel Cunha Moroni

    Responder

    • Responder

  3. By Douglas Rodrigues

    Responder

    • Responder

  4. By David

    Responder

    • Responder

  5. Responder

  6. Responder

    • Responder

  7. By Fernando

    Responder

    • Responder

  8. By Carlos

    Responder

    • Responder

  9. By matheus

    Responder

  10. By Tiago Held

    Responder

  11. By Sander

    Responder

    • Responder

  12. By Sander

    Responder

    • Responder

      • By Sander

        Responder

  13. Responder

  14. Responder

  15. By tonny

    Responder

    • Responder

      • Responder

  16. Responder

    • Responder

      • Responder

  17. Responder

  18. By Marciano Franco

    Responder

  19. Responder

    • By matheus

      Responder

  20. By paulo robson

    Responder

  21. Responder

  22. By Rodolpho

    Responder

  23. By Alex Beltrão

    Responder

  24. By celso

    Responder

  25. Responder

    • By Thiago Soares Maneschy

      Responder

    • By milton

      Responder

  26. By Rodrigo Miranda

    Responder

  27. By Danielle

    Responder

  28. Responder

  29. By Raphael

    Responder

  30. Responder

  31. Responder

    • Responder

  32. Responder

  33. Responder

  34. Responder

  35. By William

    Responder

  36. Responder

  37. By alexandre

    Responder

  38. By walter santos

    Responder

    • By walter

      Responder

  39. By Sah

    Responder

  40. Responder

  41. Responder

  42. By walter

    Responder

  43. Responder

  44. By Joan

    Responder

  45. By Marcelo

    Responder

Perguntas duplicadas ou cujo a resposta esteja nos comentários serão ignoradas.
Comentários com códigos serão ignorados(para isso, use o pastebin.com e informe aqui o link).
Faça sua pergunta e "aguarde" ser aprovada para aparecer no blog.
Aguarde sua resposta, ela não é em tempo real, tenha paciência!

Deixe seu comentário

%d blogueiros gostam disto: