51

Traductor del Escaparate (II)

He estado recibiendo solicitudes para adaptar el traductor que estoy usando en El Escaparate y que ya había explicado antes como colocar en el blog, para usarlo en blogs con fondo negro.

[1] Colocaremos el mismo código que en el anterior post, con la diferencia de que la dirección (url) de la imagen con las banderas será otra, ya que esta tendrá el fondo de color negro.

<center><img src="http://img527.imageshack.us/img527/632/84056383at1qx3.png"/></center>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang">
<option value="EN"/>Español - Inglés
<option value="FR"/>Español - Francés
<option value="DE"/>Español - Alemán
<option value="IT"/>Español - Italiano
<option value="PT"/>Español - Portugués
<option value="RU"/>Español - Ruso
</select>
<input value="http://elescaparatederosa.blogspot.com/" name="wl_url" type="hidden"/>

<input style="font-size: 70%; width: 50px;" value="Traduce" type="submit"/>
</form>

[2] Añadiremos ahora unas líneas de código en la parte del CSS de nuestra plantilla, para conseguir que el traductor se vea como más nos guste.
/* Código del traductor -------- */

form#translateForm select {
background-color:#000;
color:#ddd;
border:1px solid #999;
}
form#translateForm input {
background-color:transparent;
color:#ddd;
border:1px solid #999;
}

Ejemplo
Si dejamos este código tal como está, el resultado sería este:

Traductor imagen
Modificaciones

El código CSS está dividido en dos partes:

a) La que pertenece a la casilla donde se muestran las opciones para escoger idioma:
form#translateForm select {
background-color:#000;
color:#ddd;
border:1px solid #999;
}
background-color:#000;
Es el color de fondo de la "cajita" de selección, en este caso está en color negro (#000) pero podemos escoger el que queramos.

color:#ddd; Es el color del texto, está en un color gris clarito, pero al igual que antes, podemos cambiarlo.

border:1px solid #999; Es borde que rodea a la caja de opciones, aquí podemos escoger el ancho (1px), el color (#999) y el tipo de borde (solid, dashed, dotted)

b) Y la que pertenece a la del botón "Traduce":
form#translateForm input {
background-color:transparent;
color:#ddd;
border:1px solid #999;

Aquí los cambios que pueden hacerse son los mismos que en la parte anterior, con la única diferencia de que lo que modificamos afecta al botón de "Traduce".
Traductor ejemplo
Nota
Si añadimos el código con el CSS para el traductor explicado anteriormente (con el fondo blanco) también servirá para adaptarlo a nuestro gusto.

Actualización:
Botella al mar ha tenido la gentileza de compartir con nosotros la imagen de las banderitas con fondo transparente, de está manera se adaptará a cualquier color de fondo:

http://img126.imageshack.us/img126/1228/84056383at1qx3ry5.png

Entradas Relacionadas:

51 comentarios:


Tango

Hola Rosa, sólo te pasaba saludar. Como siempre encuentro que tus códigos solucionan la vida a muchos de nosotros. :)

Lo único que me da pena es que te visito mucho y no aparezco en el autoroll de Criteo :(

Anónimo

Jope, Bromo, nunca me había fijado en eso...se supone que tendría que ir rotando entre todas las visitas, yo hay blogs que visito de tanto en cuanto y si aparezco en ellos...

Carlos Isohipsas

Hola:
Siento que la consulta no esté relacionada con el post.
Tengo un blog que tengo prácticamente abandonado, aunque realidad nunca lo cogí.
He estado ojeando tu blog y me ha encantado, pero no he encontrado lo que buscaba, aunque sí otras cosas que no buscaba, jaja.
Quiero cambiar el icono de la pestaña de la página. ¿Sabrías decirme cómo se hace?
La dirección del blog es:
http://ittopoavila.blogspot.com/ aunque la verás por el perfil.
Ahh otra cosa. ¿Se puede cambiar el título de las pestaña sin cambiar el título del blog?
Como ves son neófito, pero quiero aprender un poquillo.

Un saludo y gracias.

Anónimo

Carlos, tranquilo, puedes dejar la consulta donde mejor te parezca ;-)

Lo que me comentas supongo que es el dibujito que sale arriba en el navegador, para eso mira en este post:

Favicon

En cuanto a la otra pregunta, te diré que puedes cambiar el título del blog, pero no el de la "pestaña" para eso hay que hacer un nuevo blog, cada blog tiene su url que se ve en el navegador y no puede cambiarse.

padam

si lo hubiera sabido antes... y yo cambiando con el photoshop el fondo de la imagen jaja. bueno, nunca es tarde!!

gracias

Anónimo

Kissu,se siente ;-)
Según me van llegando más pedidos sobre alguna cosa, pienso que es interesante y es entonces cuando la publico...

Anónimo

