Añade un traductor automático con banderas a tu Blog – Lincoln

La traducción de contenidos de nuestro Blog utilizando la tecnología de Google Translator puede hacerse de una manera sencilla, rápida y eficaz.

Te propongo la inserción de un sencillo código que a partir de las imágenes de banderas de distintos países, permita a tus usuarios seleccionar el idioma con el que desean interactuar con tu Blog. Cuando tus visitantes seleccionen la bandera deseada lanzarán una llamada a Google Translator para que se traduzca la página que estén visualizando en ese momento.

Si bien las traducciones automáticas distan de ser perfectas, ofrecen un entorno más que suficientemente amigable para el visitante que puede encontrarse "perdido" con el idioma de tu Blog, no ya sólo por el lenguaje sino además por la propia grafía que maneja.

¿Qué vamos a hacer?

Vamos a incorporar el código que te proporcionará el siguiente conjunto de banderas interactivas para tu Blog que traducirán automáticamente el contenido que el usuario esté visualizando al idioma de la bandera seleccionada:

*¡Pruébalo! es interactivo y te mostrará el resultado aproximado de cómo quedará en tu Blog

¿Dónde puedo colocar este código?

El código que "dibuja" las banderas en tu Blog puedes colocarlo donde desees. Se puede integrar tanto directamente en la plantilla para que sólo se dibuje en el detalle de las entradas como en una barra de menús que se encuentre en la cabecera o un lateral del Blog.

Explicaré los pasos para utilizarlo manejando un "gadget" HTML/Javascript que podrás colocar en la vista de diseño donde prefieras.

Paso a paso:

1) Dentro de Blogger selecciona la opción de menú "diseño" para que se te presente una página como la que te muestro a continuación:

2) A continuación, en la zona donde prefieras de la vista de diseño, selecciona "Añadir gadget" para escoger el de tipo HTML/Javascript (en la ventanita que se abre en la pantalla que se muestra en el inferior es el tercer Gadget de la lista):

3) Ahora te aparecerá una ventana en la que podrás introducir el código HTML/Javascript que "dibujará" en el Blog el traductor con banderas:

En la caja para el título puedes o dejarla vacía si no deseas que se visualice un titulo encima del traductor con banderas o rellenarlo con el que prefieras utilizar.
La caja de texto "grande" justo bajo el título, será en la que tienes que copiar y pegar el código que te proporciono en el siguiente paso.

4) Ahora copia y pega el código fuente que te pongo a continuación, dentro de la caja de texto grande de la ventana que se te ha abierto al añadir el Gadget HTML/Javascript:

a href="https://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXXXXXX" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Czh-CN&hl=es&ie=UTF8');return false" rel="nofollow" target="_blank" title="Google-Translate-Chinese (Simplified) BETA"img alt="Google-Translate-Chinese" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXKc5zjA-adxvoP0Yd-MxcTMNncrUyVw3wZdN3rJz440mNST7lDbKmtnDDkFFb-iaSnImT1mgDn1Vm6pChQVsrP8HQmkOuWY_1ei4vafhmoX5gxJmVkolW1nvSAmS7TspRL0nvM7lRVw/s1600/China.png" style="border: 0px solid; height: 32px; width: 32px;" title="Google-Translate-Chinese" //a

a href="https://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXXXXXX" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cfr&hl=es&ie=UTF8');return false" rel="nofollow" target="_blank" title="Google-Translate-Spanish to French "img alt="Google-Translate-Spanish to French" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqMYfdW59tgaI2BsQ7v2lxH6Lzk0vfN-LXVY5zGWRd9iQn-rwtApEbOWPkL9-OOEHlx6mLLaYo0tIESgZm7gpa7Lt68HtM0djJ5QEezMihI5w4Qjao7GwHL3f5NWsvD0XIqR9T8V21A/s1600/France.png" style="border: 0 solid; cursor: pointer; height: 32px; width: 32px;" title="Google-Translate-Spanish to French" //a

a href="https://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXXXXXX" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cde&hl=es&ie=UTF8');return false" rel="nofollow" target="_blank" title="Google-Translate-Spanish to German"img alt="Google-Translate-Spanish to German" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvv2My9K_4_d9X6aQlsV31Zvycx-ezkUvyS2SuZqXVrg2ogACwR4StoL6nkJFOX1jSKCqW32O0TzrXuuO-ld8d8KgQ8YYQSc63fgMEDK2HvB22d-gP1g-gryeFkpzMjVVfe8d-KKtOpg/s1600/Germany.png" style="border: 0 solid; cursor: pointer; height: 32px; width: 32px;" title="Google-Translate-Spanish to German" //a

