Cómo instalar un traductor personalizado en la barra superior

Imaginad que no tenéis ni idea de cocina pero estáis muertxs de hambre, cogéis todo lo que...


Imaginad que no tenéis ni idea de cocina pero estáis muertxs de hambre, cogéis todo lo que encontráis en la nevera, lo metéis en una sartén y, ¡tachán!, sale un plato rico. Pues algo así es lo que me ha pasado a mí con este traductor.

Quería instalar un traductor en la barra superior del blog pero no encontraba ninguna opción que me encajase ya que tenía poco espacio y no me convencía la estética del de google porque apenas puede personalizarse. Por eso decidí crear mi propio selector de idiomas desplegable, tomando varios códigos que no tenían nada que ver (este, este y este) y mezclándolos sin estar muy segura de qué hacía... ¡Y, misteriosamente, como podéis ver, funcionó!

No obstante quiero que quede muy claro que no sé nada de programación (sólo las tres nociones básicas que he aprendido diseñando el blog), así que me da bastante corte hacer un tutorial de este estilo, pero como algunxs me habéis preguntado cómo lo he puesto... Pues aquí va.

En cualquier caso, si queréis instalarlo en vuestra web os recomiendo que leáis antes el último apartado, el de "pros y contras", y os ruego que tengáis en cuenta que no sé si sabré responder a las dudas que os surjan, ¿ok?


Lo primero que tenéis que hacer es entrar en PLANTILLA -> EDITAR HTML (¡antes de tocar nada, descargaos una copia de seguridad!). Después, buscáis la parte del código que hace referencia a vuestra barra superior. Para ello, pincháis CONTROL + F y localizáis esto:

 <div id='barra-superior'>

Una vez allí encontraréis los elementos que pusisteis en su momento (iconos de redes sociales, buscador, secciones...). Pues bien, sólo tenéis que colocar el código del traductor donde queréis que aparezca. Os pongo el mío tal cual está y ahora os explico cómo hacerle modificaciones:

<select class='desplegable' name='menu' onchange='if(options[selectedIndex].value){location = options[selectedIndex].value}' size='1' style='margin: 15px -15px 15px 10px'>
<option value=''>TRANSLATE</option>
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Cen&amp;en=es&amp;en=UTF8&apos;);return false' rel='nofollow' value=''>English</option>
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Cfr&amp;hl=es&amp;ie=UTF8&apos;);return false' rel='nofollow' value=''>Français</option>
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Cde&amp;hl=es&amp;ie=UTF8&apos;);return false' rel='nofollow' value=''>Deutsch</option>
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Cpt&amp;hl=es&amp;ie=UTF8&apos;);return false' rel='nofollow' value=''>Português</option>
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Cit&amp;hl=es&amp;ie=UTF8&apos;);return false' rel='nofollow' value=''>Italiano</option>
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Cru&amp;hl=es&amp;ie=UTF8&apos;);return false' rel='nofollow' value=''>Pусский
</option>
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Cel&amp;hl=es&amp;ie=UTF8&apos;);return false' rel='nofollow' value=''>Ελληνικά
</option>
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Cnl&amp;hl=es&amp;ie=UTF8&apos;);return false' rel='nofollow' value=''>Nederlands
</option>
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Car&amp;hl=es&amp;ie=UTF8&apos;);return false' rel='nofollow' value=''>العربية</option>
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Cja&amp;hl=es&amp;ie=UTF8&apos;);return false' rel='nofollow' value=''>日本人</option>
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Czh-CN&amp;hl=es&amp;ie=UTF8&apos;);return false' rel='nofollow' value=''>中国</option>
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Chi&amp;hl=es&amp;ie=UTF8&apos;);return false' rel='nofollow' value=''>ह&#2367;न&#2381;द&#2368;</option>
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Ctr&amp;hl=es&amp;ie=UTF8&apos;);return false' rel='nofollow' value=''>Türkçeye</option>
</select>
Cada uno de los apartados que comienzan por "<option onclick" y terminan en "</option>" hace referencia a uno de los idiomas. La primera parte es la aplicación que realiza la traducción, mientras que el texto que está justo antes de "</option>" es lo que aparecerá en el desplegable.

Por ejemplo, en la última opción, los fragmentos señalados en verde son los que hacen que se traduzca de español a turco y el fragmento morado es lo que podrá verse en la barra. Yo lo he puesto en sus respectivos idiomas, para que al lector le resulte más fácil identificarlo:
<option onclick='window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=es%7Ctr&amp;hl=es&amp;ie=UTF8&apos;);return false' rel='nofollow' value=''>Türkçeye</option>
Pues bien, si queréis añadir la opción de traducir a otras lenguas, sólo tenéis que volver a escribir el código y modificar esas dos partes. Para saber las iniciales de cada idioma, podéis mirar una tabla aquí.

