JMiur [E]

El widget traductor que propone Dicas Blogger es una de las formas más simples de agregar esta funcionalidad en cualquier blog. Basta copiar y pegar el código en un elemento HTML de nuestra sidebar y listo.

El código original lo podemos ver acá y claro, está pensado para traducir desde el portugués a diferentes idiomas así que si queremos adaptarlo al español, deberemos cambiar algunas cosas.



<div style="padding:10px 4px 3px 4px;text-align:center;">

<!--–GOOGLE TRANSLATE MINI FLAGS–-->

<div align="center">

<!--– Español a Chino –-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Czh-CN&hl=es&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Chinese" src="http://lh5.ggpht.com/_mcq01yDJ2uY/Sdke4C8za2I/AAAAAAAAAkU/Mpfn_ntCweU/China.png" title="Google-Translate-Chinese" /></a>

<!--– Español a Francés –-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cfr&hl=es&ie=UTF8'); return false;" title="Google-Translate-Spanish to French "><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Spanish to French" src="http://lh4.ggpht.com/_mcq01yDJ2uY/SdkfGSkRgfI/AAAAAAAAAkc/X4E87SASLtA/France.png" title="Google-Translate-Spanish to French" /></a>

<!--– Español a Alemán –-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cde&hl=es&ie=UTF8'); return false;" title="Google-Translate-Spanish to German"><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Spanish to German" src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke3rFjMUI/AAAAAAAAAkE/o0kR0MfngXA/Germany.png" title="Google-Translate-Spanish to German" /></a>

<!--– Español a Italiano –-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cit&hl=es&ie=UTF8'); return false;" title="Google-Translate-Spanish to Italian"><img alt="Google-Translate-Spanish to Italian" style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke2xCmrPI/AAAAAAAAAj0/Jv14yyDo1i4/Italy.png" title="Google-Translate-Spanish to Italian" /></a>

<!--– Español a Japonés –-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cja&hl=es&ie=UTF8'); return false;" title="Google-Translate-Spanish to Japanese BETA"><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Spanish to Japanese" src="http://lh5.ggpht.com/_mcq01yDJ2uY/Sdke3f2KbNI/AAAAAAAAAj8/xyGLFdUZbVY/Japan.png" title="Google-Translate-Spanish to Japanese" /></a>

<!--– Español a Inglés –-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cen&en=es&en=UTF8'); return false;" title="Google-Translate-Spanish to English "><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Spanish to English" src="http://lh4.ggpht.com/_mcq01yDJ2uY/SdkhG4bjxqI/AAAAAAAAAks/Ws6AzZdnZTw/United%20States%20of%20America%20%28USA%29.png" title="Google-Translate-Spanish to English" /></a>

<!--– Español a Ruso –-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cru&hl=es&ie=UTF8'); return false;" title="Google-Translate-Spanish to Russian BETA "><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Spanish to Russian" src="http://lh5.ggpht.com/_mcq01yDJ2uY/SdkfGVESWsI/AAAAAAAAAkk/-ruu99vFElQ/Russian%20Federation.png" title="Google-Translate-Spanish to Russian" /></a>

<!--– Español a Portugués –-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cpt&hl=es&ie=UTF8'); return false;" title="Google-Translate-Spanish to Portuguese"><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Spanish to Portuguese" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguwfEqt-rxuwuSJcMyuaCaKWXnLlEneJw9RkVnDyeBvxfm9yPF058-qqKuKqDAs2lSgdJ4RJCRgTUgkwKJYmJlB0T4k1pydqf2NkQY_plIuVzbogcm6F5hbKlOSVWckcbGSnMt/s0/Brasil.png" title="Google-Translate-Spanish to Portuguese" /></a>

<center><a href=http://www.dicasblogger.com.br/2009/04/translator-widget-tradutor-para-blogs.html target="_blank"><small>Translator Widget by Dicas Blogger</small></a></center>
</div>

</div>

No es demasiado complicado agregarle idiomas; cada enlace tiene un evento onclick que es el que define el tipo de traducción y donde sólo debe cambiarse el código del idioma; por ejemplo, esto traduciría del español al catalán:
onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cca&hl=es&ie=UTF8'); return false;"


La lista de idiomas se amplia regularmente y en este momento es la siguiente:

af afrikaanssq albanésde alemánar árabe
be bielorrusobg búlgaroca cataláncs checo
zh-CN chinoko coreanoht criollo haitianohr croata
da danéssk eslovacosl eslovenoes español
et estoniofi finlandésfr francéscy galés
gl gallegoel griegoiw hebreohi hindi
nl holandéshu húngaroid indonesioen inglés
ga irlandésis islandésit italianoja japonés
lv letónlt lituanomk macedonioms malayo
mt maltésno noruegofa persapl polaco
pt portuguésro rumanoru rusosr serbio
sw suajilisv suecotl tagaloth tailandés
tr turcouk ucranianovi vietnamitayi yiddish

