Nem é preciso afirmar o quanto a internet é uma rede globalizada, 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.
Tradutor automatico de blog (apenas para inglês, como aqui no [ Ferrmanentas Blog ])Já publicamos outros dois modelos de tradutores aqui para você avaliar qual o melhor para o seu blog:
- Gadget Google Tradutor para Blog (padrão da Google).
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="https://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”.
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.
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.
As imagens das bandeiras aparecem com uma sombra que não fica legal, como as eliminar?
Adorei, Marcos. Jah adicionei mais esse recurso ao meu blog.
…Grato pela Dica!
..Já aplicado em meu blog!
Sucesso!
Serafín,
essa sombra é das imagens. Basta vc criar novas imagens e substituir.
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…
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.
Um dos meus problemas maiores era a tradução, uma vez que entendo pouco de inglês…esta dica me salvou…obrigado cara!
Muito bom, bela dica
Bom script testei nomeu blog e funcionou perfeitamente
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!
Aline,
vc deve ter retirado mais coisas que devia do código. Reveja o código.
Muito bom Marcos,parabéns e muito obrigado.
poxa! muito legal mesmo tá de parabéns!
Excelente, muito grato.
Deus abençoe a todos.
Abraços.
Mais uma ótima dica
Parabéns Marcos
Ó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].
Iara'nCiel muito obrigado pela dica, resolvi meu problema aqui!
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
Instalei em meu blog e funcionou muito bem,adorei,obrigado marcão!
O erro da língua está corrigido e tudo está funcionando perfeitamente.
Bom design, o tradutor hoje em dia é um widget bem eficiente e muito usados nos blogs nacionais.
Muito bom, vi muitos por ai, mas esse ta bem "profissional" hehe
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.
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).
deu super certo…rsrs… e tirei alguns idioimas q achei desnecessário… obrigada!!!!
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.
Cara é mesmo incrível este recurso! A todos que quiserem copiar o código recomendo. Muito bom…
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
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!!
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.
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!
Obrigada pela dica, consegui!!!Grata!!!
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 !
legalllllllll tem visita vindo de todo mundo e eu nao nao sabia como por esta traduçao no blog e eu achei aki
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.
Oi Izabela, preciso da sua ajuda me mande o código alterado, pois não sou tão expert como vcs rsrs. Não descobri onde tenho que alterar.
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!!
Nossa ficou ótimo no meu blog, é claro que precisa fazer uns ajustes, mas dá pra fazer tranquilo. Valei pela dica.
Só troquei o link quebrado, ficou ótimo Marcos, vlw..parabéns pelo artigo, esse é o único tradutor que encontrei que funciona. Abraço
perfeito, mas na bandeira inlesa está faltando os (") para fechar a imagem, por isso a imagem não aparece, mais obrigado pelo tradutor!!!
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!!!
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.
Muito bom, eu estava a tempo procurando, nunca achava um tão excelente, esse sim estou satisfeita ;]
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
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
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…
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.
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
Nossa que legal! achei fantástico, se pudesse te dava um big abraço. Obrigada.
Bem legal a sua dica amigao! Tradutor é da hora Abrax
Muito bom, bonitas bandeiras, obrigado!
A dica da izabela para coorrigira bandeira inglesa funcionou, boa dica
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
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
Por favor Marcos Lemos, corrija o problema da bandeira britânica, o host da imagem esta OFF. Atenciosamente JOÃO PEDRO.
Marcos ficou muito bom, obrigado pela dica, mas só o problema da bandeira que não aparece.
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
Tem como não aparecer a barra do google tradutor?
Raphael,
Não tem como tirar a barra. Para funcionar precisa aparecer a barra no topo da página para indicar que a página foi traduzida.
Gostei do tradutor criei uma bandeira para corrigir o código, quem quiser é só usar!
Bandeira Inglaterra –> http://img27.imageshack.us/img27/3532/bandeira2j.png
Vlw!
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.
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');
}
Esse é bem melhor que o clássica da Google. Valeu!
Adorei bem melhor que o do google
Muito útil! 5 estrelas!!!
Gostei, parabéns!!! Funcionou muito bem. Apenas a bandeirinha do inglês é que não aparece apenas um quadradinho. Mas passando o mouse por cima, aparece a palavra “English”. Como faço pra que bandeirinha do inglês apareça? Grato.