domingo, 6 de maio de 2012

Como colocar um tradutor em seu Blog

Tive um trabalho considerável para colocar o tradutor com bandeiras (esse que pode ser visto do lado direito do blog no topo da página) para funcionar adequadamente, visitei o site http://www.ferramentasblog.com/2009/04/google-tradutor-para-blog-com-bandeiras.html e copiei o código HTML sugerido mas o mesmo estava com problemas. Fiz alguns ajustes nesse código e posto aqui 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 blog inteiro foi feito pelo pessoal do Ferramentas Blog.  Mas afinal, qual a relação desse assunto com o tema do blog? Simples, estou usando a caridade de compartilhar o trabalho que tive (facilitando o trabalho de pessoas que também querem um tradutor de blogs) para dar a mais pessoas a oportunidade de ler a boa notícia e outros textos. 

Segue o texto do site Ferramentas Blog e o código já corrigido:   



" 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 automático de blog (apenas para inglês, como aqui no [ Ferrmanetas Blog ])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.




Basta adicionar o código abaixo 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
Caso seu blog for de fundo claro talvez você queira alterar a bandeira da Índia, basta criar uma nova bandeira com um editor de imagens, postar a imagem num hospedeiro de imagens da internet como o Picasa e substituir o endereço da bandeira da Índia pelo endereço da bandeira que você acaba de criar. Dica: no código o endereço das bandeiras terminam com .png" Se não conseguir mesmo com essas dicas pode me enviar um e-mail com sua dúvida.    
Segue o código:


<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTlr6aGMzvDrmqO_JUZjDEJRTRZXuGpj9Zqj_6bEt7zEa9gqGTRHXk4IcEN2S6AIZZBP719nzfacaSSVaWm3U7ooOUq5lZhSm2RY0_j5rtgpLld1jLCvrqCfceItYAEdXboYPOWbIdqlk/" 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUrXWLRfdp8jGW_ljZA8DW7flnUWIdsgnnmWYtweyS8iNp6la9pv2kqqVQ03jorUr3QH_Mp_aPdSjNsbyb49TvvbTw68aR7NcU-pKBPV5F-i_x9FJ23vKDBFWiPB1MpmDClbmEfa-NcD0/?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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWp_vrX5LCcw_KkaHcnLf4VTlYS-hPD4cmCbwJ6oHEq-kAyP1_8KAVc9KBMnTowlJ_zrzWVgBFc4a6S9to-JTBL4laJ1vWPHxv3wJB18nZAv0vOBZjTlfZdrcVGtKWKNBylyrOL_wP24Do/?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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis9FNeSuPOxgPNDaEDq6QNbo42OAEHMLMqAwm5y__ota2vWmeGun0ZNBiEmp9tZlTWtXhxXoBpnClQgoW6pBIffc5j2duN99LfkwxhE6tTl71DvT0zlvvLm9XMo_C_SPwK8kDwxwlA3Ntz/?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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72WC8ickIZN66CvsFElQJ6h7mv5MWrJzE1H1AfZl27GU1N2OcE4tAYXdAlEmhgAnLck3CH5Xsskd6HwvO1hWaX9xuj4QuIALXAxYj0WqvB4M0kJIFQXuDJuAFGiWAwx98IL2gcg2a1cU/?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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcwUgHs68GAQQTEgfKmwWdKgnUbOLor956DucgqLa17PXsJhbS-yFrrwh8Ue1ReV59U70L-dT1rhfgyHxrmBEEeb-9YLCHmPoxiNzNTtREiGQdbl66YrlRnz50S26oejvtno28uLW67Z8/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7XJ7agGCutO-8DLu2CdZITgrMPRAML17hZB4bP0biiCHvpsyD0aYnp6KA1AAjvCAwlZg9vQM5q647cx-emkOMjMXhfW_6I3lISLcpFFeb5nTUAzruINmEZhdHL8mgqMb-FAPcYLe067k/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Hindi" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7chi&hl=en'); return false;"><img alt="Hindi" border="0" align="absbottom" title="Hindi" height="32" src="https://lh3.googleusercontent.com/-TJ1oeL8di_Q/T5i8YMUSUkI/AAAAAAAAAHU/hBgJrgDzL28/s144/Bandeira%2520da%2520%25C3%258Dndia2.png" 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm29vEFFBZJ77hSwZO8eFdFSpq18F2nQec-eGI0VZxvfWTBWtrKu0zMkPaEzcYhsF7hbTG8iaqSIOpgV2GjLSZXUupKZ1HZGDbK86Q71PpDXhkHN8ddGU6d6ClDWbL7_vLMh_16aZNHYSU/?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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh19VZeHwAWDQCwfnIwzB8ZEXk6hBnHX7Wvi1SzAWX_BCF8UvyDVw9juGtRbUzTJuQrN8R-d5BE67c_vO5-geznmV5Nf7VaRkbAklygi3K9GigOv7-QiWbm0np_sCp7zayuTvzJwuK_12U/?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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7MZiGkZkgClOgFCvnEn5YdYym-w6FP0t8uXpEp3FJkVCA2tlsAn4YJycv710oios7t2i1_9lbmjhge4bDzwsZLSjiijB7LXIsINeSMIUpFIqJ3XkGry56BBBxMjx9BXYZTIBlTDkmKj4/?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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX9xj-xTOKJDlyUanbY-q8gXIiwXyqIim3NAVnqB6Wit_XbUjRr6kiG6moBkar_HA17RRFnE6FDn3GTDJaftoz1M0cH8sF1EguRFnkvtjKT5dxBI7UIuwebuJdBvktwGLkwt9_M5XA648/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
</div>
<font face="Microsoft Sans Serif" color="#c0c0c0" size="1"><em>Translator By <a href="http://www.ferramentasblog.com/">Ferramentas Blog</a></em></font>
Related Posts Plugin for WordPress, Blogger...