112 comentarios:

Claudio Casco  

HOla JMiur, he colocado en mi blog (www.polikratos.blogspot.com) el widget, recien veo que no funciona el traductor al portugués. Recorri el html y no veo error porque he copiado del código de tu post. Espero tu ayuda y comentario.

Cordialmente,

Responder
Juliana  

Hola JMiur. Que bueno! Voy a actualizar mi post y poner el enlace para tu blog. Gracias.

Responder
Argi  

A implementarlo..
ya que en estos días de prepo agregó un texto de-más...
el widger provisto por google...

...y queda de lindo la sidebar con medio texto :X

Responder
Vku  

2 cosas:
En el código esta target="_blank" el cual, si se quita te manda igualmente a otra pestaña.

Y rel="nofollow" para que está, ¿que es?, tengo entendido que es para que no aparesca como link en las buscadores o algo asi.

Responder
JMiur  

El Filómata:
Es la terecera vez que me preguntan lo mismo en el dia y recién ahora me doy cuenta del error. Ya corregí el post. El código del idioma estaba mal escrito. Fíjate que dice pr y debería decir pt; es en esta parte:
http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Cpt&hl=es&ie=UTF8
Basta que cambies ese pr por pt para que funcione. Lamento la equivocación :$

Gracias, Juliana; es un honor :)

Argifauve:
Lo vi recién; creo que este es mucho mejor; mucho más configurable.

Vku:
El código target="_blank" es una redundancia. rel="nofollow" es para evitar que el enlace sea indexado por los buscadores. Los enlaces a indexar deben ser siempre relevantes y, en este caso, no lo son. De esa manera, se jerarquizan los otros.

Responder
Sailor  

Hola JMiur!! Me ha gustado mucho el traductor y quiero implentarlo pero no en un widget... me puedes guiar por favor ya que me da el siguiente error:
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The reference to entity "langpair" must end with the ';' delimiter....
de momento lo estoy probando como widget pero en IE se ve mal...me queda abajo.... Saludos!!! Y como siempre muchas pero muchas gracias por la ayuda... he aprendido un montón contigo.

Responder
Argi  

Si ya se configurará en su momento..

la cosa de la reiteración en la reiteración de "Gugle".. bue :X

bue sacar ya me lo saque de encima.. :D

Responder
JMiur  

Sailor©:
Ponerlo en la plantilla directamente no será nada sencillo ya que en Blogger, se deberán cambiar algunas cosas.

primero, debes reemplazar todos los caracteres & por &amp;
luego, las comillas simples por &quot;
por último, las comillas dobles por comillas simples

Te doy un ejemplo de cómo se verá sólo uno de ellos (la parte del enlace nada más ya que el resto no importa):

<a onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=es%7Cpt&amp;hl=es&amp;ie=UTF8&quot;); return false;' rel='nofollow' target='_blank' title='Google-Translate-Spanish to Portuguese'<

Responder
Sailor  

Gracias Jmiur!!! es un horror... lo que me explicas será mejor que tome el código y "parsearlo"??? lo voy a intentar y te cuento..
Un abrazo!!!

Responder
JMiur  

Sí, no es nada sencillo, es muy engorroso ¿no tienes forma de agregarlo en un elemento HTML?, allí, no tendrás esos problemas.

Responder
Sailor  

Gracias Jmiur!! queda bastante bien lo probaré por algunos días.
Quiero hacer una consulta de otro tema porque no se como resolverlo... estuve revisando el tiempo de carga y tamaño de mi página y algunos post... encontré que el script que usamos en "entradas relacionadas" pesa como 451k aprox.. también lo vi en tu página y pesa casi lo mismo... me gustaría bajar el peso del script.. trate de comprimirlo pero da algunos errores... sabes como podríamos bajar el peso del script... últimamente he visto que la indexación se ha visto un poco afectada por los tiempos de carga y el tamaño de mis archivos... realmente hago mi mejor esfuerzo por entender...pero no tengo conocimientos de programación y nada por el estilo... si tienes alguna idea será bienvenida!!

Responder
Sailor  

Jmiur!! sobre mi última consulta por el tamaño de los scripts.. se me olvido colocar los link donde revise el tiempo de carga de un post mio y uno tuyo... aqui van... espero sirvan de algo....

http://tools.pingdom.com/?url=http://vagabundia.blogspot.com/2007/10/blogger-posts-relacionados-1.html&treeview=0&column=objectID&order=1&type=0&save=true

http://tools.pingdom.com/?url=http://conmigo8.blogspot.com/2010/04/estres-ansiedad-depresion.html&treeview=0&column=objectID&order=1&type=0&save=true

(Please !! no me digas nada por el tamaño de mis fotos estoy de horror!!! jajajaja!!!)

Responder
JMiur  

