Google Tradutor para Blog com bandeiras

Hospedagem para Blogs

Nem é preciso afirmar o quanto a internet é uma rede glogalizada, o que nos abriga a criar blogs com conteúdos abrangentes e, se não em vários idiomas, que tenha um tradutor ao alcance da vista de seu visitante. Melhor ainda se este tradutor puder ser ativado com um único clique e sinalizado pela bandeira do país daquele idioma. É isso que vamos mostrar aqui nesta dica para blog.

Compre seu E-book: Blogar: Processo de criação de Blogs

Já publicamos outros dois modelos de tradutores aqui para você avaliar qual o melhor para o seu blog:

Esse novo modelo é bem simples de usar, como os anteriores e a grande vantagem dele é que usa as bandeiras como ícones. Basta clicar sobre as bandeiras para ver a página traduzida.

Para usar esse recurso, basta copiar o código que segue. Como é um pouco longo, clique no botão “Abrir Código” para ver as linhas.

<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src=http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800 style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwj4Ab0NaI/AAAAAAAAA14/3H56LPKtijA/German_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj8KhadjI/AAAAAAAAA2A/GNyl8VBie3o/Spain_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkBmKewNI/AAAAAAAAA2Q/43NEAnyNo1I/Dutch_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<br/>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkG0osjzI/AAAAAAAAA2g/_kM2A16R_Ho/Portuguese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkJ6RBJAI/AAAAAAAAA2o/lpsTh893J3k/Japanese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkMouNMKI/AAAAAAAAA2w/L5l6J-Hh8XA/Korean_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Car&hl=en'); return false;"><img alt="Arabic" borde
r="0" align="absbottom" title="Arabic" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
</div>
<font face="Microsoft Sans Serif" color="#c0c0c0" size="1"><em>By <a href="http://www.ferramentasblog.com/">Ferramentas Blog</a></em></font>

Basta adicionar esse código num gadget do tipo “HTML/JavaScript” na sua barra lateral. Salvar e ver o resultado.
Se você não sabe onde adicionar o código HTML acima, leia o artigo “Onde colar código HTML” ou aprofunde mais ainda lendo o Tutorial “Gadgets e Elementos – TUb Ferramentas Parte 4″.

Créditos do modelo: Blogging Tutorial