a href="https://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXXXXXX" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cja&hl=es&ie=UTF8');return false" rel="nofollow" target="_blank" title="Google-Translate-Spanish to Japanese BETA"img alt="Google-Translate-Spanish to Japanese" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFi3hS7tEzellXxc-Ezr_hofY5OqQuLYZTA4F1z9XoaXHn4-Ygrn-PfZap0z82R3vWtBrO_dvl9hOUbUDKFzBlLolnNpU2v9N7446SWn54KQzDRGUKhUl2tYNtI7Wfd-sMy4epH99BQ/s1600/Japan.png" style="border: 0 solid; cursor: pointer; height: 32px; width: 32px;" title="Google-Translate-Spanish to Japanese" //a

a href="https://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXXXXXX" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cen&en=es&en=UTF8');return false" rel="nofollow" target="_blank" title="Google-Translate-Spanish to English "img alt="Google-Translate-Spanish to English" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ej5JJSQ_uYs3c_YQwFEyexKyuVkfVYNFqHIPTscZH75_JoYBk4-ahmM9hmvsvtlb3lpWxgfbrXu643frBkKFSQl54OxcQDMKtWUUrJP3XxWdaBnZO5ZYQ4UDRTEvOgAj-JxlYNT6wg/s1600/United+States+of+America+(USA).png" style="border: 0 solid; cursor: pointer; height: 32px; width: 32px;" title="Google-Translate-Spanish to English" //a

a href="https://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXXXXXX" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cru&hl=es&ie=UTF8');return false" rel="nofollow" target="_blank" title="Google-Translate-Spanish to Russian BETA "img alt="Google-Translate-Spanish to Russian" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqb8-bUgglC_eiMVPvTyqWl9ilg5MHq4rVPrATWnVLfXtkDfUvGrDXqcPYHtrc-Tdxyeoj2ajAf8iSsaPBMwEudNhOjRypyVqhwqyWLX_AROEVqcHW5IEoI5fsLPqjeFcT30jqvfjT9Q/s1600/Russian+Federation.png" style="border: 0 solid; cursor: pointer; height: 32px; width: 32px;" title="Google-Translate-Spanish to Russian" //a

a href="https://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXXXXXX" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cpt&hl=es&ie=UTF8');return false" rel="nofollow" target="_blank" title="Google-Translate-Spanish to Portuguese"img alt="Google-Translate-Spanish to Portuguese" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGlvdWrVsQfOtPbjkZ3bA77SgimnlKrwSR9vVAJ3SqFl0kgcin_6wcWpXY7LYWTac8R-f1ZfUrDUAFKrWabrrUWbQ9dwnJJ6VJ91FLmqN63EZZEIEIkwe8tONqJyAg4-uT_yPE-4OXeg/s1600/Brasil.png" style="border: 0 solid; cursor: pointer; height: 32px; width: 32px;" title="Google-Translate-Spanish to Portuguese" //a

a href="https://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXXXXXX" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cit&hl=es&ie=UTF8');return false" rel="nofollow" target="_blank" title="Google-Translate-Spanish to Italian"img alt="Google-Translate-Spanish to Italian" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrh6CWHTdrq9J0NalkbokEbwc2qEOOIu2y93o4GC2CNMxdmMsU-9YKL3iecW07BMeu65j2pMEKnwtDDVVKSapSe91Mpgd2cCQbKV6DovWO2JeVqCfmIU_DnliD4s6Dc8YUTrckVOicrg/s1600/Italy.png" style="border: 0 solid; cursor: pointer; height: 32px; width: 32px;" title="Google-Translate-Spanish to Italian" //a

Cada conjunto que va desde a href=hasta/ade cada color, es el código necesario para llamar a Google Translator en el idioma del país al que corresponda dicho código. Si no quieres todas la banderas, simplemente selecciona el código de aquellas que desees utilizar.
Si necesitas utilizar el blogID, que en el código aparece en cada bandera comoblogID=XXXXXXXXXXXXXXXXXXX , dentro podrás introducir el identificador de tu Blog. El "blogID" es fácil de extraer, es el código de 19 posiciones que se encuentra en la barra de direcciones de tu navegador mientras editas cualquier entrada, puedes verlo remarcado con el rectángulo rojo en la imagen inferior:

Si quieres que queden centradas las banderas, puedes poner en la parte superior del código con todas las banderas la etiqueta div align="center"y cuando finalice todo el código de las banderas que hayas decidido utilizar lo cierras con /div

¡Eso es todo!, ahora colócalo donde prefieras en tu Blog.