EL script de Entradas relacionadas que tienes en tu plantilla, sólo tiene unas 70 líneas, alrededor de 2,3KB, podría comprimirs que significa, eliminar espacios innecesarios; con eso, se tendrían unos 1,5KB y una línea larguísima que sería imposible de editar.

En la práctica, no cambiaría demasiado ya que, lo que importa no es el tamaño del código sino lo que hace y, en este caso, lo que hace es usar Json que es una forma de leer los feeds y es eso lo que produce la demora; es el tiempo que se tarda en que los datos sean enviados y recibidos; el script de tu plantilla lo que hace es, simplemente procesarlos y eso es algo rápido.

Voya ver si mañana publico algo de todo esto porque me han estado preguntando mucho :D

Responder
Viktor Lecter  

Ciertamente útil ahora que muchos sufrimos con el gadget de Google el cual hace unos pocos días vivió una "actualización" y ahora inserta un título enorme que deforma los widgets del blog en los navegadores Firefox y Chrome.

¿Sabes alguna forma de editar con CSS este gadget Jmiur?, quizá haciendo que salte la linea abajo o quitando la imagen de "con la tecnología de Google".

Ya están haciendo algunos post sobre el asunto, varios ya nos estamos quejando:
http://www.forosdelweb.com/f13/quitar-con-tecnologia-google-753798/
http://www.forosdelweb.com/f53/google-translate-modificar-aspecto-770375/

Pero hasta ahora nadie da solución a la catátrofe.

Ayudanos Jmiur ¿si?.

Responder
Viktor Lecter  

Esto me pasa por usar el maldito formulario de comentarios de Blogger, ya te envié el mismo mensaje, pero la pantalla se me puso azul y le tuve que hacer click a actualizar, total que no se si llegó el mensaje, te lo repito... borra este si te llegó el anterior.

Ciertamente útil ahora que muchos sufrimos con el gadget de Google el cual hace unos pocos días vivió una "actualización" y ahora inserta un título enorme que deforma los widgets del blog en los navegadores Firefox y Chrome.

¿Sabes alguna forma de editar con CSS este gadget Jmiur?, quizá haciendo que salte la linea abajo o quitando la imagen de "con la tecnología de Google".

Ya están haciendo algunos post sobre el asunto, varios ya nos estamos quejando:
http://www.forosdelweb.com/f13/quitar-con-tecnologia-google-753798/
http://www.forosdelweb.com/f53/google-translate-modificar-aspecto-770375/

Pero hasta ahora nadie da solución a la catátrofe.

Ayudanos Jmiur ¿si?.

Responder
JMiur  

Victor:
Si es el mismo gadget que supongo, he vsto que agrega ese texto enorme y se ve espantoso salvo que la sidebar sea muy ancha.

No es posible quitarlo ya que se trata de un gadget o sea, un IFRAME y por lo tanto, no puede ser personalizado más allá de las opciones que nos den.

Mi consejo, quítalo y usa algo como este que sólo es una serie de enlaces así que no tendrás problemas a la hora de darle formato.

Responder
Asociación Por Ti Mujer  

Hola JMIUR. Muy provechoso tu blog. Quisiera poner algunos paises más, has puesto como incluir otros paises, pero de donde saco las banderas para otros nuevos? Gracias anticipadas

Responder
JMiur  

En estas páginas hay sets de íconos a descargar:
http://www.famfamfam.com/lab/icons/flags/
http://www.inkarcade.com/shop/icons/world-flag-icons-pack/prod_261.html

Y estos son dos packs:
http://www.icondrawer.com/free_icons/Flags.zip
http://jacorre.com/downloads/pixel_flag_icons.zip

Responder
** EDGAR **  

Gracias, lo andaba buscando...
Muy bueno me funciona al 100%
Gracias por el aporte,
Buen Blog 1000%...

Responder
Whisper  

Muy útil, muchas gracias por el dato ;).

Responder
Adrián J. Messina  

Excelente, era lo que buscaba.
Lo pude adaptar sin problemas en un menu fijo estilo dock, viendose las imagenes, aunque hay un pequeño problema con la traduccion.
Resulta ser que al probar las traducciones en mi sitio, hay letras que figuran GIGANTES, hasta se desconfigura la visual del blog,
Tenes idea a que se debe?

Muchas gracias,

Responder
JMiur  

es una pregunta que no sabría responderte.

Responder
Adrián J. Messina  

Ooops, bueno gracias igual, así quedará :X

Responder
Apartamento en Barranquilla  

Hola JMiur. Enhorabuena por tus ayudas, me han servido de mucho. Ahora tengo un problema con las banderas, y es que me salen en vertical en vez de horizontal. ¿Puedes darme alguna solución? Gracias y enhorabuena de nuevo.

Responder
EspabilaIT  

Buenas tardes JMiur, excelente blog y excelente apuntes... pero una consulta sobre las traducciones de Gooble.