Me ha venido muy bien esto para hacer una cosa inmente, ya lo veras proximamente, juasss besotes, por cierto si el tomillo te da asco!!!, entonces lo QUIMICO no????....puafff xd!!!;))

Anónimo

Yolanda, hola wapa!
¿Qué será eso en lo que estás trabajando?...ya tengo ganas de verlo ;-)

Solo el tomillo, otras plantitas e infusiones me las tomo...de todos modos, si no fuese gracias a la química como tu dices...ay, no se si estaría ahora mismo escribiendo esto...

Leida

Hola Rosa, hace mucho no entraba a tu blog, esta buenisimo, este traductor esta bien. Excelente, felicidades. Desde el caribe con cariño.

Talin

Hola Rosa
Podrías decirme exactamente donde en la plantilla debo colocar el código CSS?
GRACIAS

Anónimo

Talin, sin problema :-)

El primer código para mostrar el traductor va en un elemento html y el segundo, el CSS, puedes ponerlo, por ejemplo, antes de ]]></b:skin>

Talin

Al final no he sido capaz a colocarlo con fondo negro. Eso del CSS no es mi fuerte. Gracias de todas formas.

Anónimo

Talin, para que quede tal cual se ve en el ejemplo, has de olvidarte del resto del post, es decir, desde donde dice "modificaciones" hasta el final a ti no te interesa.
Tendrás que limitarte a copiar el primer código y pegarlo en un elemento html-javascript en tu sidebar y luego el segudo código (css) en la plantilla justo antes de ]]></b:skin>

Carlos Isohipsas

Hola Rosa:

No sé si te mandé un post el otro día. Juraría que sí.
El caso era que si sabrías decirme como hacer una plantilla que fuese extensible en función del tamaño de la pantalla pero hasta un límite en que se quedase fijo.Que el sidebar se quedase fijo siempre.
Aún así me gustaría poder insertar una imagen en la cabecera y que se fuese ocultando la parte derecha según se hace mas pequeña la ventana en vez de que la imagen se meta en el corner.
Cuanto pido, sorry
Un saludo y gracias por la rapidez de tu anterior contestación

Anónimo

Carlos, si medejaste un comentario, y ya te respondí, aquí:

Aquí

Talin

GRACIAS Rosa, ahora SI que lo conseguí.

Anónimo

Rosa.........por qué no puedo modificar la caja del traductor?
Será porque no he puesto la imágen de las banderas?

Graciasssssssssssss por pensar en las plantillas black!!!

te lo dejo acá

http://itinerariosenelarte.blogspot.com/

Anónimo

mi granito de arena...

Hoy ha sido un día productivo en cuanto a mis blogs... y quiero aportar mi pequeño grano de arena:

El link del cuadro de banderitas con fondo "transparente", así es fácil ponerlo en cualquier blog. Yo ya lo probé.
http://img126.imageshack.us/img126/1228/84056383at1qx3ry5.png

Un beso
Lucero

Anónimo

Botella al mar, mil gracias! Ahora mismo lo añado a la entrada :D

Syl

Hola Rosa! muchas gracias por este traductor,ya hacia tiempo que buscaba uno en condiciones :)

Anónimo

Syl, gracias a ti! :D Este suele ir bastante bien.

Anónimo

Hola Rosa, esto del traductor me ha sido muy util, de verdad muchas gracias

OptimusTronic

Genial el traductor. muchas gracias, este blog esta muy bueno. :D

PARRAS VINOS & ESPIRITU

muy bueno de verdad y ademas sencillo

Admin

Me gusta mucho este traductor ;)
Lo he intentao poner antes en un blog que tengo de pruebas, pero lo que es la imagen de las banderitas sale un cuadrado con una cruz, de error, puede ser por la url de la imagen?
Seguro que soy yo que no he hecho bien algo.:((
Saludos!

Rosa

ZDG La última imagen, la de fondo transparente o sea, la que vale para todos los blogs, está perfecta acabo de comprobarlo:
http://img126.imageshack.us/img126/1228/84056383at1qx3ry5.png

Admin

Buenos dias!
Ya logre poner el traductor en mi blog :D
lo que no se es por que las banderitas estan mas hacia arriba, pero bueno, esta bien asi ;)

Anónimo

ZDG Yo lo veo como debe ser :o

Admin

Pues tienes razon, acabo de entrar en mi blog con Firefox, y se ve perfecto, pero mi navegador es Explorer y se ven las banderitas mas hacia arriba. ;)
Un saludo!!

Anónimo

ZDGAy el IE siempre fastidiando |O

PETRONOMICOM

Hola Rosa como la imagen de las banderitas ya no esta disponible, me hice una, que comparto con quien guste, saludos ;)

Banderitas

PETRONOMICOM

se me olvidaba, es transparente y a mi me quedo muy bien en mi blog, les dejo el enlace por si alguien la quiere checar antes JUVENTUS

Anónimo

