Continuando con el tema de los traductores, y ya que tenemos pocas alternativas en cuanto a qué servicios de traducción podemos utilizar en nuestro blog, habrá que ver de qué manera los podemos implementar si es que no queremos insertar algún widget ya pre-configurado.
Si lo ponemos en la sidebar, nos encontraremos con una dificultad, deberemos indicar la dirección URL de la página donde estamos. Hay que recordar que Blogger genera páginas diferentes según ciertas condiciones, la página principal, las página individuales, los páginas con etiquetas o con resultados de una búsqueda, etc.
Lo primero que debemos hacer es agregar un elemento HTML a la plantilla al que le damos un título, por ejemplo, TRADUCTOR, ahora, tenemos dos posibles soluciones. La primera es la propuesta en Solrac Korner, una vez creado elemento, escribimos en él cualquier cosa y lo guardamos. Vamos a editarlo directamente en la plantilla pero debemos agregar algún contenido porque sino, Blogger no nos dejará guardarlo.
Ahora, iremos a la solapa Edición HTML de la plantilla y marcaremos la opción Expandir plantillas de artilugios para poder ver el código completo y buscaremos el título que hayamos colocado. Deberíamos ver algo así:
Lo primero que debemos hacer es agregar un elemento HTML a la plantilla al que le damos un título, por ejemplo, TRADUCTOR, ahora, tenemos dos posibles soluciones. La primera es la propuesta en Solrac Korner, una vez creado elemento, escribimos en él cualquier cosa y lo guardamos. Vamos a editarlo directamente en la plantilla pero debemos agregar algún contenido porque sino, Blogger no nos dejará guardarlo.
Ahora, iremos a la solapa Edición HTML de la plantilla y marcaremos la opción Expandir plantillas de artilugios para poder ver el código completo y buscaremos el título que hayamos colocado. Deberíamos ver algo así:
<b:widget id='HTMLn' locked='false' title='TRADUCTOR' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
donde HTMLn será diferente según sea el caso (n es un número que coloca Blogger automáticamente).
Casi cualquier elemento agregado tiene la misma estructura y lo único que nos interesa de todo eso es <data:content/>. Ahí, en ese dato, Blogger guarda el contenido del elemento. Lo que vamos a hacer es borrarlo y escribirlo manualmente.
En general siempre será un enlace de este tipo:
Casi cualquier elemento agregado tiene la misma estructura y lo único que nos interesa de todo eso es <data:content/>. Ahí, en ese dato, Blogger guarda el contenido del elemento. Lo que vamos a hacer es borrarlo y escribirlo manualmente.
En general siempre será un enlace de este tipo:
<a expr:href="direccionURL" target="_blank">Texto o Imagen</a>
y utilizaremos un dato interno de Blogger llamado data:blog.url para que automáticamente se detecte la página donde estamos. Justamente esto es lo que nos obliga a trabajar directamente de la plantilla. Ese tipo de dato interno no puede colocarse directamente en los elementos.
Si queremos poner el traductor de Google escribiremos:
Si queremos poner el traductor de Google escribiremos:
Si queremos poner los traductores de Online-Translator escribiremos lo siguiente:
Para traducir de español a inglés:
Para traducir de español a inglés:
Para traducir de español a ruso:
Para traducir de español a francés:
Para traducir de español a alemán:
Por supuesto, podremos poner los textos que queramos o reemplazarlos por imágenes.
La otra solución, si no se quiere modificar la plantilla es usar JavaScript que dispone de las función document.location.href que nos permite saber la dirección URL donde estamos. Una vez que creamos el elemento, si queremos poner el traductor de Google escribiremos:
La otra solución, si no se quiere modificar la plantilla es usar JavaScript que dispone de las función document.location.href que nos permite saber la dirección URL donde estamos. Una vez que creamos el elemento, si queremos poner el traductor de Google escribiremos:
Ver el ejemplo TRADUCIR AL INGLÉS
Si queremos poner los traductores de Online-Translator, para traducir de español a inglés:
Ver el ejemplo TRADUCIR AL INGLÉS
Para traducir de español a ruso:
Ver el ejemplo TRADUCIR AL RUSO
Para traducir de español a francés:
Ver el ejemplo TRADUCIR AL FRANCÉS
Para traducir de español a alemán:
Ver el ejemplo TRADUCIR AL ALEMÁN
¿Confuso? No hay la menor duda.
42 comentarios:
la verdad es que les haces un favor a todos los que quieren poner cosas un poco menos fáciles en el blog
amor
Gracias por comentar. En realidad no tengo un plan ni una idea predeterminada, voy poniendo lo que voy haciendo o lo que voy experimentando. Supongo que la mezcla es inevitable :)
O sea, que no es intencionado y que eres un desastre... lo sabía!
:D
Por otra parte, te prometo que tengo guardada una entrada burlándome de lo mal que funcionan estos traductores.
Especialmente el Babel Fish...
Dice unas cosas que son pa'mearse, jeje!
En fin...
Renton, tus dos afirmaciones son absolutamente exactas. La única diferencia es que con el tiempo, los traductores pueden mejorar, yo, no.
Espero leer pronto ese post :)
Muy buenas de nuevo jmiur. Espero que Rosa no se moleste por hacerte a ti la misma consulta que le he hecho a ella, pero he pensado que dos mentes trabajan mejor que una sola, y si alguno de los dos me puede echar un cable, pues mejor que mejor. La cosa es que en mi afán por ir mejorando el blog he llegado a un punto en el que veo necesario la inclusión de subcategorías. Por ponerte un ejemplo, dentro de la etiqueta Manuales, quiero que haya una "subetiqueta" que se llame Linux. ¿Es eso posible con Blogger?
Muchas zenkius de antemano. Y un saludo.
Me temo que en Blogger no hay nada parecido a eso. Tampoco he visto ningún tipo de información al respecto, sólo quejas por no poder hacerse.
Si las categorías son fijas, o sea si no se modifican constantemente, podría hacerse algo similar a eso, agrupándolas manualmente. No sé, estoy pensando en voz alta :)
Piensas.. luego existes... y si existes tu... obviamente debe existir una solución, que sumado al hecho de ser tu mismo el que lo está pensando y el único de los presentes capaz de hacerlo.. te corresponde a tí encontrar dicha solución. Jejeje.
Me he liado yo mismo escribiendo eso, pero no me digas que no es una retórica interesante :D. Vamos que si se puede hacer seguro que encuentras la manera de hacerlo, y por aquí estaré para ser ilustrado en semejante hazaña ;).
Jajaja, no prometo nada pero pensaré en el tema :)
Muy buenas. Como va la vida? Te comento. Rosa me ha dado una "solución" al problemilla en forma de parche que en realidad puede hacer perfectamente las funciones que yo buscaba.
Me ha comentado que puedo usar un "drop down menu" (un menu desplegable).
Aquí: http://mayuuchiha.blogspot.com/2007/08/men-desplegable-en-blogger.html
se explica como hacer uno, pero no sé bien por qué al insertar el código en mi plantilla no sale en forma de menú como si ocurre en la demo que puedo probar cuando modifico el código.
Creo que puede venir derivado del tema del hospedaje de las dos carpetas que hay que alojar. No sé como narices puedo alojar una carpeta sin haberla comprimido previamente. Lo he intentado con un cliente ftp pero no me aclaro. Y en páginas como Gigasize, Megaupload y demás únicamente puedo alojar archivos...
Vamos, que he pensado que igual es éste un buen lugar para que alguien me saque de la ignorancia o me ilustre con otra manera mejor de implantar un menu desplegable como ése con "subcategorias" en mi blog (y no estoy mirando a nadie pero justo en mi pantalla veo la foto de un señor con bigote...) xD.
Un saludo!
Y siento lo de las erratas ortográficas en forma de tildes (que cuando escribo rápido ni me fijo y ahora he visto alguna).
Tal como dices el problema es el hospedaje, deberías tener un servidor que te permita crear carpetas (via FTP) o un servidor propio; ambas cosas son difíciles.
Una posibilidad sería modificar los archivos para que no utilicen paths relativos sino absolutos, en ese caso, podrían subirse a cualquier sitio, como por ejemplo Google Pages. Por lo que veo, aparentemente, el CSS puede ser modificado para que funcione así, en ese caso, incluso podría copiarse y pegarse en la plantilla de Blogger. Bastaría cambiar el path de las imágenes.
Lo que no te puedo contestar es sobre el script ya que es bastante complejo.
Ahora bien, como este tipo de menues no tiene nada que ver con las labels de Blogger sino que es algo que se debe hacer manualmente, tienes otras alternativas más sencillas. Incuso en el mismo sitio, en Dynamic Drive, hay una sección dedicada a esto:
http://www.dynamicdrive.com/dynamicindex1/
http://www.dynamicdrive.com/dynamicindex1/dropdowncontrol.htm
http://www.dynamicdrive.com/dynamicindex1/scrollerlink.htm
http://www.dynamicdrive.com/dynamicindex1/tabmouseover.htm
http://www.dynamicdrive.com/dynamicindex1/slashdot.htm
http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm
En la web hay muchos ejemplos de menues horizontales de este tipo. Aquí hay algunos:
http://phoenity.com/newtedge/horizontal_nav/
http://www.javascriptkit.com/script/script2/csstopmenu.shtml
http://sperling.com/examples/menuh/
http://www.strictlycss.com/articles/article/59/horizontal-and-tabbed-css-menu-with-sub-menu
La mayoría es puro HTML y CSS así que pueden ser implementados en Blogger sin demasiados problemas.
Ok probaré y ya te contaré. Gracias!
Creo que no me ha quedado del todo mal. Cuando puedas echale un vistazo ;). Zenkiu very mach.
Rectifico. No es que no me haya quedado del todo mal. Es que con IE se ve como el culo. Salen los menús en vertical y con un caos impresionante. Con lo bien que se ven en Firefox... me cago en... ¿Sabes si puedo solventarlo? Creo que no es plan dejarlo así teniendo en cuenta que más de un 50% de mis visitantes utilizan IE (en sus diferentes versiones) cuando entran a mi blog. ¿Se te ocurre algo?
Probablemente pueda solucionarse, lo que no veo es dónde lo has colocado ya que necesitaría verlo online.
Es que lo habia quitado hasta tener una solución, pero lo vuelvo a poner a ver si me puedes decir algo.
Ya está en su sitio otra vez esperando a ser compatibilizado con IE jeje.
Te diría que es bastante complejo, tirando a imposible y no vale la pena. Está realizado utilizando una serie de propiedades que Internet Explorer no tiene y por lo tanto, habría que rehacerlo por completo.
Fijate en Gema Blog que ha puesto un menú desplegable hace un par de dias.
Parece que tendré que ponerme a pensar en el tema seriamente, veré qué puedo hacer pero, en principio, verifica que el código que usas sea compatible con IE porque sino siempre habrá problemas :)
Así lo haré. Muchas gracias. Es una lástima porque el menú este me gustaba.. habrá que buscarse otro xD.
Bien, he conseguido colocar un menu y todo ello haciendo uso de un cliente ftp que ya domino como la palma de mi mano y desde el cual puedo alojar las tan anisiadas carpetas xD. El menu lo he modificado a mi gusto y ya no se ve un caos bestial al usar IE. No obstante el menu sigue sin ser funcional en el maldito navegador de Microsoft ya que al posarse con el ratón sobre él, no salen las subcategorías como si ocurre a la perfección con Firefox.
Ésto tiene que poder solventarse de alguna manera no demasiado compleja puesto que en el ejemplo http://www.javascriptkit.com/script/script2/csstopmenu.shtml
si que funciona correctamente con el Explorer. Por tanto debe faltarme alguna línea de código o algo al final que no consigo averiguar como poner.
Prometo no darte más el coñazo con este asunto, que debes estar ya harto...
Recuerdo haber visto ese menú y mi problema fue el contrario, no podía hacer que funcionara en Firefox :D
Intentaré verlo otra vez. a simple vista, lo único que no parece estar mal son los paths a las tres imágenes:
menuarrow.gif
menubgover.gif
menubg.gif
en Blogger, el path debe ser una URL (comenzar con http)
Sé que no estaban los paths a las 3 imágenes, me gustaba más como quedaba sin ellos, pero es que no sabía que había que ponerlos forzosamente. Los probé y como me gustaba más en blanco y sin la flechita, decidí quitarlos. Pero vamos, los he vuelto a poner y el problema persiste. Sigue sin funcionar en IE.
De lo que me dí cuenta es de una cosa al final del código que pone algo así como p id='iepara'/ y el el "iepara" ese pensé que podía ser algo de internet explorer. Pero vamos que solo estoy pensando en voz alta y seguramente sin mucho criterio (por ignorancia del tema mayormente).
Así que infinitamente sería poco el agradecimiento hacia ti si consigues dar con el kit de la cuestión. La salud del menú de mi blog está en tus expertas manos ;).
Lo de id='iepara' es sólo para separar el menú del contenido inferior y en este caso no tiene importancia.
Veré si me hago tiempo a mirar este menú otra vez :)
Saludos de nuevo JMiur. Estoy aquí erre que erre con el tema dandole vueltas...investigando, preguntando... y seguro que al final daré con la tecla.
Únicamente escribo para contarte mis progresos (que la verdad son escasos para el tiempo que le he dedicado).
Resulta que he probado a descargarme el nuevo Internet Explorer (tenía instalado el 6.0) y resulta que con el 7.0 si que va el menú.. pero no se carga bien la páguna del Blog!! Jajajaja. Esto es para reirse (por no llorar).
Ya independientemente de la barra de menús y de cualquier otra historia... ¿no hay ninguna forma de compatibilizar una web (en este caso un blog) para que se vea correctamente (o decentemente) lo abras con el explorador que lo abras?
¿Es cuestión de la plantilla o eso no tiene nada que ver?
Personalmente quiero que ya que tengo una página que me intento currar todo lo que puedo, pueda ser ésta visible y navegable (sea con el navegador que sea) para cualquier visitante que acceda a ella. ¿Hay algo que pueda hacer?
Todo este tema es motivo de una entrada que seguramente será publicada hoy (o mañana, dependiendo del huso horario).
Expectante me tendrás (más bien mañana que hoy, porque por España tenemos ya las nueve de la noche y va a ser hora ya de ir yendo a cenar xD).
Por cierto, ya he visto que no soy el único con este problema. Vagabundia creo que tiene un problema similar con el IE... tampoco se carga la página como es debido.
Como dicen por aquí: "Mal de muchos... consuelo de tontos" :)
Aunque a mi la verdad...no me consuela ;).
Jabba, este blog ha sido verificado para que funcione en IE y debería funcionar normalmente en IE7, con las diferencias inevitables del caso. No he tenido información contraria al respecto.
Captura de pantalla.
Podría ser posible que alguna cosa no funcionara pero, de ninguna manera no se cargaría la página, no hay cosas tan extrañas como para ocurra esto.
En principio, en IE7 se han solucionado algunas limitaciones de IE6, ampliándose las posibilidades y, por lo tanto, deberías tener menos problemas que antes y no más.
Si esto que te ocurre es un problema común a muchos sitios que visitas, habría que pensar si no se trata de un problema de instalación.
Hola JMiur: implementé el traductor que tiene Gem@ en su blog http://gemablog-.blogspot.com/2007/11/traductor-multilinge.html
pero veo que tengo el inconveniente que señalás. Me traduce sólo la última entrada . Intenté con el método que das pero me perdí
desde el data:blog.url
no se donde poner ese dato en el código que figura en la página de Gem@. Saludos
chol
JMiur:probé el otro método y tampoco puedo. Necesito traducir del español al italiano por eso no uso tus códigos. Por si te interesa el blog es: http://fundacioncalabresa.blogspot.com/
saludos
Te dejé el mensaje anterior. Saludos
El problema es que, para que funcione correctamente, debe estar colocado directamente en la plantilla. Es engorroso de explicar pero, veremos si puedo hacerlo.
1. Creas un elemento HTML. Le colocas un título y escribes dentro lo que quieras, no importa qué. Si no hay nada, no te deja gaurdarlo. Lo guardas.
2. Vas a Edición HTML de la plantilla, expandes los artilugios y buscas ese elemento recién creado, es sencillo si buscas el título; imagina que lo llamas TRADUCTOR. Verás algo así:
<b:widget id='HTML1' locked='false' title='TRADUCTOR' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
3. Eliminas eso marcado en negrita:
<data:content/>
4. Y, en su lugar, copias y pegas el código de Gem@
5. Por último, en ese código, sólo debes cambiar una cosa. En lugar de:
<input value='http://tublog.blogspot.com/' name='wl_url' type='hidden'/>
colocas:
<input expr:value='data:blog.url' name='wl_url' type='hidden'/>
Eso, en lugar de enviar la URL de la página principal de tu blog, lo que hace es enviar la página donde estés, sea la que sea.
Gracias por contestarme JMiur:
saqué <data:content/> y coloqué el código con la modificación que me decís:
<img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/>
<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: 90%; width: 170px;" name="wl_trglang">
<option value="IT"/>Español - Italiano
<option value="EN"/>Español - Inglés
<option value="FR"/>Español - Francés
<option value="DE"/>Español - Alemán
<option value="PT"/>Español - Portugués
<option value="RU"/>Español - Ruso
</select>
<input expr:value='data:blog.url' name='wl_url' type='hidden'/>
<input style="font-size: 90%; width: 70px;" value="Traduce" type="submit"/>
</form>
pero no se si al cambiar
<input value='http://tublog.blogspot.com/' name='wl_url' type='hidden'/>
por
<input expr:value='data:blog.url' name='wl_url' type='hidden'/>
tengo que colocar la URL del blog en algún lado
probé con esto y cuando voy al blog no aparecen los idiomas para trasladar.
Gracias nuevamente y si me podés ayudar sería muy grato.Estuve leyendo tu blog el fin de semana y quedé admirada por tus conocimientos de html y css (incluyendo estilos en el blog) . Debo confesar que hay veces que no puedo seguirte, tengo que estudiar más.
saludos
Es decir probé sustituyendo <input value='http://tublog.blogspot.com/' name='wl_url' type='hidden'/>
por
<input expr:value='data:blog.url' name='wl_url' type='hidden'/>
todo en la plantilla (luego de crear un elemento en con cualquier cosa en diseño)
si te es útil podría mandar mi plantilla a algún correo tuyo.
gracias nuevamente
Estuve mirando tu perfil, a mí me gusta Bradbury (mi favorito es Fahrenheit 451) más que Asimov. Exceptuando algunos relatos de Asimov. Y aunque no se muy bien porque también Phillip Dick. Mantengo el blog de una biblioteca teatral por si te interesa la dirección es:
www.bibliotecateatralelpublico.blogspot.com
Simple pero cuando tenga tiempo lo voy a arreglar. Saludos
Efectivamente, hay que hacer eso, cambiar por:
<input expr:value='data:blog.url' name='wl_url' type='hidden'/>
La URL del blog no se coloca ya que ese dato es data:blog.url. No el del blog sino el de la página del blog donde se esté, sea la principal o sea una página individual.
Ya veo el error al que te refieres. Es un problema del código. Fíjate en estas instrucciones:
<option value="IT"/>Español - Italiano
Todas las etiquetas OPTION tienen una barra de cierre antes del texto así que no se muestran. Cambia todas para que sean de este tipo:
<option value="IT">Español - Italiano</option>
Aunque no tengo post "traducible", lo he colocado en mi blog de pruebas para que lo veas.
Hola JMiur: algo estaré haciendo mal, hoy ya no lo intento más. Gracias por contestarme. Voy a intentar nuevamente, con más cuidado y menos resfrío.
salufos
Cualquier cosa, me mandas un mail y te envío el código por correo. aún está en mi blog de pruebas así que, debería funcionar.
Paciencia :)
JMiur: ví el blog de prueba con el traductor. Muy bueno. Te he mandado un mail porque no puedo (sin resfriado ahora) conseguir el mismo resultado. Tengo error en el código que no me deja guardar los cambios en la plantilla. Gracias
Saludos
marisol
Acabo de ver los mails, Marisol. Por suerte, el código sigue allí así que en un rato lo copio y te lo mando en un archivo de texto para que no haya errores.
Mmm, hace rato hice un traductor de Google para mi blog y pensé que los que usan Gem@ y Rosa eran los más parecidos (de hecho descargué las imágenes del blog de Gem@), pero veo que uno de los que muestras aquí tiene casi casi la misma estructura. :((
Las diferencias son, aparte del diseño, que yo no lo agregué en ningún gadget, las direcciones son ligeramente distintas y el mío abarca todos los idiomas soportados actualmente por Google.
En estos momentos, dos años después de haber sido escrita esta entrada, hay decenas de variaciones que pueden ser aplicadas utilizando las APIs de Google.
Sería bueno ver una revisión de algunas de ellas, ya que no las conozco.
¿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 ...