¿Cómo haces para que solo te traduzca la parte de las noticias que colocas y los comentarios asociados y no los widgets ni la sidebar como tienes tu en tu blog?

Mi traducción funciona a medias, traduce la noticia y sus comentarios pero visualmente lo hace después del español de manera seguida. Feo!!!!

Y encima, como puedes observar en el blog de construcción el resto me sale un mensaje indicativo que no puede traduccirlo...

Alguna sugerencia gracias.

Responder
JMiur  

Apartamento en Barranquilla: ¿Cómo es que salen verticales? Dame un ejemplo.

EspabilaIT: No sé cómo funciona cuando se trata de gadgets como las que usas porque son IFRAMEs es decir, paginas externas que no están en tu blog.

Responder
Adrián J. Messina  

Con respecto a mi consulta, pongo aqui como he solucionado una parte,
en sidebar h2 span , tenia una fuente de 56px y no se porque motivo,
ya ha quedado solucionado.

Responder
Apartamento en Barranquilla  

"Apartamento en Barranquilla: ¿Cómo es que salen verticales? Dame un ejemplo."
Pues es tal como te lo digo, en vez de salir las banderas una al lado de la otra en una linea horizontal, me salen una debajo de la otra en una línea vertical. No sé si tiene que ver con la plantilla, ya que lo he puesto en otro blog y funciona perfectamente.

Responder
JMiur  

Eso ocurre porque las imágenes y/o enlaces tienen un salto de línea. Si está en un post, debe ser escrito en una sóla línea; si no, deberías mostrarme el ejemplo concreto online.

Responder
Apartamento en Barranquilla  

Está en el sidebar. OK, dime como hago para mostrartelo online.

Responder
JMiur  

En tu plantilla, tienes defindas que todas las imágenes tengan la propiedad display:block; y con eso, no podrás poner nunca una imagen al lado de otra.

Te sugeriría que eliminaras eso:

img {
.......
display:block;
}

Responder
Apartamento en Barranquilla  

Muchas gracias JMiur, problema solucionado y algo más que aprendo de ti.

Responder
Anónimo  

cOLL AMIGO LA BOTASTES CON ESTE POST

Responder
Mariah Carey Spain  

Buenas tardes,

He añadido el traductor a mi blog y queda perfecto. Lo único es que cuando haces click en una bandera se abre en otra ventana y me gustaría que sea en la misma página que muestre el blog en el idioma seleccionado. ¿Me podéis ayudar? ¿Que tengo que editar en ese código?

¡Muchas gracias y buen trabajo!

Responder
JMiur  

Para eso, debes modificar el código. Fíjate que en cada enlace, hay un atributo así:
target="_blank"
si los quitas, en lugar de abrirse en una nueva ventana, se abrirá en la misma.

Responder
Mariah Carey Spain  

Hola JMiur, quito exactamente lo que me has dicho y se sigue abriendo en una nueva página en lugar de la misma, como me gustaría.

¿Sabes otra forma para que se abra en la misma?

Muchas gracias por contestar.

Responder
JMiur  

Entiendo. No me había fijado bien. Lo que ocurre es que para conseguir eso habría que rehacer todo. Poner el código directamente en la plantilla y eliminar el onclick ... no sé si vale la pena y estoy pensando en voz alta.

En la plantilla deberia colcoarse un enlace "normal":

<a expr:href='&quot;http://www.google.com/translate?u=&quot; + data:blog.url + &quot;&amp;langpair=es|de&amp;hl=es&amp;ie=UTF8&quot;' .......>

Bastante complejo de escribir por cierto.

Responder
Mariah Carey Spain  

No se crear el enlace, pensaba que era algo más sencillo. Lo quería como lo tienes en tu blog, que se abre aquí mismo.

Gracias de todas formas, seguiré investigando.

Responder
JMiur  

Sí. Es engorroso de armar, lo sé. Veré si puedo armarlo y ponerlo en una entrada.

Responder
Mariah Carey Spain  

Lo agradecería muchísimo!

Un abrazo :)

Responder
Antonio Urdiales  

Hola JMiur
Ofreces una ayuda excelente, sobre todo para aquellos que nuestra formación es autodidacta, así que vaya por delante mi agradecimiento por ello.

Pero tengo una duda que quizás puedas solucionarme. Pongamos que yo quiero traducir mi blog al catalán y copio el "Onclick" que tan amablemente nos has dejado. Perfecto, ya puedo traducir mi blog al catalán ¿pero como hago para añadir el icono de la bandera junto a las demás?

Gracias de nuevo y disculpas por mi torpeza.

Saludos.

Responder
JMiur  

A ver si entiendo, Antonio. Quieres agregar uan traducción al catalan y agregar la bandera.

Si es así, fíjate en el código que se muestra en el post, cada idioma está indicado, por ejemplo:


