Traductor para páginas web
En este post vas a encontrar el código necesario para traducir una página web con el CDN de google, son tres simples pasos básicos:
1. Añadimos un css básico para que en responsive no se nos dañe y el cliente pueda vivir una buena experiencia
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
.goog-te-menu-frame {
max-width:100% !important;
}
.goog-te-menu2 {
max-width: 100% !important;
overflow-x: scroll !important;
box-sizing:border-box !important;
height:auto !important;
}
2. ahora vamos a agregar el script que nos hace la funcionalidad de traducción:
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'es',
includedLanguages: 'es,en,ca,eu,gl,en,fr,it,pt,de',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
function changeGoogleStyles() {
if($('.goog-te-menu-frame').contents().find('.goog-te-menu2').length) {
$('.goog-te-menu-frame').contents().find('.goog-te-menu2').css({
'max-width':'100%',
'overflow-x':'auto',
'box-sizing':'border-box',
'height':'auto'
});
} else {
setTimeout(changeGoogleStyles, 50);
}
}
changeGoogleStyles();
}
</script>
3. por ultimo y muy importante agregamos el cdn de google translate
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
eso es todo, espero que te haya gustado y servido esta solución, exitos :)