65 Comentários

  1. Esse código, após ser inserido e salvo, as badeiras aparecem na vertical ao invés se aparecerem conforme exemplo aqui desposto.

    como faço para que no meu blog fique no mesmo formato que se apresenta aqui, no exemplo?

    Bodyboardcapixaba.blogspot.com

    eu retirei e deixei só o que fax a tradução para inglês.

    Responder

  2. Eduardo.

    O espaço ocupado pelas imagens é quantas bandeiras serão em cada linha é determinado pelo espaço, pelo tamanho de largura da sua barra lateral.

    Se ela for estreita, então aparecerão na vertical.

    Responder

  3. Olá Marcos…
    Coloquei mas apresenta a mensagem:

    ‘Um Script da página está provocando a execução lenta do Internet Explorer.
    Se você continuar a execução, seu computador poderá deixar de responder’.

    Será o ‘resumo de postagem automática’ que está interferindo?
    Obrigado…

    Responder

  4. Trompete,

    pode ser que seja, mas é preciso verificar as atualizações do seu navegador.
    Se tiver muitos scripts rodando em seu blog, pode ser que fique lento mesmo.

    Responder

  5. Um dos meus problemas maiores era a tradução, uma vez que entendo pouco de inglês…esta dica me salvou…obrigado cara!

    Responder

  6. Oi, Marcos!
    Eu só retirei algumas bandeiras, mas o meu blog consta como sendo Indonésio para tradução!?
    O que houve?
    E obrigada pela atenção!

    Responder

  7. Ótimo dica, já adicionei no meu blog. Thanks!

    Assim como a Aline comentou, minha tradução também partia do indonésio. Para quem teve o mesmo problema: achei nesta parte [&langpair=id%7], o correto para partir do português é [&langpair=pt%7].

    Responder

  8. Marcos,
    Obrigada,seu blog está fazendo alguns milagres comigo….não precisa dizer que eu não entendo nada desse universo, mas com a sua ajuda consegui botar o tradutor p/ Inglês no meu blog. Esse mais complexo ainda não deu, não sei porque não funcionou…..deve haver uma explicação obvia, mas não p/ mim.
    Mais uma vez muito obrigada e parabéns pelo trabalho supercompetente

    Responder

  9. Muito boa ferramenta, estava procurando há dias,o ruim é que as bandeiras não aparecem na mesma disposição.Mas fiquei contente com o resultado.

    Responder

  10. Exelente! Foi o melhor que encontrei, mas acabei fazendo umas modificações, mudei os flags icon e removi alguns idiomas, deixando apenas o que me seriam necessarios (English US, Spain e Japanese).

    Responder

  11. Olá,o meu nome é Marlene e conheci hoje este blogue,que me fez cá um jeitaço!!!!!!!!!!
    Estava à procura na net para saber como colocava a tradução e achei aqui,bem,tem uma das bandeiras que está a dar erro,mas ainda estou em experiência,e já sei onde buscar alguma coisa para alterar o meu blogue.Já me fiz vossa seguidora,obrigado por todas as dicas e informações.

    Responder

  12. criei vergonha na cara e estou criando meus proprios posts no blog do meu irmao que é meu tambemm
    aiiii eu queria outro tradutor com bandeiras grandes :(

    blogdovitorgomes

    Responder

  13. Marcos, muito obrigada! estou te seguindo no twitter e estou aprendendo e melhorando bastante meu blog com tuas orientações.. valeu mesmo.. abraços fraternos!!

    Responder

  14. Gostei muito do gadget, é muito útil e eu estava procurando na net para colocar no meu blog, já coloquei e funciona legal, obrigada por compartilhar tão útil ferramenta com outros blogueiros.

    Responder

  15. Valeu msm pela dica, muito legal, ja estou usando em meu blog

    eu estava com um modelo meio estranho quando vi esse ja fui logo colocando.

    muito grato!

    Responder

  16. Adorei a dica ! Estava procurando a um tempinho, mazs não gostava do estilo das imagens das bandeiras que encontrava, já esse me agradou muito. Obrigada !

    Responder

  17. Adorei este translator, foi o único que funcionou DE VERDADE no meu blogger, parabéns!!! \o/
    Só um toque, para o caso de terem de responder algumas dúvidas. A bandeira inglesa não estava aparecendo, então chequei o código, ok? O link para a bandeira inglesa estava quebrado no código postado acima (substituí-o no gadget por http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png), e faltou uma aspa abrindo a src na linha 28 (src=http://lh6.ggpht.com/).
    Corrigi isso e funfou beleza! Obrigada mesmo, pessoal.

    Responder

    • Faltava tambem as aspas no 800 e vc falou so so src

      src=”http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800″

      Espero ter ajudado!!

      Responder

  18. Nossa ficou ótimo no meu blog, é claro que precisa fazer uns ajustes, mas dá pra fazer tranquilo. Valei pela dica.

    Responder

  19. Só troquei o link quebrado, ficou ótimo Marcos, vlw..parabéns pelo artigo, esse é o único tradutor que encontrei que funciona. Abraço

    Responder

  20. perfeito, mas na bandeira inlesa está faltando os (") para fechar a imagem, por isso a imagem não aparece, mais obrigado pelo tradutor!!!

    Responder

  21. Uau, demais!!!
    Abençoado blog heim?
    Ja add o tradutor na home page do meu blog e ficou ótimo!
    Muito obrigado.
    É fantástico quanta coisa a gente pode melhorar, mesmo sem ter um domínio registrado.
    Eu quero é aprender cada vez mais com vc, vlw?
    Um abraço e fique com Deus!!!

    Responder

  22. Vlw pelo tópico, estava mesmo procurando um tradutor.
    Acabei de introduzi-lo no meu blog.
    Se possível, faça-nos uma visite e veja como ficou.
    Obrigado.

    Responder

  23. AMEIII! Marcos,acabei de colar no meu blog!! Tô que nem pinto no lixo…toda ancha e orgulhosa!!! já felei,né?! sem seu blog num sou never!!!bjusss<3 =D

    Responder

  24. estava precisando de um tradutor e este foi ótimo… como disse a Izabela, o código da bandeira inglesa estava incorreto… arrumei e ficou legal…
    obrigado

    Responder

  25. Amei esse codigo….. salvou a vida util do meu blog rsrsrr
    Visto que possuo um avatar no SL e como provalvemente saiba la te gente do mundo inteiro. Graças a você terei mais acessos…
    Construi meu blog tem uma semana e ja tive quase 100 visitas…
    bjs e se quizer pode passar por la tambem…

    Responder

  26. noooooooooossaaaaaaaaa! tive um problema com a bandeirinha inglesa e quase desisti. rsrsrs, ms ja consequi consertar… e olha que eu nao fazia a minima ideia do q eu tava fazendu..rsrsrs…mas segui passo a passo o que a IZabela falo e mesmo assim eu ja tava perdendo de 10×0 ms virei no final(depois de quese meia hora ¬¬ ), enfim eu consequi!!!!!
    naum sei nada de HTML, codigo essas coisas… ms graças a Deus eu consegui ^^!!!!
    vlw nota 10, D+, e muito util…brigadaum mesmo.

    Responder

    • Oi Kay, tudo bem??

      Na verdade não consegui arrumar a bandeira inglesa no meu blog, será que vc pode me enviar o código HTML??

      Agradeço muito Aline

      Responder

  27. a dica da Izabela com esta do amigo aluguel concerta tudo, pois na dica da isabel falta justamente o que ele postou ai para dar certo ou seja

    aluguel em buzios disse:
    ficou otimo parabens !! o problema da bandeira inglesa e so colocar as (aspas “) no inicio e no final da da imagem !! abraço a tds

    Responder

  28. Por favor Marcos Lemos, corrija o problema da bandeira britânica, o host da imagem esta OFF. Atenciosamente JOÃO PEDRO.

    Responder

  29. Marcos,

    Resolvi o problema da bandeira, apesar de não ser um especialista em HTML, se não fosse a busca que fiz para achar um tradutor não teria conhecido seu blog.
    Não me considero um blogeiro pois uso o blog somente para compartilhar revistas técnicas com pessoas que não tem condições financeiras para comprar. Não uso meu blog para fazer propagandas e ganhar dinheiro por isso acabei retirando o link do seu blog do tradutor, mas em troca coloquei um link permanente em meu blog.
    Não prometo visitas diárias minhas, mas gostei muito das matéria postadas aqui e com certeza vou visitar mais vezes.

    Obrigado novamente pelo código do tradutor.

    Um abraço

    Responder

  30. O código corrigido está em: http://www.tiagoemjesuscristo.blogspot.com.br/2012/05/como-colocar-um-tradutor-em-seu-blog.html
    Tive um trabalho considerável para colocar o tradutor com bandeiras para funcionar adequadamente, copiei o código HTML sugerido mas o mesmo estava com problemas. Fiz alguns ajustes nesse código e posto em meu blog o código corrigido com as seguintes alterações: 1. Corrigi o erro que fazia não aparecer a bandeira inglesa; 2. Troquei a bandeira brasileira por uma da Índia – um link de tradução para o Hindi, segundo idioma mais falado do mundo. Afinal de contas moro no Brasil, escrevo em português e por isso não faz sentido manter a tradução para o português; 3. Troquei as palavras que aparecem abaixo das bandeiras: eram “By Ferramentas Blog” , agora são: “Translator by Ferramentas Blog”. Isso para ninguém entender que o meu blog inteiro foi feito pelo pessoal do Ferramentas Blog. FerramentasBlog, muitíssimo obrigado pelas valiosas dicas. Att, Tiago Xavier.

    Responder

  31. Eu uso nos meu blog esse tradutor acho mais simples ele traduz a pagina e não abre uma outra com aquela barra enorme do tradutor se alguém quiser experimentar ta ai o código.

    function googleTranslateElementInit() {
    new google.translate.TranslateElement({
    pageLanguage: 'pt'
    }, 'google_translate_element');
    }

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.