<a target="_blank" rel="nofollow" onclick=" ............. >
<img ........ la imagen de la bandera />
</a>

Así que, simplemente, creas otro de esos bloques y lo colcocas en el orden que quieras.


<a target="_blank" rel="nofollow" onclick=" ............. >
<img ........ la imagen de la bandera />
</a>

Responder
Antonio Urdiales  

Muchas gracias por la rapidez en la respuesta.

Creo que te he entendido. Es decir, que la imagen que yo me he descargado de internet de la bandera catalana la tengo en c:\mis documentos\bandera catalana, es esa la dirección que le tengo que poner en para que la bandera salga junto a las otras que se me copiaron por defecto (la inglesa, la francesa, la alemana...) al cargar el traductor...

Si no es así, te ruego que perdones mi torpeza y abusando de tu amabilidad, me indiques paso a paso como debería hacerlo, si no es mucho pedir.

Gracias de antemano por soportar mi ignorancia.

Saludos.

Responder
JMiur  

Antonio:

Lo que debes hacer con la imagen es subirla a internet. La forma más sencilla es que lo hagas en el mismo Blogger; creas una entrada nueva, agregas la imagen y copias la direccion que te de que será algo que comenzará siempre con http:// Luego, borras la entrada o la dejas como borrador por si alguna otra vez quieres subir alguna otra imagen. No hace falta publicarla.

Sino, utilizas culaquier otro servicio de alojamiento de imágenes. En todos, te darán la URL que siempre comenzará con http://

Responder
Antonio Urdiales  

De nuevo muchas gracias por tu paciencia, tu tiempo y tu dedicación, ahora todo ha quedado perfecto.

Un saludo.

Responder
JMiur  

Perfecto, Antonio, me alegra que se comprendiera.

Responder
Music  

Hola, me parecio bastante interesante eso del translate, pero quisiera saber cómo haría para que cuando le de clic a la banderita, se habra la traducción en la misma ventana, ya la traducción se habre en una pestaña nueva, y si fuera tan amable, también me gustaría saber cómo abrir la traccdución en una ventana nueva. Gracias. Lo necesito urgente si fuera tan amable de responderme. Saludos

Responder
Music  

Disculpeme, acabo de leer que alguien escribio casi lo mismo, sobre mi duda, quisiera saber si pudo encontrar la solución y poder mandarme la solución, y TENGO otra duda, quisiera saber cómo puedo hacer, cuando tradusco mi página, que desaparesca la "barra" de traducción de google que sale arriba de la página, así como la que tiene usted en la suya, que sí desaparece cuando se traduce, espero su respuesta, muchas gracias.

Responder
JMiur  

Respecto a la barra, sigo diciendo lo mismo, desconozco el tema.

En este blog no funciona igual porque simplemente, no uso la barra de Google sino un enlace directo al traductor. Fíjate en esta entrada.

Responder
Luis Cervant.  

Excelente info gracias.
Lo he aplicado a mi nuevo blog.

Miren haber cómo quedo

Responder
Claudia =)  

Fantástico .. muito obrigada!!

Responder
Anónimo  

Hola JMiur!

Queria agradecerte porque en verdad me sirvió mucho el código, ya que me estaba cansando de buscar por toda la web. Pero te hago una consulta: cómo puedo hacer para que en la nueva ventana no se muestre el texto original entre oración y oración traducida?

Desde ya muchas gracias.

Responder
JMiur  

Eso lo desconozco; no sé si es posible.

Responder
LeidenSpain  

Gracias por el tutorial, realmente útil.
¿Tendrías los iconos de los demás idiomas? Es que no los encuentro "los equivalentes" buscando por el google y se nota mucho la diferencia respecto a los que tú has puesto.

Responder
JMiur  

No. Esas son las únicas imágenes que tengo. Puede ser que haya algunas otras en el post de Dicas Blogger.

Responder
Priamo  

Quisiera poner una banderita de España pero Google dice que no traduce de Español a Español, como se puede solucionar eso.
La idea es pasar de una banderita a otra pero que codigo necesito para pasar de ingles a castellano o luego de frances a castellano
saludos

Responder
JMiur  

No comprendo. Las bandera indican el color del idioma a traducir; si la página está en español, no es necesario traducirla.

Responder
Priamo  

A ver si he traducido al ingles y quiero ir a español tendré que darle a la banderita en español.Google dice que no puede traducir una pagina que ya está en español. En esta web. www.galeriamayoral.com funcionan las banderitas como a mi me gustaria.
saludos.

Responder
JMiur  

La web que muestras está hecha en Joomla por lo tanto, utiliza PHP y no un gadget o servicio de traducción automática de Google sino que cada idioma es un archivo diferente:

http://www.galeriamayoral.com/index.php?lang=ca
http://www.galeriamayoral.com/index.php?lang=es
http://www.galeriamayoral.com/index.php?lang=en