Y si deseáis quitar alguno o cambiarlos de orden, simplemente tenéis que seleccionar esa parte del código entera y borrarla o ponerla en otro sitio, siempre que quede entre "<option value=''>TRANSLATE</option>" y "</select>".


Para personalizar el traductor, hay que entrar en PLANTILLA -> PERSONALIZAR -> AVANZADO -> AÑADIR CSS y poner esto modificándolo según vuestro criterio:
.desplegable {
background-color: #F2F5A9;
color: #000000;
float: center;
text-align: center;
height: 40px;
position: relative;
width: 105px;
}
Cosas que podéis cambiar:

- Background-color es el color del traductor.
- Color hace referencia al color de la letra.
- Height y Width hacen referencia a su altura y ancho.

Si, como en mi caso, el señor de blogger no os permite hacer modificaciones añadiendo CSS podéis hacerlo directamente pegándolo en la plantilla. Localizad la parte en la que incluisteis las modificaciones de la barra superior, para tenerlo todo junto, buscando esto:

#barra-superior {

Y colócadlo tras la llave de cierre (}), en la línea siguiente.


Lo mejor de este traductor, aparte de que para el lector que no domina nuestro idioma resulta muy intuitivo, es que podemos personalizarlo más que el que nos da google, añadirle los idiomas que queramos y colocarlo donde nos dé la gana.

Incluso podemos ponerlo directamente en las entradas añadiendo el código en ellas: en lugar de REDACTAR pinchamos en HTML y lo pegamos donde queremos que aparezca (por ejemplo, si lo pegáis arriba del todo, quedaría justo debajo del título del post):
Ahora bien, también tenéis que tener en cuenta que:

1. La traducción se abre en otra pestaña. Le he dado cientos de vueltas y no consigo que lo haga en la misma. Si hay por la sala algún/a sabix que sepa el truco, ¡le ruego que me lo diga!

2. Colocarlo exactamente en el sitio que quería de la barra me resultó complicadísimo. Por no saber, claro. Tuve que ir jugando con las medidas de margen (margin) de los elementos que tenía alrededor e incluir algunos valores un poco al tuntún hasta conseguirlo, pero desde ya os digo que quizás os cueste... ¡Pero se consigue!

Y esto es todo... ¡Espero que os sirva!

REEDITO: En vistas de que este modelo de traductor se abría automáticamente en una ventana emergente y no funcionaba bien en algunos dispositivos, he seguido modificándolo para solventar estos problemas. Si deseas el código actualizado, puedes ponerte en contacto conmigo aquí.

https://www.facebook.com/canelaynaranjahttps://plus.google.com/113959360953869424615/posts/p/pubhttps://twitter.com/canelaynaranjahttps://www.bloglovin.com/blogs/canela-y-naranja-12728367/http://www.pinterest.com/canelaynaranja/

http://www.canelaynaranja.es/p/blog-page_14.html
http://www.canelaynaranja.es/p/blog-page.html

You Might Also Like

5 COMENTARIOS

  1. Jejeje! Ahora queda muy bien tu traductor! Yo tengo el de google pero si tengo un ratillo veo si puedo poner el tuyo ...te lo copio... Porque viene muy bien sobretodo si está en checo o en ruso algún blog...que de eso ni papa entiendo...
    Gracias por el tuto!
    Besos

    ResponderEliminar
  2. Pues me parece estupendo!, yo de momento no lo tengo instalado porque digamos que la traduccion de google me parece un poco pésima la verdad, pero probaré este y a ver que tal sale!

    ResponderEliminar
  3. Mírala qué apañada!!! A mí no me ha dado por poner traductor porque apenas se me entiende en español, como para que se me entienda en turco. Jajajaja. Besotes!!!

    ResponderEliminar
  4. Por ahora no lo tenemos previsto poner, Marta. Pero si llega el día, ¡tendremos muy en cuenta este tutorial!

    Muchos besos de las dos

    J&Y

    ResponderEliminar
  5. Pues la verdad que a veces me vendría bien, aunque soy medio masoca y me gusta adivinar lo que pone en los post de otras lenguas ( jajajaj). Algún día meteré la pata bien cuando ponga un diy de alguien y me equivoque mi intuición. Un besazooooo

    ResponderEliminar