Gadget traductor del blog

Traductor de Google personalizado

Agrega un traductor personalizado a tu Blog potenciado por Google Translate.

Inserta un traductor de idiomas en tu Blog gratis

Ver en CodePen

Este gadget te permite agregar un botón de traducción a tu blog, para que los usuarios puedan traducir el contenido a su idioma. El gadget utiliza la API de Google Translate y no requiere de configuración adicional.

Instalar

Presiona el botón instalar y en el formulario selecciona el blog en el que deseas instalar el widget. El código está optimizado para evitar un impacto negativo en el rendimiento de tu blog.

También puedes revisar el código fuente del widget que encontrarás en codepen, asi lo podrás agregar manualmente a tu blog en caso de que no utilices la plataforma de Blogger.

Nota: Aunque puedes instalar este widget multiples veces en tu blog, se recomienda no hacerlo, ya que el widget utiliza la misma API para todos los botones de traducción.

Configurar

Al editar el gadget, podrás especificar el idioma por defecto en el atributo data-lang y los idiomas traducibles en data-languages, los cuales debes especificar en formato ISO 639-1:

<div data-lang='en' data-languages='es,en,fr,ja' class='gtranslate' id='translate'></div>

Si prefieres usar todos los idiomas disponibles, puedes omitir el atributo data-languages o dejarlo vacío. Tambien puedes decidir que contenido no debería ser traducido en tu blog agregando la clase notranslate, por ejemplo:

<p class='notranslate'>Este texto no será traducido</p>

Personalizar

He dejado algunas variables que te permitirán cambiar distintos aspectos del botón. Para ello agrega el siguiente código CSS con los nuevos valores deseados:

.gtranslate {
  --gt-bg: #fff;
  --gt-color: #171717;
  --gt-border-color: #d4d4d4;
  --gt-accent: #14b8a6;
  --gt-accent-focus: rgb(20 184 166 / 25%);
  --gt-font: "Roboto", sans-serif;
  --gt-font-size: 1rem;
  --gt-svg: url('data:image/svg+xml,<svg/></svg>');
}

Recuerda que el código SVG debe estar en un formato compatible con CSS. Puedes usar esta herramienta para conseguirlo. Cuando hayas terminado de personalizar el botón, guarda los cambios.

Conclusión

Un traductor es una herramienta muy útil para los usuarios que no hablan el idioma en el que está escrito tu blog. Aunque no es perfecto, Google Translate es una de las mejores opciones para traducir contenido en tiempo real. Si tienes alguna duda o sugerencia, no dudes en dejar un comentario.