Utilizando Blogger, nada de eso puede hacerse y te debes limitar a emplear los servicios de traducción automáticos que toman el control del sitio.

Responder
Priamo  

Entendido. Podrias orientarme a una web o servicio donde conseguir el .php de cada idioma y como implementarlo en mi web que estoy confeccionando.
Muchas gracias

Responder
JMiur  

Como te dije, en Blogger eso no es posible ya que no ejecuta PHP.

No existe tal cosa como un código para cada idioma, son páginas escritas en diferentes idiomas y quien las escribió es quien las creó. Se hacen manualmente una por una.

Responder
Priamo  

Gracias de todas maneras y aunque no solucionado me ha quedado el tema aclarado del todo.

Responder
Adrián J. Messina  

Una pregunta, ¿Cómo puedo hacer para colocarlo en la página individual de la entrada?
Encuentro la línea de donde debería ir que si no me equivoco sería debajo de esta:

...div class='post-header-line-1'....

, pero me tira un error de que está mal cerrada la plantilla.

Responder
JMiur  

Habría que ver qué escribes. Fíjate de cambiar los caracteres & por &amp;

Responder
Adrián J. Messina  

Caballer JMiur, si efectivamente, funciona colocando el código debajo de esa línea:
...div class='post-header-line-1'....

Pero el enlace con la bandera hay que pasarlo a texto plano.
Ya lo hice y funcionó.

Gracias.

Responder
JMiur  

Todo o que escribes en la plantilla es texto plano. Si te refieres a que debes cambair las comillas dobles por simples, etc, si, así es porque la plantilla es XML de tipo estricto.

Responder
Unknown  

En tu plantilla, tienes defindas que todas las imágenes tengan la propiedad display:block; y con eso, no podrás poner nunca una imagen al lado de otra.
Hola, gracias por tu blogg. Elimine esto que sugerias pero ahora quiero volver a ponerlo porque desde el explorer se ven los widgets con borde negro que no me gusta. No me acuerdo de donde lo elimine; me lo puedes recordar ? es que no lo encuentro. Me puedes dar una solucion alternativa ? Gracias. Pablo

Esto sugerias tu:
Te sugeriría que eliminaras eso:

img {
.......
display:block;
}

Responder
JMiur  

No recuerdo de qué se trataba pero, de toda formas la propiedad display:block que es la que te sugerí que eliminaras para que pudieras alienear las imáges a usto y que no se centraran de forma utomática, nada tiene que ver con ese borde.

No sé si has borrado todas las propeidades o sólo esa.

para quitar el borde, quita background: transparent; de:

a:link, a:visited {}
a:hover {}
a:active {}

y agrega:

a img {border:none;}

Responder
Unknown  

gracias ! aun no lo he intentado pero quieres decir que no seria mas conveniente reestablecer lo que elimine (que me sugeriste) en vez de poner lo que me propones...no se, tu mandas porque yo no tengo ni idea ! el problema que tengo ahora es mas visual que otra cosa, porque si entras con el google chrome no veo ese enmarcado negro de todas las imagenes pero si se ve cuando se entra con el explorer...no se muy raro. Y yo no quiero que sea el enmarcado que no me gusta. No se si tu lo ves.....www.clubalpinobarcelona.com 1000 Gracias

Responder
JMiur  

No sé que es lo que has borrado; de todos modos, ¿por que no haces lo que te sugiero y te fijas en IE?

Responder
Angie  

Me gustaría hacer uno en el que estuviera el español, finés (Finlandia), inglés, francés, portugués, alemán, gallego,vasco y catalán..podrías poner un tutorial para "tontos" esque no me enteré bien...ahí masticadito estaría genial!

Responder
JMiur  

Para cada idioma simplemente debes cambiar esasdos letras que los definen y poner la benaderita que quieras.

Responder
Unknown  

Hola,

Recibo tu consejo de sustituir esto pero no lo encuentro en los coddigos de mi plantilla: esto es lo que me sugeriste:

No recuerdo de qué se trataba pero, de toda formas la propiedad display:block que es la que te sugerí que eliminaras para que pudieras alienear las imáges a usto y que no se centraran de forma utomática, nada tiene que ver con ese borde.

No sé si has borrado todas las propeidades o sólo esa.

para quitar el borde, quita background: transparent; de:

a:link, a:visited {}
a:hover {}
a:active {}

y agrega:

a img {border:none;}

Esto no lo encuentro...bueno separado si pero no junto.

Gracias. Pablo
www.clubalpinobarcelona.com

Responder
JMiur  

En tu plantilla dice esto:

/* Default links */
a:link, a:visited {
font-weight: bold;
text-decoration: none;
color: #000000;
background: transparent;
}
a:hover {
font-weight: bold;
text-decoration: underline;
color: #669922;
background: transparent;
}
a:active {
font-weight : bold;
text-decoration : none;
color: #669922;
background: transparent;
}

