JMiur [E]

Algunos preguntan qué es eso del nuevo widget de Google Translate y cómo integrarlo a Blogger.

Es sencillo, basta ir a Google Translate Tools, seleccionar el lenguaje de nuestro sitio:

Select the language of your webpage:

y luego, copiar y pegar el código que nos dan en un elemento HTML que agregaremos en la plantilla.
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&amp;up_source_language=es&amp;w=160&amp;h=60&amp;title=&amp;border=&amp;output=js"></script>


No hay mucho que podamos personalizar ya que como todo gadget, el código es inaccesible sin embargo, hay pequeños detalles que podemos manejar y para eso, lo mejor es ir a la edición de la plantilla, expandir artilugios y buscar el elemento HTML que lo contiene.

Allí, agregamos las propiedades de estilo que nos interesen; por ejemplo:
<b:widget id='HTMLX' locked='false' title='NUESTRO TITULO' type='HTML'>
<b:includable id='main'>
.......
<div class='widget-content'>
<data:content/>
<style>
table.ig_reset {margin: 0 auto; width: 190px;} /* centramos el bloque */
table.ig_reset iframe {margin: 0 auto;} /* centramos el iframe */
table.ig_reset td {text-align: center !important;} /* centramos los textos */
/* las propiedades del texto inferior */
table.ig_reset a {color: #FFFFFF !important; text-decoration: none !important;}
table.ig_reset span {color:#FFFFFF !important;}
</style>

</div>
.......
</b:includable>
</b:widget>
Y si quisiéramos eleminar el texto inferior, colocamos:

table.ig_reset a {display: none;}
table.ig_reset span {display: none;}

19 comentarios:

FeR  

Listoo! Ya lo apliqué a mi blog, me gustaría poder modificarlo más pero bue, es lo que hay no?
Otra cosita si no es mucha molestia pasate por mi blog y tirame tu opinión sobre el diseño que me volví loco con el bendito código blogger jajaja! Pero quedó lindo (para mi)

flacoPerro!

Eso si, todavía estoy viendo donde hostear el favicon xq skydrive no permite ese tipo de archivos!

Responder
FeR  

Me olvidé de agradecerte che m sirvió mucho tu blog para hacer la plantilla, gracias!

Responder
solrac  

La nueva versión de 'mi traductor' la estoy haciendo utilizando este Servicio de Google .. obviamente no será como éste, habrá iconitos con las banderas como en el otro .... también se podrá incluir en cualquier parte de una página web (y no solo en Blogger), admitirá cualquier idioma (origen->destino) que tenga Google, podrá ser algo personalizable y alguna otra cosilla.

PD: Es posible que te pida algo de ayuda, ya lo tengo acabado al 99%, solo tengo que resolver unos pequeños problemas con el IE.

Responder
JMiur  

Fer:
SkyDrive te permite alojar archivos ICO sin inconveniente (EJEMPLO)

solrac:
Me gusta la idea, avísame cuando esté lista.

Responder
Claudio - Poca Tinta  

Buen dato, pero no me agrada como queda en una plantilla con fondo oscuro.

Pero gracias, siempre se aprende por aca

Responder
Soliradidad  

Hola Jamiur, estoy observando que tu traductor es diferente a al que aparece en esta entrada, pero sin embargo es de google. me gusta porque solo hay que presionar sobre la banderita.aparte de que no oculta el leer mas. como puedo obtenerlo como el tuyo claro con mas banderas-

y disculpa la molestia pero precisamente no tengo , por el momento buscador, el que voy a colocar quiero colocarlo sobre la cabecera en la misma dirección en donde tengo los enlace de la acnur, amnistia internacional etc. me puedes ayudar en eso que tengo que hacer.
y de antemano gracias.

Responder
JMiur  

El traductor que uso es el "normal", el "antiguo". Sólo es un enlace que debes colocar en la plantilla (no en un elemento HTML). Este es el código:

<a expr:href='&quot;http://64.233.179.104/translate?
ie=UTF-8&amp;oe=UTF-8&amp;langpair=es|en
&amp;u=&quot; + data:blog.url'>
TRADUCIR
</a>

Se escribe todo junto. Caulqueir cosa, si no se comprende, me envias un mail y te lo envio porque en los comentarios es algo complicado de escribir.

Ahora, el buscador lo veo arriba de la sidebar, a la derecha. Tiene algún detalle de CSS que puede corregirse. No estoy seguro si ese es el lugar donde quieres dejarlo o moverlo. En principio, me parece un buen lugar pero debes explicarme un poco más.

Responder
Soliradidad  

Bueno Jmiur, te envié al correo la explicación con 3 fotos para que lo entiendas un poco mejor.
gracias Jmiur

Responder
JMiur  

Acabo de recibirlo y contestarlo.

Responder
Soliradidad  

JMiur gracias pude borrar los bordes y bueno implementar el traductor tuyo el que no tiene banderitas en el espacio arriba de la cabecera, pero cuando coloco el mio el de las banderitas que solo son un lujo , no funciona. te envié el código del traductor que uso tu sabrás que le hace falta.
nuevamente gracias jmiur.

Responder
Soliradidad  

por cierto JMiur, no veo ninguna parte del traductor que estoy usando donde pueda agregar otros idiomas. que hay que hacer en este caso

Responder
JMiur  

Por lo que veo en el traductor que está arriba, lo que lefalta es el contendio de las secciones; mejor dicho, por l oque veo del código fuente, están mal escritas.

Por ejemplo, dicen:
<option value='FR'></option>Español - Francés

y deberían decir:
<option value='FR'>Español - Francés</option>

el texto, debe estar siempre entre las etiquetas:
<option value='XXXX'>el texto</option>

Responder
Soliradidad  

JMIUR, Gracias pude colocarlo arriba donde queria y funciona bien... pero quedo muy arriba, en el medio y con un borde que lo hace ver las banderitas mas grandes. ¿ que tengo que colocar para que se ubique totalmente a la izquierda, centrado y sin borde ?...Gracias nuevamente.

Responder
JMiur  

En este momento, lo que tienes es esto:

<div style="list-style-type: none; list-style-image: none; list-style-position: outside;">

Lo mejor es identificar ese bloque y luego usar CSS; por ejemplo, cambiarlo por esto:

<div id="traductor">

Y agregar antes de </b:skin>:

#traductor{float:right;list-style-type:none;padding:10px 0;}
#traductor img {border:none;}

También, veo que separas las banderitas con un un caracter _
Eso no hace falta y puede eliminarse ya que la separaciòn también la puedes controlar con CSS; por ejemplo, en lo anterior:

#traductor img {border:none;padding-right:5px}

Responder
Soliradidad  

Gracias JMIUR, como siempre tan certero, pero sabes algo que descubrí, y es que cuando colocaba el primer código que que me diste para cambiarlo usando CSS, me salia siempre error y que existe un problema y me comunicara con BLOGGER, decidí variar el orden y colocar primero el que va antes de b:skin , y funciono sin ningún inconveniente. claro que el traductor de GOOGLE , oculta el leer mas o las entradas ampliadas, dejando un espacio en blanco. tocara esperar hasta que aparezca otro que mejore ese detalle.
nuevamente gracias

Responder
Matiassss  

buen dia...muy buen blog..mi pregunta es la siguiente...yo ya agregue la barrita de google para traducir..pero no me aparece en la barra para el desplazamiento los otros idiomas a los que traducir

que será?

lo tengo puesto en http://elblogit.blogspot.com

saludos y gracias!

Responder
JMiur  

Matiassss: No veo el problema ya que se despliega la lista de idiomas normalmente. Explícame un poc o más.

Responder
selene  

hOLA Jmur he puesto todo lo que esplicabas en tu post pero no me gusto mucho como quedo me gustaria basicamente que quede mas omenos como el tuyo :o si no es demasiado atrevimiento bueno en otros colores pero mas o menos es la idea de lo que queria, si te fijas en mi blog como quedo. Podiras decirme que tengo que hacer muchas gracias un beso desde diario de una desconocida

Responder
JMiur  

Selene:
Si se trata del que tengo en la sidebar, ese sólo es un enlace con una imagen. Hay que ponerlo directamente en la plantilla y no en un elemento HTML. Sería algo así pero todo junto:

<a expr:href='&quot;http://64.233.179.104/translate
?ie=UTF-8&amp;oe=UTF-8
&amp;langpair=es|en
&amp;u=&quot; + data:blog.url'>
LA IMAGEN </a>

Si n ose comprende me envias un mail (si es que es ese del que hablamos)

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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