28 comentários :

  1. Olá, Tiago!
    Poxa, quero muito agradecer por ter compartilhado o link que você teve tanto trabalho para ajustar. Estou realmente feliz, parabéns pela dedicação e atenção a todos! Já vou colocá-lo no meu blogue ;D
    Grande abraço!

    ResponderExcluir
    Respostas
    1. :D De nada! Agradeço a Deus que criou uma pessoa como você, capaz de fazer um comentário tão terno assim. Grande abraço!

      Excluir
    2. Ola, Tiago! Nossa, so hj eu entendo a importância dos blogs na nossa vida. eu que nao sei nada de html....fiquei feito louca atrás de um tradutor p o meu blog e so vc teve a preocupação de resolver o problema da bandeirinha inglesa, assim como trocar a do brasil. perfeito! muito obrigada por isso e que Deus lhe abençoe sempre por ajudar aos amigos da internet...

      Excluir
    3. De nada, Mag. Que Deus lhe abençoe também! O fundo do tradutor de seu blog é branco, portanto é melhor utilizar a bandeira da Índia para fundo branco, como falei na conversa com a Erica Santos (Só estou colocando isso aqui para tornar mais fácil às outras pessoas que lerem esse comentário atentar para isso). Vou lhe enviar por e-mail o código já alterado (apontando para a bandeira da Índia para fundo branco).
      Att,

      Excluir
  2. Thiago Parabéns pelo excelente trabalho.. achei bastante interessante a ideia de tradutores com bandeiras do site Ferramentas Blog, mas alguns erros me fez pensar em exclui-lo.. mas lendo os comentarios achei sua dica e copiei rapidamente seu código que ficou muito melhor com a substituição da bandeira do Brasil pela da India.. Valeu!
    se quiser ver como ficou da uma passadinha em minha pagina =)
    http://dociiencanto.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Muito obrigado! Agradeço a Deus pela sua existência! Já dei uma passadinha no seu blog, vou ver se depois crio uma bandeira da Índia com lista branca embaixo - ao invés de preta - que vai combinar com seu blog que tem um fundo branco. Att,

      Excluir
  3. Este comentário foi removido pelo autor.

    ResponderExcluir
  4. Só um detalhe.. qdo adicionei o link no meu blog ficou desconfigurado as fileiras.. então tirei a tag (br)
    e diminui o tamanho das bandeiras para 30 de altura e 16 de largura só assim coube em 2 fileiras como está no seu blog... Acredito que cada pessoa terá de dar uns ajustes para ficar bom, conforme a configuração do blog. (apesar do meu tbm ser blogspot).. Bjos! Não deixem de conferir como ficou em minha pagina. http://dociiencanto.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Informações preciosas! Muito obrigado mesmo, depois vejo se confiro a questão da tag(br) no código HTML, agora preciso tomar banho e ir dormir 1:03 am. Att,

      Excluir
    2. Eis aqui o endereço da bandeira da Índia para blog de fundo branco: https://lh5.googleusercontent.com/-TAJ4ao-3lWg/T7QbwWRHvBI/AAAAAAAAAIg/EMZdQbtkxUA/s144/Bandeira%2520da%2520%25C3%258Dndia3.png

      Att.
      Eu não entendo bem de html, não sei porque o código com a tag
      funciona para o meu caso e não para o seu. Pode, por favor, me dar uma dica? Parece que não existe uma tag br de abertura, então ela está lá inutilmente, é isso não é? Enfim, eu não entendo quase nada mesmo, se puder me dar uma ajuda...

      Excluir
    3. Achei um site que explica sobre a tag
      : http://pt-br.html.net/tutorials/html/lesson6.php
      Eu retirei a tag
      do meu blog para testar e pelo que percebi, com a tag
      ou sem ela, funciona da mesma forma; mas como para o seu caso deu problema vou retirá-la do código lá em cima.

      Excluir
  5. cara como faço para incluir uma badeira e atradução em polones??

    ResponderExcluir
    Respostas
    1. Pensei que iria encontrar seu endereço de e-mail no seu perfil mas só encontrei o twitter. Por aqui não rolou... esse campo de resposta não me permite citar um código html, ele entende como se estivesse programando.

      Excluir
  6. Vou tentar te enviar o código e a explicação do que eu fiz por e-mail.

    ResponderExcluir
  7. Eu vou usar apenas para uma demonstração na faculdade em uma página que tive que criar, sem a necessidade de traduzir realmente a página, mas gostei mto do detalhe da transparencia e tudo mais. Queria saber se tem como eu deixar as bandeirinhas la mas sem conexão com a internet, porque na apresentação não vou ter a conexão, e qndo tira a conexão com a internet as bandeiras somem. Tem como me ajudar???
    Vlw

    ResponderExcluir
    Respostas
    1. Acho que basta você acessar o endereço web de cada uma das bandeiras(Por exemplo o endereço da bandeira da França é http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800 - esse endereço está entre aspas no código); Aí você salva as bandeiras no seu computador e, se você salvou em, por exemplo, C:\Windows\Desktop\BandeiradaFranca.png , trocar no código esse endereço pelo endereço web. Se você salvou no pen drive e vai utilizá-lo na apresentação pode ser que você tenha que alterar o código conforme a letra que seu pen drive receber (a depender do computador pode ser F:\ ou G:\ ou H:\ ou outras).

      Excluir
  8. Obrigado Tiago por disponibilizar suas alterações para o Tradutor com bandeiras. suas interferências foram todas pertinentes. Tudo que pensei que deveria melhorar, você fez. Parabéns!

    ResponderExcluir
  9. Oi Tiago...peguei seu link no ferramntas bloguer nos comentarios, adorei o ajuste que vc fez e ja apliquei no meu blog. muito obrigado e se precisar de mim...esteja a vontade amigo. abraços de luz!!!

    ResponderExcluir
  10. Caro Tiago, obrigado pelos ajustes do original.
    Teria como retirar as sombras da bandeiras?
    E teria como acrescentar o idioma hebraico?
    Abraço
    astolphoresident@gmail.com

    ResponderExcluir
    Respostas
    1. Asto, perdoe-me a demora total em responder. As bandeiras são figuras hospedadas em sites, por exemplo a da itália http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?imgmax=800
      Copie e cole esse endereço no seu navegador para visualizar a bandeira. Esse endereço encontra-se no código citado lá em cima, esse e o das outras bandeiras que seguem padrão semelhante. Portanto, sim, é possível retirar as sombras das bandeiras, basta baixar essas figuras, editá-las e postá-las novamente num site que hospeda imagens. Para fazer a bandeira da Índia eu precisei fazer isso, mas eu queria justamente o contrário de você, eu precisava que essa bandeira tivesse sombra, baixei, editei com o Paint e postei no site hospedeiro. Usei o site hospedeiro de imagens https://picasaweb.google.com Como eu já tinha conta, bastou 1º enviar para lá, 2º acessar/abrir no Picasa a bandeira da Índia que eu enviei, 3º Do lado direito-inferior da tela do Picasa tem um link chamado "Link para esta foto", clicar nesse link, abriram-se dois campos: o campo "Link" e o campo "Incorporar imagem" 4º no campo "Incorporar imagem" tem uma linha que no meu caso começou com <table style = , então eu coloquei o cursou do mouse nessa linha e cliquei uma e uma segunda vez para conseguir navegar nele, fui navegando com o cursor utilizando a setinha para frente até achar a sequência de caracteres img src=" , o que vinha após isso era o endereço web da bandeira da índia, que começava com: https://lh5. , 5º copiei esse endereço contido entre as aspas "https://lh5 ... etc, 258Dndia3.png" , 6º Colei esse código no trecho do código da bandeira brasileira que eu quis substituir. Agora, já extrapolando a resposta de sua pergunta, precisei alterar também no código os dados para que a bandeira seja um link para a tradução para o idioma indiano, perceba no código que ele repete um padrão para cada bandeira e idioma, veja o que muda de um trecho para o outro e isso te ajudará a fazer as modificações necessárias para o idioma hebraico. No link seguinte tem um código semelhante e colorido que ajuda a perceber os padrões, que se repetem para cada idioma, e o que mudar para traduzir para o hebraico: http://www.ricardoartsblog.com/2012/02/como-inserir-um-tradutor-em-seu-blog.html Nesse outro link seguinte tem um tradutor para 25 países, mas não tem Israel, se você quiser poderá utilizar as dicas que dei aqui para modificar o código disponibilizado por esse outro colega: http://aprendadetudoumpouco.blogspot.com.br/2012/02/novo-tradutor-para-blog-com-bandeiras.html Entretanto, acho que não seria difícil aumentar esse código que postei aqui para 25 ou mais bandeiras e linguagens, bastando copiar o padrão para cada idioma, colar e fazer as alterações necessárias.

      Excluir
    2. Em vez de editar as bandeiras, você talvez poderá utilizar bandeiras sem sombra já hospedadas no Picasaweb, talvez dê bem menos trabalho. Talvez haja lá no Picasaweb uma bandeira de Israel já pronta, postada por outro usuário.

      Excluir
    3. Postei uma bandeira de Israel sem sombra no Picasa e fiz as modificações necessárias para a bandeira de Israel e linguagem hebraica,

      Excluir
    4. pretendo enviar para seu e-mail o código modificado.

      Excluir
  11. Thiago muito obrigada!adoreii deu tudo certo, somente gostaria de saber se é possivel colocar outra cor na palavra Translator by? pois no meu blog ficou muito apagado e gostaria de colocar outra cor para aparecer?sera que poderia me ajudar gostaria que Translator by Ferramentas Blog" ficasse tudo com a mesma cor?

    ResponderExcluir
  12. Maravilha! De nada. Na página de administração de seu blog, vá em Layout. No Gadget referente ao seu tradutor com bandeiras, clique em Editar. Vá até o final do código e procure "Translator By". Pode ser necessário maximizar a janela de edição do Gadget para que você consiga ver a barra de rolagem que lhe permitirá acessar o final do código. Veja se encontra a palavra "color" imediatamente anterior a "Translator By"; se a sua cor atual é cinza possivelmente você encontrará o seguinte código: #C0C0C0. Esse é o código que faz referência à cor cinza. Se você quer trocar a cor para vermelho, utilize o código #ff0000 Para consultar o código de outras cores: http://www.color-hex.com/color/ff0000
    Dúvidas? Perguntas?

    ResponderExcluir