quita todo lo indicado.

lo de a img {border:none;} no es algo que esté sino que debes agregar.

Responder
Vero  

Graciasss!!

Responder
Unknown  

Gracias. Me ha funcionado ! lo que pasa ahora es que tras hacer esto...me salen los enlaces asi como los post subrayados y yo no los quiero asi...que hago para quitar el subrayado ?
Gracias por la paciencia ! www.clubalpinobarcelona.com
Pablo

Responder
JMiur  

Pues nada tiene que ver una cosa con la otra ya que el traductor no posee ninguna regla de estilo particular; sólo son enlaces.

Lo que veo en tu plantilla es que no hay definiciones de CSS apra los enlaces y por lo tanto, se muestran de modo normal, como lo hace el navegador; esto es, en color azul y subrayados.

Si queires personalziarlos, debes agregar la regla de estilo; por ejemplo, acá:

.clear {
clear: both;
}
ACA PONES LA REGLA GENERAL

a, a:visited, a:link {color:#COLOR; text-decoration:none;}
a:hover {color:#COLOR;text-decoration:none;}

Si quieres que los títulos sean distintos:

.post h3 a { color: #otrocolor; }

Responder
Unknown  

Me ha salido perfecto. Muchas Gracias. Eres un fenómeno !

Pablo

Responder
JMiur  

Perfecto :D

Responder
Unknown  

Hola, una dudas sobre el estilo letra:
como puedo cambiar en los titulos de los post el estilo de letra por ejemplo Tahoma.
Y cambiar el estilo de letra de los widget que de serie vienen en Arial
Y el estilo de letra de la cabecera del blogg ?
Por ultimo, he insertado el traductor de las banderas que sugieres y me queda muy bien, pero cuando pides traduccion se visualiza en la parte superior de la pantalla el servicio de Google y la posibilidad de cambiar el idioma..puedo ocultar eso ? En el anterior widget traductor de google que tenia quedaba oculto.
Gracias !

Responder
JMiur  

Para definir el estilo de las fuentes de los títulos, debes colocar la propeidad en esta parte:

.post h3 a {
}

Y para los títulso de la sidebar, en esta otra:

.sidebar h2 {
color: #555544;
}

No sabría decirte por que ocurre eso con el traductor ya que estoy usando el mismo sistema y no veo esa parte arriba de este blog.

Responder
Unknown  

Hola, ahora ya se donde pero que debo poner para que por ejemplo me cambie el estilo de letra ? de arial a tribuchet por ejemplo..? es que no se como hacerlo.
gracias !
Y como puedo hacer que Feedbuner envie los post con el titulo del Blogg en misnuscula aun teniendo yo el titulo en mayuscula ?

Gracias.

Responder
JMiur  

Por ejemplo:

.post h3 a {
font-family: Trebuchet MS;
}

Lo de Feedburner no sabría decíirtelo pero, puedes poenr el título en minúsculas y que se meustre en mayúsculas con esto:

#header h1 {text-transform: uppercase;}

Responder
Cêz  

JMiur, muchas gracias por ese widget, me encanta porque su código no es complicado de entender y esta en partes, pensé preguntarte cómo ordenar los idiomas, intuí que sería cortar y cambiar de lugar el código del idioma X y voilá! Me parece mas intuitivo que el widget de Google Translate con su pestaña y tantos idiomas

Gracias :)

Responder
Unknown  

gracias pero no lo entiendo. Como puedo cambiar el estilo de letra a Trebuchet de la cabecera si tengo esto:
.post h3 a { color: #black; }
margin-top: 5px;
font-size: 120%;

Y el estilo de letra de los titulos de los post y de los widgets?

Muchas gracias !

Responder
JMiur  

Eso que escribes y dice tu plantilla es un error. Las propiedades estám afuera de la llave. Debe ser así:

.post h3 a { color: #black;
margin-top: 5px;
font-size: 120%;
font-family: Trebuchet MS;
}

Eso es lo que define el estilo de los títulos de las entradas y la última propiedad sería la fuente del texto.

Responder
Unknown  

Muchas Gracias ! Tengo ya cambiado el estilo de letras de los titulos de los widgets asi como de los post, me gustaria tambien como puedo cambiar el estilo de letra del contenido del widget; tengo un widget que a pie de foto pone unas palabras, como puedo cambiar el estilo de esas palabras ?

Gracias

Responder
JMiur  

No sé cuál ese widget. En general, puedes cambiar los textos de la sidebar acá:
#sidebar { ........... }

Responder
Francisco Sanchez  

Buenas. He estado usando este metodo y funciona perfectamente pero hace una redireccion a google, perdiendo el hilo de tu web. Sin embargo tu rediriges otra vez obteniendo 2 cosas.
1º que no se vea el frame de google translator
2º que aunque haya un pequeño tiempo de carga, permanezca en tu web.
Me podrias decir como hacer esto? gracias

Responder
JMiur  

Para eso, simplemente, agrégale target="_blank" a la etiqueta del enlace.

Responder
Francisco Sanchez  

No me has entendido creo. Aun asi, lo que quiero hacer no esta reflejado aqui, ya que si tu seleccionas un idioma, y te traduce la web, al seleccionar otro idioma ya deja de funcionar, porque la url la coge mal.

Responder
JMiur  

Cuando se traduce una página, via Google, el control pasa a ser de Google mismo; si te fijas la dirección URL verás que ya no es tu sitio y por lo tanto, las funciones internas del sitio, quedan reducidas.

Responder
Grito de Mujer | Woman Scream | Cri de Femme  

El mejor traductor lo trae integrado la barra de wibia.com ese traduce toda la pagina perfecta.

Responder
Asdrubal Sr Sol  

Gracias por compartir el gadget, obvio ninguno te traducira de una forma poetica tal como lo esta escrito en su idioma real. Este es el mejor que he visto, gracias

Responder
Radioaficionado CE4VJZ  

¡Hola qué tal!
El ejemplo de las 5 banderas que están arriba, permiten que al traducir se despeje el recuadro superior de Google; en cambio al copiar el mismo código e insertarlo en mi blog, permanece ese espacio de Google.
¿Cómo puedo hacerlo igual al ejemplo que está aquí mismo?

Responder
JMiur  

No sé cuál es tu ejemplo pero, si n orecuerdo mal, lo que está en la entrada es exactamente ese código; no hay diferencias.

Responder
Radioaficionado CE4VJZ  

Muchas gracias por responder JMiur y un feliz año 2012.

Lo que sucede, es que yo tengo que entender "con manzanas" al no saber el lenguaje apropiado para expresarme en estos temas:

Hago clic en una bandera de este artículo y la página traducida la veo despejada sin el encabezamiento del traductor de Google. En cambio, copié el código nuevamente y lo pegué en mi página, y al hacer clic en una bandera, ya no desaparece el recuadro de Google en la parte superior de mi página. Lo que me indica que el código es diferente o usted tiene algún código adicional en la plantilla para despejar el traductor¿?

Responder
JMiur  

No hay condicionales de ninguna clase; la única diferencia es que está agregado en la misma platilla y no se abre en un pop-pup; el código dice esto:

<a expr:href='&quot;http://www.google.com/translate?u=&quot; + data:blog.url + &quot;&amp;langpair=es%7Cen&amp;hl=es&amp;ie=UTF8"' rel='nofollow' title='Translate to English'> imagen </a>

Responder
Unknown  

yo lo que busco no es eso yo busco un widet que tu introduzcas el texto y el lo traduzca

JMiur  

Buesca en la web a ver si hay alguno que te sea útil.

Responder
Photonica  

¡Buenas!

Me gustaría saber como puedo hacer para que la traducción se realice en la propia página, sin que se abra la misma página en una pestaña nueva, ya que me resulta muy tedioso tener 2 veces abierta la misma página.

Un saludo, y gracias de antemano (:

JMiur  

Quitando target="_blank" de los enlaces.

Photonica  

Gracias por responder, pero es lo que intenté y sigue ocurriendo lo mismo :S

JMiur  

En lugar de window.open() usa documen.location.href. Algo así:

onclick="documen.location.href = 'http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=es%7Czh-CN&hl=es&ie=UTF8';"

Photonica  

Nada, sigue abriéndose en otra página.

JMiur  

¿Dónde está colocado tu ejemplo para verlo online?

Responder
Marψa del Campo  

Debo decir que yo intento poner el traductor al catalán pero ni me sale la bandera (no sé cómo se hace) ni, al pinchar sobre ella, se traduce nada... ¿No faltarán códigos que cambiar?

JMiur  

El ejemplo para traducir al catalán es tal como está en el post. Las banderas no son parte del gadget y de no existir, debes buscar una propia y colocar la url.

Responder
Isa ML  

Buenas noches.

Tengo un blog en español, quiero traducirlo al inglés y tu tutorial me ha sido de mucha ayuda, pero me encuentro con un problema, y es que una vez que se está en la opción de inglés ¿cómo paso al español de nuevo?

JMiur  

Eso depende de las opciones que disponga Google Translate. Por eso es que los enlaces tienen un target="_blank" para que se abran en otra pestaña o ventana.

Isa ML  

Ok, pero yo no necesito tener mi página 2 veces abierta ¿no puede ser dentro de la misma pestaña?

JMiur  

Este en particular sólo es una serie de enlaces a Google Translate por lo tanto no tiene esa posibilidad porque estás cargando otra página de otro sitio.

En todo caso, busca otro tipo de traductor como el que ofrece Blogger mismo entre sus gadgets:
http://vagabundia.blogspot.com/2012/06/el-gadget-traductor-de-blogger.html


Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR