Foros aprenderaprogramar.com

Aprender a programar => De todo un poco... => Mensaje iniciado por: Chino Ozuna en 21 de Septiembre 2015, 19:39

Título: Añadir widget de traducción automática con google translator en blog de blogger
Publicado por: Chino Ozuna en 21 de Septiembre 2015, 19:39
Que tal, buen día. Para programar un sitio de Blogger con la opción de que se pueda traducir el idioma del contenido, cómo puedo hacerlo?
Título: Re:Añadir widget de traducción automática con google translator en blog de blogger
Publicado por: Ogramar en 22 de Septiembre 2015, 08:57
Hola Chino Ozuna!

Para traducir un sitio "con perfección" es necesario realizar la traducción a mano, ya que los traductores automáticos cometen bastantes fallos.

No obstante, tienen la ventaja de que son rápidos y en algunos sitios puede ser suficiente con poner un traductor automático. Puedes añadir un código en blogger que te dibuja las banderas de otros países de modo que cuando un usuario pulse en una bandera se le muestre el contenido de tu blog traducido automáticamente.

Los pasos a dar son estos:

1) Dentro de Blogger selecciona la opción de menú "diseño"

2) A continuación, en la zona donde prefieras de la vista de diseño, selecciona "Añadir gadget" y escoge el de tipo HTML/Javascript

3) Ahora te aparecerá una ventana en la que podrás introducir el código HTML/Javascript que "dibujará" en el Blog el traductor con banderas.
En la caja para el título puedes o dejarla vacía si no deseas que se visualice un titulo encima del traductor con banderas o rellenarlo con el que prefieras utilizar. La caja de texto "grande" justo bajo el título, será en la que tienes que copiar y pegar el código.

 4) Ahora copia y pega el código fuente que figura a continuación, dentro de la caja de texto grande de la ventana que se te ha abierto al añadir el Gadget HTML/Javascript:

Código: [Seleccionar]
    <a href="https://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXXXXXX" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=es%7Cfr&amp;hl=es&amp;ie=UTF8');return false" rel="nofollow" target="_blank" title="Google-Translate-Spanish to French "><img alt="Google-Translate-Spanish to French" src="http://3.bp.blogspot.com/-mhqyv4teiYw/UvqWE18tALI/AAAAAAAALQI/6Nx5YRALk6s/s1600/France.png" style="border: 0 solid; cursor: pointer; height: 32px; width: 32px;" title="Google-Translate-Spanish to French" /></a>

    <a href="https://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXXXXXX" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=es%7Cde&amp;hl=es&amp;ie=UTF8');return false" rel="nofollow" target="_blank" title="Google-Translate-Spanish to German"><img alt="Google-Translate-Spanish to German" src="http://2.bp.blogspot.com/-A0UatfV6RQQ/UvqWHz55_FI/AAAAAAAALRE/DWo9jk1PZaM/s1600/Germany.png" style="border: 0 solid; cursor: pointer; height: 32px; width: 32px;" title="Google-Translate-Spanish to German" /></a>

    <a href="https://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXXXXXX" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=es%7Cen&amp;en=es&amp;en=UTF8');return false" rel="nofollow" target="_blank" title="Google-Translate-Spanish to English "><img alt="Google-Translate-Spanish to English" src="http://1.bp.blogspot.com/-BbII8VzM4pA/UvqWG90GbCI/AAAAAAAALQ0/oxzXq1pwDuQ/s1600/United+States+of+America+(USA).png" style="border: 0 solid; cursor: pointer; height: 32px; width: 32px;" title="Google-Translate-Spanish to English" /></a>


Hay que tener cuidado y poner el blogID que corresponda. Se pueden añadir más o menos idiomas según se prefiera.

Cada conjunto que va desde  <a href= hasta </a> de cada color, es el código necesario para llamar a Google Translator en el idioma del país al que corresponda dicho código. Si no quieres todas la banderas, simplemente selecciona el código de aquellas que desees utilizar.
El blogID, que en el código aparece en cada bandera como blogID=XXXXXXXXXXXXXXXXXXX , dentro podrás introducir el identificador de tu Blog. El "blogID" es fácil de extraer, es el código de 19 posiciones que se encuentra en la barra de direcciones de tu navegador mientras editas cualquier entrada.

Si quieres que queden centradas las banderas, puedes poner en la parte superior del código con todas las banderas la etiqueta <div align="center">  y cuando finalice todo el código de las banderas que hayas decidido utilizar lo cierras con </div>

Salu2