2013-01-14T20:43:00+01:00

Expandimos nuestras fronteras...

Bien, más o menos...
No es que nos vayamos de vacaciones o trabajo a algún lejano país asiático (léase Japón) ni que la familia haya crecido con algún oriental en casa, aunque realmente ganas no faltan, especialmente con la primera opción, la del viaje; se trata de ampliar las capacidades del blog con la posibilidad de tenerlo en varios idiomas y facilitar la lectura a los no castellano-parlantes.
Así pues, de la mano de Google Traductor, un poco de programación con DOJO y salpimentado con CSS, el blog se ha vuelto internacional. Con traducciones (más o menos buenas, lo que da google, mis conocimientos en otros idiomas son más bien escasos) a Catalán, Gallego, Vasco, Inglés, Alemán, Japonés y Ruso, tan solo tenemos que acceder al lateral superior derecho de cualquier página del blog, pasar el cursor por encima del botón con la bandera y un desplegable con todos los idiomas nos aparecerá para que podamos seleccionar el deseado.
Botón lateral derecho
Desplegable del traductor
Vista parcial página traducida
Una vez realizada la selección del idioma, cualquier página que visitemos nos aparecerá en el lenguaje seleccionado, recordando la selección realizada un máximo de dos días (tras los cuales deberemos de seleccionar nuevamente el idioma si queremos seguir con él).
Obvio decir que la nueva opción solo está disponible para la versión web (probado en navegadores Chrome, Opera, FireFox e Internet Explorer), para dispositivos móviles habrá que esperar un poco.

