Hay dos formas de poner una imagen en la sidebar, una es con el gadget HTML/Javascript en el cual debemos poner el código de la imagen, y adicionalmente podemos agregarle estilos. Y otra es usando el gadget de Imagen, en el cual cargamos la imagen desde nuestro equipo o entregando una URL; y además podemos ponerle un pié de imagen y un enlace que dirija a otro sitio Web.
Hasta ahí todo está bien, el problema viene cuando usamos el gadget de Imagen y queremos que el enlace abra en una ventana nueva, ya que por defecto el enlace agregado a esta imagen se abre en la misma ventana y como dice mi querida amiga María Rosa, obliga al usuario a abandonar nuestro blog y eso no nos conviene.
Pero esto tiene solución, y es usando el mismo método que usamos para abrir la Lista de links en una ventana aparte, es decir, editaremos el gadget directo en la plantilla y agregaremos el atributo target='_blank'
El código completo del gadget es así:
<b:widget id='Image1' locked='false' title='Imagen' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != ""'>
<a expr:href='data:link' target='_blank'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Sólo agrega lo que está en color rojo y listo, el vínculo que le hayas puesto a esa imagen abrirá en una ventana aparte, con lo que evitaremos que el lector abandone nuestra página.
NOTA: Recuerda dejar un espacio en blanco antes de poner el atributo target='_blank'
Ciudad Blogger
guau potro esto es genial!!
ResponderEliminarpor eso tu blog es el mejor y el que mas visito
salu2!
Muchas gracias Blogio ;)
ResponderEliminarSaludos!
Muy bueno.
ResponderEliminarPor cierto donde puedo checar el pagerank.
saludos.
Me lo pillo!! Se puede hacer esto abriendo el nuevo enlace en una pestaña en lugar de una ventana?
ResponderEliminarholass, solo era para decirte que en el link al blog del escaparate capas te confundiste de link y pusiste este http://drgoliamiguel.blogspot.com/, era solo para eso, un abrazo grande y muy bueno el tuto :D
ResponderEliminarEl Venado, hay varios sitios, este es uno de ellos:
ResponderEliminarhttp://www.automaticsitemap.com/pagerank-badge.jsp
Fran Cruz, no, en realidad sólo se puede manipular ese comando, si abre en otra pestaña u otra ventana ya es cuestión del navegador :S
Ezequiel, no es ninguna confusión, el enlace es de mi amiga María Rosa, no de Rosa la del Escaparate ;)
Hola Pozo+10,
ResponderEliminarPuedes usar el código de este tutorial, es para abrir videos en ventanas emergentes pero igual puedes usarlo para las imágenes, sólo que en lugar de poner la URL del video pon a URL de la imagen.
Saludos.
310, apenas pasaron dos o tres días y ya tienes 10 seguidores más, veo que tu no pararás hasta ser el mejor...
ResponderEliminarJajaja, tu blog sigue y sigue creciendo!!! Espero que dentro de 10 años, cada uno siga con sus blogs, quiero ver con ancias tu blog dentro de diez años, o por lo menos dentro de 3 o 4
Buenísimooooo Potro :) :) :)
ResponderEliminarAhora lo hago.
Te cuento que para el PageRank tomé un truco de los chicos de La Trucoteca, Germán y Javier, que lo explican en el último post La Trucoteca - Boton de PageRank y la página que ellos dan, además de darte el PageRank, te da opciones de botones para que lo coloques en tu blog: PageRank para tu blog.
Ahora si lo que quieren es solo calcular el PageRank para saberlo, y nada más, este sitio hace eso Cálculo del PageRank pero no da botones.
Gracias por este post Potriiiiis querido. Te adoro !
Y si, mi nombre completo es Maria Rosa Golia :) Pero hubo confusión, claro, porque está El Escaparate de Rosa, pero ella se llama ROSA TORRES :)
Baci per tutti, caro mio !!!! (Besos para todos, querido mio) ;)
mmmm.... fíjate que siempre me complicaba la vida poniendo un elemento HTML y no sabía que el Gadget de imágen permitía vincular una URL...
ResponderEliminaruna pregunta, sólo por curiosidad, si se quisira poner rel="nofollow", se agrega antes de target='_blank'.
Gracias maestro!!!!
Un abrazo!!!
Ascesino96, jajaja, 10 años es muuuucho, será mejor pensar cómo serán nuestros blogs en 10 meses :)
ResponderEliminarMaria Rosa, tendrás que ponerte tu identificación en la blusa como los niños del prescolar para no olvidar el nombre completo, jajaja. Gracias por compartir la info. Te quiero mucho!
brother, pues antes o después, en ese caso el orden de los factores no altera los caprichos de Blogger :) Un abrazo!
Pozo+10, forzosamente se tiene que editar el código, puedes ver info en este post, casi al final se explica cómo hacer para que la imagen abra en otra ventana, pero no se agrega nada en la plantilla. Para eso hay un script que hace que los links se abran en otra ventana pero aplica a tooodos los enlaces del blog, no sólo imágenes. Un abrazo.
Jajajajjajjajaj Siiii
ResponderEliminarA tu comentario final: Me too. :)
Perdón... no es Rosa Torres, sino Rosa María Torre... Torre sin ese...je,je
ResponderEliminarUn saludo a todos!!!
Se juntaron las Rosas o.O
ResponderEliminarUn abrazo grande a ambas!
aaaa, que tonto soy, mi intencion era ayudar espero no te enojes :)
ResponderEliminarun abrazo grande y disculpa de nuevo :)
No hay por qué no te preocupes ;)
ResponderEliminarUn abrazo!
¡Hola amigo Potro!
ResponderEliminarTremendo consejo este. En esta forma invitamos a que el visitante permanezca en nuestro blog, o se retire de él, pero a su propia elección, y no obligatoriamente. Y ya nos habías aconsejado algo similar con la lista de enlaces.
¿Y en caso de querer hacerlo con todos los enlaces que haya en el blog? Si ya publicaste sobre esa posibilidad por favor dispénsame, y regálame un enlace hacia ese post amigo mío.
¡Abrazos!
Hola Arny Joaquín,
ResponderEliminarAún no lo he publicado pero ya lo tengo programado. Seguro que será una mejor opción ya que el lector será quien decida cómo se abren los enlaces del sitio.
Un abrazo!
Me sale esto: No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
ResponderEliminarMensaje de error de XML: Element type "a" must be followed by either attribute specifications, ">" or "/>". no se porque, busco con Ctrl+F < b:if cond='data:link != ""' > y abajo esta la linea que dices lo puse y me quedo asi < a expr:href='data:link'target='_blank' >
no se me habre...
Hola Laura,
ResponderEliminarRecuerda que antes de target='_blank' debe haber un espacio.
Inténtalo de nuevo y verás que funciona.
Saludos.
Si me funciono pero solo encontre 4 lugares donde ponerlo es decir 4 widgets y te quiero preguntar si en flash vortex por ejemplo abajo de la imagen esta la publicidad, tiene algo que ver darle click a la imagen o a la palabra publicitaria propiamente, porque cuando lo hago abandona mi pagina, pero en otro widget cuando lo hago en la imagen si habre una ventana nueva... Ah y tambien quiero saber si se puede quitar el enlace de la imagen en un post, porque no quiero que en la entrada la imagen se abra si le dan click, la quiero como en el sidebar que no se puede acceder a ella... Espero tu respuesta
ResponderEliminarHola Laura,
ResponderEliminarSobre los demás gadgets no podemos manipularlos ya que están hechos en otros formatos como flash o Javascript.
Para saber cómo eliminar el enlace de la imagen sigue este enlace.
Saludos!
Mil gracias!!!!
ResponderEliminarLo acabo de hacer y perfecto!
Gracias a ti por tu visita :)
ResponderEliminarhola potro la verdad que tus post siempre me an servido
ResponderEliminarpero te vengo a molestar; lo que pasa es que kiero tener asi como un album de fotos (agrege el gadget de "IMAGEN" pero solo me deja poner una imagen)[ a lo que yo eh checado] :D yo quisiera que me ayudaras para poner un gadget de album de fotos [ asi de ese mismo tamaño]
ah" y otra cosa lo que pasa es que vi aqui mismo como poner 2 columnas de gadgets (una en la izquierda y la otra a la derecha)
me podrias orientar en esto ;)
BUENO ESPERO CONTAR CON TU APOYO
A POR SIERTO MI BLOG ES http://asiposzi.blogspot.com
chekalo para lo del album
.....SALUDOS
hola de new. aki ando para decirte que ya pude hacer elk album...
ResponderEliminarsî asi es no busque bien en tu web, pero ya estoy en eso.
AHORA si no es mucha molestia me podrias orientar donde esta el articulo de crear dos columnas de gadgets
.aDIOS
SEGUIRE NAVEGANDO POR AKI
Gracias funciono
ResponderEliminars-Santos, por aquí en el blog hay una entrada que explica lo que querías, no sé si la hallaste. Para la sidebar de dos columnas mira la explicación de Rosa.
ResponderEliminarLynx Empleo, me alegro que te haya servido :)
Hola Potro! Genial tus explicaciones como siempre... Traté con todos los métodos que pusiste para abrir en ventana diferente el link que puse en el gadget imagen pero no me funciona nada y no se porqué... :(
ResponderEliminarAl principio, cuando puse el target='_blank' en cada imagen funcionó en algunas, menos en la de LinkedIn, ni idea porque, intenté las otras (Todas) y ahora no funciona ninguna, abre el link en la misma página abandonando mi blog... :(
Alguna idea? El blog es este: http://cromall.blogspot.com/
Ya está Potro! Ya lo solucioné! Era la barra que tenía puesta debajo la que no me dejaba, pero ya la modifiqué. Gracias igual, porque se que tenés siempre la predisposición para ayudar! Un abrazo grande.
ResponderEliminarQué bueno que ya lo has solucionado :)
ResponderEliminarHola Potro, encantada de saludarte y de haberte encontrado! He creado un blog no hace mucho tiempo dedicado al grupo THE DOORS y estoy peleándome de mala manera para poder hacer esto que explicas tan bien aquí. Yo soy super torpe con todo esto sorry, y de códigos ni idea! El caso es que estoy añadiendo pequeños banners creados por mi y almacenados en mi PC como gadget pero llevo rato siguiendo tus instrucciones y no localizo la imagen por ninguna parte (y eso que uso el motor de búsqueda del botón "edición" en la barra de trabajo del propio PC, pero nada). Hay algún modo de que pudieras ayudarme? No sé...Te paso el enlace a mi blog y me dices algo:
ResponderEliminarhttp://goingthroughthedoors.blogspot.com/
Los banners a los que me refiero son los que se encuentran en el bloque izquierdo del blog.
Muchas gracias por tu atención. Te lo curras cantidad!
Sugar XXX
Si quieres también puedes responderme escribiéndome a movecontact@gmail.com
Buah, efectivamente, soy una nulidad con estos temas. En fin, ya he caído en que hay que darle un nombre al archivo en la ventana de edición del gadget...Bueno, a ver si me apaño y consigo que funcione. Gracias igualmente!
ResponderEliminarSugar XXX
Hmmmm... Pues nada, no consigo que abra en una ventana exterior! He podido localizar el código con el nombre que corresponde a la imagen, pero al añadir eso del "target blank" no me funciona correctamente :( A ver si me ayudas hombre que me estoy volviendo locaaaaaaa!
ResponderEliminarGracias.
Hola Sugan Heels,
ResponderEliminarBienvenida a Ciudad Blogger.
Lo que sucede es que el target='_blank' lo has agregado fuera del área de donde se indica.
Lo has puesto de este modo:
<a expr:href='data:link'>target=_blank>
Y debe ser así:
<a expr:href='data:link' target='_blank'>
Saludos.
Hola Potro, mi duda es si esto funciona con los enlaces mailto en Gmail, porque lo he intentado de mil formas y siempre se abre en la misma ventana, gracias por tu ayuda, saludos
ResponderEliminarLos correos funcionan de forma distinta y aunque podría aplicarse la realidad es que los editores que se usan para redactar los correos son muy limitados y básicos por lo que no se permiten este tipo de códigos.
ResponderEliminarHola! Pues yo aunque he seguido tus instrucciones al pie de la letra sigo peleándome con el tema. Los banners que he añadido desde mi equipo siguen abriéndose en la misma ventana :( A ver si me puedes echar un cable pls....Te lo agradecería enormemente.
ResponderEliminarGracias! (De códigos como te debes imaginar ya, NPI)
Sugar XXX
Ostras, perdona Potro, que no había visto tu mensaje....Wow, qué despiste! Bueno, pues voy a intentarlo de nuevo, pero creo que tampoco sabré hacerlo. Lo mio no es esto pero me hace tanta ilusión tener un blog que además está dedicado a mi grupo favorito :( En fin, no sé cómo me lo montaré...Probablemente acabe borrando el blog! Argh.
ResponderEliminarGracias y que tengas un feliz fin de semana.
*El tema es que mi código de la imagen no es tan largo como el que explicáis aquí, así que eso me tiene totalmente confundida...
Potro: Quizás con esto me puedas ayudar....
ResponderEliminarEsto es lo que leo yo al buscar como indicáis aquí el nombre del gadget/imagen:
Es un enlace a www.feastoffriends.de
Ni siquiera sé si la segunda línea de código (la que empieza por >/b:section... pertenece a esto o a otra cosa, qué locura! Y qué ignorante me sientoooooooo!
Aaaahhhh jajajaja, no se ha copiado el código! Por qué?!
ResponderEliminar****
*****
Tampoco ahora....Deprimente. Potro, podrías pasarme una dirección de e.mail alternativa y te comento mi problema? Te lo agradecería no sabes cuánto... :(
ResponderEliminarGracias.
La mia por si quieres escribirme antes tú es:
movecontact@gmail.com
Hola Sugar Heels,
ResponderEliminarQue no cunda el pánico, sólo es cuestión de revisar un poco el código y compararlo con el del ejemplo para ver cómo se pone.
El código es más o menos así:
<b:widget id='Image1' locked='false' title='' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != ""'>
<a expr:href='data:link' target='_blank'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Sólo tienes que agregar lo que está en negrita y listo.
Buenas! Soy nuevo por aqui y tengo un problema... Agrego el target='_blank'> al codigo del gadget perfectamente, con el espacio y todo pero! En el blog me sale el target='_blank'> sobre la imagen. Si me explico? Aparece justo debajo del titulo del gadget y ni siquiera abre en otra pestaña. Igual abandona el blog!
ResponderEliminarHola Chamo Crazy,
ResponderEliminarBienvenido a Ciudad Blogger!
Entré a tu blog pero sólo veo un gadget de imagen y no tiene enlace, supongo que lo habrás quitando. Necesitaría verlo puesto para ver dónde está el problema, pero en la mayoría de los casos de trata de un error al momento de poner el código.
Revisa que se vea tal como está en el ejemplo e intenta de nuevo.
Saludos.
Aaaah! Ya vi mi error! Tuviste que hablarme para darme cuenta jeje! Ponia el target='_blank'> luego de la fechita > Sin borrarla... Ahora si me funciona! Muchas gracias!
ResponderEliminarMUY BUENO SOS UN CAPO
ResponderEliminarTE INVITO A QUE VISITES MI WEB Y LO QUE QUIERO HACER ES COLGAR UNA UNA IMAGEN A LA MITAD DEL BLOG COMO SI LO DIVIDIERA EN DOS NO SE SI ME ENTENDES ES COMO CARGAR UNA IMAGEN Y QUE QUEDE SIEMPRE A LA MITAD UNA IMAGEN COMO UN LOGO. DESDE YA MUCHAS GRACIAS Y FELICITO FUE DE MUCHA AYUDA TU APORTE
ResponderEliminarHola El Ojo Mirador, ¿cuál es tu blog y exactamente en qué parte de él quieres colocar la imagen?
ResponderEliminarSaludos.
ami me gustaria que la imagen del gadget tubiera un efecto push, o ke cambie de tono cuando le pones el mouse ensima... como hago eso???
ResponderEliminarde antemano gracias!
Tendrías que localizar el ID del gadget, en mi ejemplo es Image1, ya que lo tengas agregas antes de ]]></b:skin> lo siguiente:
ResponderEliminar#Image1:hover {
position: relative;
top: 1px;
left: 1px;
}
Eso le dará el efecto pushbutton.
uuuH excelente muchas gracias!!!
ResponderEliminarlo acabo de probar y funciono de maravilla! eres un master Potro! Muchas gracias por toda la ayuda que nos brindas!
ResponderEliminarGracias a ustedes por sus comentarios, saludos!
ResponderEliminaramigo una consulta quiero poner una imagen en el encabezado de mi blogger... pero quiero saber las medidas exactas para subir la imagen aora yo estoy usando la plantilla fantastica S.A que es una de las que tra blogger como puedo saber las medidas exactas?
ResponderEliminarya cambie de plantilla este es mi blog espero a ver si me puedes ayudar a poner las medidas para una imagen de encabezado
ResponderEliminarhttp://dianitaunfv.blogspot.com/
Hola dianita, entré a la dirección que dejaste pero no existe ese blog. De cualquier forma, entra en Elementos del blog, ahí da click en Editar sobre el elemento Cabecera, sube una imagen y verás abajo una casilla que dice algo como: "Reducir hasta ajustar"
ResponderEliminarAhí dirá la medida en pixeles que debes usar.
Potro justo necesitaba esto! Ni se me habia ocurrido buscarlo porke pense ke en ningún lado lo iba a encontrar y justo me lo topo. Muchas gracias!
ResponderEliminarPor nada Diego :)
ResponderEliminarPOTRO..ES QUE INTENTE HACER ESTE..PERO NO ES CON UNA IMAGEN SI NO CON UN BANNER (LO HICE EN BANNERSHACK).. PERO EN LA EDICION HTML NO ME APARECE <a expr:href='data:link' Y EXAPANDI LAS PLANTILLAS DE ARTILUGIO.QUE HAGO?
ResponderEliminarSi el banner es una imagen entonces sólo necesitas agregar el atributo target="_blank" en el código del enlace:
ResponderEliminarhttp://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html
Pero si es un banner en flash entonces el mismo sitio debe darte la opción de que se abra en otra ventana, sino no será posible.
Muchas gracias, me ha funcionado perfectamente. Un saludo.
ResponderEliminarhttp://cursosemergencias.blogspot.com/
Muchas gracias por socializar conocimientos, solucioné un problema!!!
ResponderEliminarMuchas gracias por socializar conocimiento, solucioné un problema!!!
ResponderEliminarGracias a ti por tu visita!
EliminarHola Potro! Muchas gracias por la información. Saludos!!!
ResponderEliminarHolaaaaa
ResponderEliminarMuchas gracias por el truquito, acabo de ponerlo en un gadget de imagen y, oye ¡¡funciona!!, aunque, viniendo de tu blog, ya sabía que funcionaría jeje
Besosssssss
Gracias por la confianza Ana :)
EliminarPotro, te molesto porque has publicado dos maneras distintas de hacer lo mismo, pero la diferencia es SÓLO un carácter, como si dijéramos una letra, un guión bajo (_). Con tu valiosísima cooperación, quisiera saber cuál es la mejor manera de las dos, o si sólo una es correcta, y por qué, si puedes decirme. Te agradezco, como siempre, la atención que nos prestas a mí y a los "burros" como yo.
ResponderEliminarPrimera manera, sin guión bajo, lo dijiste en el enlace http://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html al contestar una pregunta con fecha 19 de junio de 2009. Dijiste que se pone así:
target='blank'
Segunda manera, con guión bajo, como tema central de la página en que estamos ahora. O sea, así:
target='_blank'
Soy un ignorante pero se me ocurre que alguna función ha de cumplir el guión bajo y por eso tanto cuidado en ponerlo. O no. (?).Muchas gracias.
Es igual, funciona de ambas formas. El modo "correcto" es con el guión bajo, pero aun cuando no lo pongas funciona :)
Eliminar¡Muchas gracias, Sabio Potro!
Eliminarcomo hago para que al pasar el mouse por una imagen (usando el gadget imagen) aparezca una leyenda.
ResponderEliminargracias.
Que esta parte (la encontrarás dos veces)
Eliminar<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
Quede así:
<img expr:alt='data:title' title='Aquí el título' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
Muchas grácies por el truco!! Inspeccionava el elemento y el codigo hmtl de la pagina web y de la plantilla tenían cosas diferentes y me volvi loco!!
ResponderEliminarGenial! Muchas gracias por tener un blog tan útil para los inexpertos como yo.
ResponderEliminarGracias a ti por tu visita!
EliminarMil gracias! me ha ido genial para aplicarlo a mi blog!
ResponderEliminarMuchas gracias bro, eres bueno en lo que haces.
ResponderEliminarGracias Carlos.
EliminarHola Potro, mi pregunta es algo diferente, fijate que mi blog abria las imagenes en la misma ventana, pero ahora me abre la imagen saliendo compeltamente del blog y quiero volver a tener ese sistema pero no se como regresarlo, espero me puedas ayudar, gracias de antemano ;)
ResponderEliminarHola N_Javier, habría que ver en cuál blog te sucede para saber si se trata de algún código que añadiste anteriormente o si se trata del navegador.
Eliminar