Traductor para páginas web

0

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  :)

OTROS POSTS