Por si interesa a alguien, dejo el código en está misma entrada. Tan solo hay que pasarlo en la forma habitual en blogger (Gadget HTML/Javascript, editar plantilla,...).
    <style type="text/css">
    .translateIdiomes
    {
      position: absolute;
      right:1px;
      top:0px;
      z-index: 666;
      background-color: #393636 !important;
      background-image: none !important;
      background-repeat: repeat !important;
      padding: 4px 3px 4px 3px;
      border:solid 2px #B29D85;
      -moz-border-radius: 7px;
      -webkit-border-radius: 7px;
      -goog-ms-border-radius: 7px;
      border-radius: 7px;
    }
    .skiptranslate
    {
      display: none !important;
    }
      .translateIdiomes td
      {
        width:50%;
      }
      .translateIdiomes a
      {
        text-decoration:none;
        font-size: 8pt;
        font-weight: normal;
        vertical-align: top;
      }
      .translateIdiomes a:hover
      {
        text-decoration: underline;
      }
      .translateIdiomes span
      {
        vertical-align: top;
      }
      .translateIdiomes img
      {
        border-style: none;
        padding-right: 10px;
      }
      #container4ActualTranslate
      {
        margin: 4px 10px 0px 10px;
        vertical-align:top;
      }
      #containerFlags4Translate
      {
        border-top: dotted 1px #746F6F;
        width: 200px;
      }
      #containerFlags4Translate img
      {
        vertical-align: top;
      }
      .goog-text-highlight 
      {
        background-color: transparent !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
        box-sizing: none !important;
        -webkit-box-sizing: none !important;
        -moz-box-sizing: none !important;
        position: auto !important;
      }
    </style>

    <div id="translateContainer" class="translateIdiomes notranslate" onmouseover="showTranslatePanel();" onmouseout="hideTranslatePanel();" style="display:none;">
        <div id="google_translate_element"></div>
        <div id="container4ActualTranslate"></div>
        <div id="containerFlags4Translate" style="display:none;">
          <table cellpadding="2" cellspacing="2" border="0" style="width:100%;margin-top:5px;">
              <tr>
                <td>
                  <a href="#" onclick="setDefaultLanguage();"><span id="translate2es"><img src="http://lh6.googleusercontent.com/-szP0U4-e4i4/UO7vFvAhlSI/AAAAAAAAGVY/WvH4h4XZ8CI/s27/flag_es_30x20.jpg" alt="" title=""/>Espa&amp;ntilde;ol</span></a>
                </td>
                <td>
                  <a href="#" onclick="setTranslate('en');"><span id="translate2en"><img src="http://lh4.googleusercontent.com/-a9oMH7pR7EY/UO7vFVJUA_I/AAAAAAAAGVU/7QzNkpHdXI0/s27/flag_en_30x20.jpg" alt="" title=""/>English</span></a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="#" onclick="setTranslate('ca');"><span id="translate2ca"><img src="http://lh4.googleusercontent.com/-3g1mN6j9RG8/UO7vFaakLNI/AAAAAAAAGVc/rRYBa0xcvg4/s27/flag_ca_30x20.jpg" alt="" title=""/>Catal&amp;agrave;</span></a>
                </td>
                <td>
                  <a href="#" onclick="setTranslate('de');"><span id="translate2de"><img src="http://lh3.googleusercontent.com/-KXbRtZtnlGU/UO7vGBh4MnI/AAAAAAAAGVk/5k417pMobkE/s27/flag_ge_30x20.jpg" alt="" title=""/>Deutsch</span></a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="#" onclick="setTranslate('gl');"><span id="translate2gl"><img src="http://lh4.googleusercontent.com/-1BkAizQF5z8/UO7vGadUfSI/AAAAAAAAGVo/WwXYDPJnkdM/s27/flag_gl_30x20.jpg" alt="" title=""/>Galicia</span></a>
                </td>
                <td>
                  <a href="#" onclick="setTranslate('ja');"><span id="translate2ja"><img src="http://lh4.googleusercontent.com/-5m2N8at1Ozo/UO7vGfgwWKI/AAAAAAAAGVs/8pS3BVtV4Ks/s27/flag_ja_30x20.jpg" alt="" title=""/><span lang="JA" style="font-family:&quot;MS Mincho&quot;;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:&quot;MS Mincho&quot;;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin;mso-ansi-language:ES">&amp;#26085;&amp;#26412;&amp;#35486;&amp;#12398;</span></span></a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="#" onclick="setTranslate('eu');"><span id="translate2eu"><img src="http://lh3.googleusercontent.com/-_j8Eq_xIqZI/UO7vGH7k4vI/AAAAAAAAGVg/HIpiQWOhPz8/s27/flag_eu_30x20.jpg" alt="" title=""/>Euskal</span></a>
                </td>
                <td>
                  <a href="#" onclick="setTranslate('ru');"><span id="translate2ru"><img src="http://lh4.googleusercontent.com/-MsLdll9bAtc/UO7vGuNnzyI/AAAAAAAAGV0/zcPqGfOPsH8/s27/flag_ru_30x20.jpg" alt="" title=""/>&amp;#1056;&amp;#1091;&amp;#1089;&amp;#1089;&amp;#1082;&amp;#1080;&amp;#1081;</span></a>
                </td>
              </tr>
          </table>
        </div>

        <script type="text/javascript">
              function setDefaultLanguage()
              {
                var base='es';
                
                try
                {
                   dojo.cookie('googtrans','',{expires: new Date(),path:'/'});
                   try
                   {
                     _translateObject.m.restore();
                   } catch (ee) { throw 'not dynamic call possible';}
                } catch (e) {
                             var url = window.location.href.replace(/\#googtrans\/.+$/, '');
                             window.location.href = url;
                             window.location.reload(true);
                            }
                 try
                 {
                   dojo.byId('container4ActualTranslate').innerHTML=dojo.byId('translate2'+base).innerHTML;
                 } catch (e) {}
              }
 
              function setTranslate(force)
              {
                var base='es';
                
                try
                {
                   var d=new Date();
                   d.setTime(d.getTime()+48*3600*1000); // Cookie expiration despres de 2 dies.
                   var lg='/'+base+'/'+force;
                   dojo.cookie('googtrans',lg,{path:'/',expires: ''+d});
                   try
                   {
                     _translateObject.m.restore();
                     _translateObject.m.te(base,force);
                   } catch (ee) { throw 'not dynamic call possible';}
                } catch (e) {
                             var url = window.location.href.replace(/\#googtrans\/.+$/, '');
                             window.location.href = url + '#googtrans/' + base + '/' + force;
                             window.location.reload(true);
                            }
                 try
                 {
                   dojo.byId('container4ActualTranslate').innerHTML=dojo.byId('translate2'+force).innerHTML;
                 } catch (e) {}
              }
              function showActualTranslate()
              {
                var tr='';
                
                 try { dojo.byId('translateContainer').style.display='';} catch(e){}
                
                 try
                 {
                   tr=''+dojo.cookie('googtrans');
                 } catch (e) {
                               tr='undefined';
                             }
                 if (tr=='undefined')
                 {
                   tr='undefined';
                   var url=window.location.href;
                   var p=url.indexOf('#googtrans/');
                    if (p!=-1)
                    {
                      var p1=url.indexOf('&amp;',p);
                      if (p1==-1) p1=url.length;
                      tr=url.substring(p+10,p1);
                    }
                 }
                 if (tr!='undefined') tr=tr.split('/')[2]; else tr='es';
                 try
                 {
                   dojo.byId('container4ActualTranslate').innerHTML=dojo.byId('translate2'+tr).innerHTML;
                 } catch (e) {}
              }
              function showTranslatePanel()
              {
                dojo.byId('containerFlags4Translate').style.display='';
              }
              function hideTranslatePanel()
              {
                dojo.byId('containerFlags4Translate').style.display='none';
              }
              function googleTranslateElementInit() 
              {
                 _translateObject=new google.translate.TranslateElement({pageLanguage: 'es', includedLanguages: 'ca,en,es,eu,de,gl,ja,ru', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
                 require(['dojo/cookie', 'dojo/dom'], function(cookie, dom){showActualTranslate();});
              }
        </script>
        <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     </div>
Larga y Prospera Vida.

2 comentarios:

  1. Hola Sammy!
    Me interesa mucho este código, pero no sé en que parte del blogger tengo que poner cada cosa. Me podrías indicar cada parte de código que has puesto, exactamente dónde va en Blogger, por favor? Muchas gracias!

    Pau

    ResponderEliminar
    Respuestas
    1. Sin problemas para pasartelo, pero necesitas algunos conocimientos básicos de HTML y Javascript para modificar la plantilla y es un poco largo para ponerlo en esta respuesta.
      Enviame un correo a sammy.iatta(arroba)gmail.com y te respondo con el codigo y lo que tienes que poner en cada sítio.
      Ya me diras.
      Saludos y Feliz Año Nuevo

      Eliminar

Sobre NekoFan

Dos cuartas partes de "Anime",una de Japón y otra de videojuegos,mezclado con programación y Dojo hacen la receta (im)perfecta de este blog.




Enlaces

Visitas