PETRONOMICOM Muchisimas gracias!
Quedan muy bien, así, redonditas :D

c

Hola Rosa, coloque el traductor en peliculasantacruz.blogspot.com , puse un nuevo gadget html copiando tu código para fondo negro, luego fui a la plantilla y agregue las lineas de código que pones en esta entrada, pero no se ve a imagen del rectángulo con la banderillas, se ve una lista de los idiomas, como o puedo solucionar??? María c

c

Rosa, creo que ya lo solucione... aun que sin banderillas, pero igual no queda mal. Gracias, Maria

Anónimo

c La imagen se ha borrado del servidor, pero al final de la entrada está la url de una con fondo transparente que si funciona...

c

Gracias Rosa... Una pregunta, en el blog peliculasantacruz.blogspot.com, tengo 3 gadget con links que los puse para que se vean solo en una entrada. Pero cuando los despliego quisiera que los links se vean alineados a la izquierda y no centrados, como puedo hacer? María C

c

Y algo mas Rosa, en el blog elenacabrejas.blogspot,com, puse ''leer mas con resumen'', pero solo quiero usarlo en una sola entrada que es la que aparece en la pagina de inicio NOVEDADES LITERARIAS, Pero veo que las palabras ''leer mas...'', están debajo de todas las entradas, Como puedo sacarlas??? Maria C

Anónimo

c Especificame por favor que gadget son o como verlos, pues no he podido localizarlos...

En cuanto al leer mas con resumen y varios otros sistemas, suele pasar eso y no puede evitarse.
Hay que tener cuidado cuando se edita la entrada de hacerlo siempre desde html y no cambiar a redactar, y aún así muchas veces el enlace aparece en todas...esos trucos son los primeros que se iban descubriendo y no están demasiado "afinados"

c

Gracias Rosa por responderme. Respecto a los gadget son los que se pueden ver desde la entrada: ''Noticias y enlaces relacionados'', en peliculasantacruz.blogspot.com.
Respecto a lo de ''leer mas'', voy a estudiar el código de ''leer mas solo en los post escogidos'' ya que yo antes lo había hecho así y me había funcionado bien, pero luego se me ocurrió agregar información en esa entrada y como seguramente lo hice en modo ''redactar'' se desapareció el truco, entonces puse nuevamente el código en la plantilla, pero creo que puse el que corresponde a todos los post, veré si puedo deshacer el camino. Muchas gracias, María C

c

Rosa, anoche vi el documental del leopardo, es impresionante!!! Voy a mostrarselo a mis hijos, gracias por compartirlo, María c

Anónimo

c Ahora si :D
En el código que les pusiste a los gadget para expandir/contraer hay una línea como esta más o menos, cambia center por left sin tocar nada más:
<div align='center' id='' style='display: none;'>

Es impresionante el vídeo del leopardo, aunque me puso bastante tristona, pues me imagino cual fue la suerte final del bebé babuino sin nadie para amamantarle...

Anónimo

Hola Rosa, muchas gracias por el tutorial es fantástico me sirvió mucho para poner el traductor en mi blog, de igual forma me gustaría hacer una pequeña contribución a tu gran aporte, e realizado unas banderas con un diseño diferente, las tengo en una entrada en mi blog si gustas puedes ponerlas para en tu magnifica entrada :D

y muchas gracias por la ayuda que nos brindas a todos los que empezamos en esto del blogger ;)

saludos

mi blog es este: Mente-blog

Anónimo

Hola Rosa: ¿Que debo hacer para que el traductor quede en un solo botón en vez de cada idioma por su lado?

Anónimo

Unhidalgo Perdona, pero no entendí la pregunta :o

OCTAGONO3D

Hola Rosa! una pregunta como no entiendo muy bien, el 1 en que parte lo pongo debajo o arriba de que linea?? igual la 2. gracias

Anónimo

OCTAGONO3D Cualquiera de los dos va incluido en un gadget HTML/Javascript.

arquitectura online

Hola gracias ya entendi como colocarlo pero ahi dos problemas se ve bien chico y al hacer clic en traducir me envia a tu blog. soy OCTAGONO3D

Anónimo

arquitecturaPues claro, no solo es copiar y pegar... mira en el código que está la url de mi blog y cámbiala por la del tuyo...

Unknown

Hola Rosa, Genial todo tu blog.
Empiezo con esta nueva experiencia de los blogs y me estoy enganchando. Suerte que hay blogs como el tuyo para no perder la cabeza y hacer tu blog algo mas personalizado.
Mi pregunta es como puedo hacer para que el traductor del blog sea mediante un icono de la banderita en el Navbar del Catalán al Castellano y al ingles.
Muchas gracias.
Un saludo.
http://pollistrolbikers.blogspot.com/

Anónimo

Sinecuanum ¿Hablas de la Nvbar de Blogger?... ahí no podemos añadir nada...

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S