Este plugin te permite agregar un botón de traducción a tu blog, para que los usuarios puedan traducir el contenido a su idioma. El plugin utiliza la API de Google Translate y no requiere de configuración adicional.
Inicializar
Inserta el siguiente código en donde quieras mostrar el traductor. Ubícalo en cualquier parte en donde puedas insertar código HTML, tambien puedes crear multiples listas de videos si duplicas el código donde consideres necesario:
<div id='gTranslate' class='gtranslate' data-languages='es,en,fr,ja'></div>Nota: Si ya has utilizado al menos uno de los plugins que he creado, entonces no tienes que hacer nada más y deberías ver este funcionando en tu sitio web. Si no puedes ver este plugin funcionando continúa leyendo.
Instalar Core
Este paso solo es necesario si no puedes ver el plugin funcionando. Este código esta optimizado, se mantiene actualizado y te permite usar cualquier plugin que encuentres en zkreations. Deberás ubicarlo arriba de </head> o usando cualquier metodo que tengas para insertar HTML dependiendo de tu plataforma:
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/zkreations/plugins@1/dist/css/main.min.css"/>
<script src="//cdn.jsdelivr.net/gh/zkreations/plugins@1/dist/js/main.min.js" defer></script>Configurar
Puedes especificar los idiomas traducibles en el atributo data-languages, los cuales debes especificar en formato ISO 639-1 como se muestra a continuación:
<div id='gTranslate' class='gtranslate' data-languages='es,en,fr,ja'></div>Si prefieres usar todos los idiomas disponibles, puedes omitir el atributo data-languages. 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.
