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 |
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&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&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:"MS Mincho";mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:"MS Mincho";mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin;mso-ansi-language:ES">&#26085;&#26412;&#35486;&#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=""/>&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#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('&',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>
Hola Sammy!
ResponEliminaMe 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
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.
EliminaEnviame 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
Publica un comentari a l'entrada
Recuerda que debes haber aceptado la política de privacidad de Google para comentar.
Para tu información, puedes consultar nuestra política de privacidad y aviso legal donde encontrarás toda la información al respecto.