Google Translate


Ya que he tenido varias preguntas sobre la forma de poner un botón para dar la opción de traducir el blog.

Uno de los traductores que mas me ha gustado es el de google.

Es muy fácil de instalar.

Ir directo a la página oficial Tools - Google Translate

Seleccionar el idioma del blog.

Abrir donde dice Show optional settings, para otras configuraciones.

Elegir todos o seleccionar los idiomas que queramos.

Elegir el modo de visualización.

En avanzado marcar la opción que quieran. (yo desmarque todo)

Copiar el código generado mas abajo y pegarlo en:

Diseño, Elementos de la página y añadir un gadget HTML/Javascript.

Si quieren pueden centrarlo de la siguiente forma:

<div style="text-align: center;">

CÓDIGO GENERADO

</div>
Y/o ponerle unas banderitas.



Ejemplo centrado con banderitas:

<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYwepPxTiGH350xsWW0hWxzRnlYIkjdygF1nUSpwhKBnagjM-zEcSZ8FE4m82pGLkQS499cBqqxQzMZ8CgI41Oquq0JhQ71qRUPrllxY5zyQ2ALLM3m0pqdpjG0vYA0PtWc_q1e_QArIO/s1600/banderitas.png" />
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'es',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>

Imagen del resultado.

Si quieren pueden simplemente copiar y pegar el código del ejemplo.

7 comentarios:

  1. No entendi muy bien el final, asi que lo coloque a un ladito y en modo simple, espero que se vea. Gracias de todos modos ;)

    ResponderEliminar
  2. copia el código Ejemplo centrado con banderitas:

    Lo pones en un nuevo gadget Html/javascript.

    Y cambias el gadget a donde lo quieras mostrar.

    ResponderEliminar
  3. Hola quisiera saber como quitarle el fondo blanco a este traductor el fondo de mi pagina es gris ayudenme!!!

    ResponderEliminar
  4. Pon abajo del código lo siguiente:

    <style>.goog-te-gadget-simple{background: #ccc;border:1px solid #ccc}</style>

    Si quieres otro color solo cambia #ccc por el que tu quieras.

    ResponderEliminar

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.

Nota: solo los miembros de este blog pueden publicar comentarios.