50

Imagen en la sidebar que funciona como link

Todos sabemos que en Blogger podemos añadir con facilidad una imagen en la sidebar, directamente desde nuestro PC, si al "añadir un elemento de página" escogemos la opción "imagen".

Imagen

Esta tarde, en un comentario Agustín me pregunta como podría hacer que esa imagen subida al blog desde su PC funcione como link, ya que Blogger no incluye esta opción.
He conseguido hacerlo de forma un tanto "artesanal", así que tal vez no sea la manera más correcta, pero lo he probado y funciona.

[1] Una vez añadida la imagen a través de "añadir un elemento de página", nos situaremos en la parte de "edición-HTML" de nuestra plantilla, expandimos los artilugios y localizamos el widget de nuestra imagen:

<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'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


[2] Dentro de este código, he señalado en negrita la parte que pertenece a la imagen. Colocaremos ese código dentro del que usamos a menudo para un link cualquiera:

<a href='Dirección_del_enlace'><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/></a>


[3] Para abrir el enlace en página nueva, usaremos el "target":

<a href='Dirección_del_enlace' 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>

Entradas Relacionadas:

50 comentarios:


emigasei67

Muy bueno....

Por cierto gracias por enlazarme...Saludos y Feliz año..

http://emigasei67-elrastreador.blogspot.com/

Oporto

Rosa, junto con desearte un feliz 2008 pido tu ayuda de forma urgente.

Yo descargue una plantilla de 3 columnas q tu hiciste (la rounders) y le puse una imagen al header, hasta ahi todo bien, el problema fue que cuando quise escribir la descripción del blog q va en la cabecera la imagen se deformó, agrandándose.

Cuando la quité me apareció un BY ROSA de muy buen diseño XD y ahora tuve que dejar la imagen chica, como puedes ver en mi blog.

Por eso te escribo para saber si me puedes ayudar como lo has hecho con tantos lectores fieles.

Muchos Saludos y Gracias!

Email Urbano

Feliz Año Nuevo, gracias por brindar tanta información útil para nuestros blogs, que continues bien...felicidades

Mar

Rosaaaaaaaaaaaaaa, perdón que entre en cualquier lado, pero es que he me han salido los links con el [+/-] xDDDDDDDDDDDD.

Aunque sin el target blank.... qué le vamos a hacer!!!!!!!

De todos modos, estoy feliz!!!!! A mi que no me gustan ninguna sidebar cargada me parece estupendo!
Es más, no sólo me sirve para la entradas, sino que lo he utilizado por ejemplo para ocultar un widget de visitas que es muy feo por cierto :) , pero lo he puesto a pié de página en los cinco blogs bajo un diseñito hecho en photoshop
y me estoy encantada!!!!

Gracias por el recurso de la espera de "cargar página", sé por experiencia que mis blogs de arte pesan y en dos semanas moverte por los archivos... implica dicha espera.

Ya he suscripto los cinco blogs en Feed Burner y Technorati, de modo que gracias muy especialmente también por el pack de botones en cristal, ( me encantan!!!!!!!!!)

(Parezco nena, lo sé)

Gracias por los traductores.

Gracias porque el [+/-] también me ha servido para ocultar un widget de tráfico de visitas a pie de página, ( muy feo por cierto), de modo que bajo una pequeñita imagen que hice en photoshop ( bueno que no soy Jejo xDDDDDDDDD)...
Me encanta que esté oculto allí.

Se me ha ocurrido pasar todas las plantillas al blanco....... y me siento rara,pero me gusta cómo han quedado.

Ahora parecen sábanas vacías...... Pero lo esencial es invisible a los ojos verdad???

Todo está dentro de las plantillas gracias a vos...... El resto corre por mi cuenta para iluminar esas páginas con las publicaciones.

Y aquí estoy, dándote las gracias.
Que es humano y creo, corresponde.
Por tu manera de ayudar y tu pacienciaaaaaaaaaaaaaaaaa.

En dos días empiezo a publicar, al menos en artes, y creo que está bien para comenzar.

Como te leí en algún comentario de respuesta, tampoco se trata de llevarse todo.

En mi blog de poesía, ya estás linkeada........... ( je, te imaginarás de qué modo con el
[+/-] )

Estoy felíz con ese recursoooooooooooooo!!!!!!!!!!

Me queda mucho trabajo para los blogs de arte en tema links pero esto me salva la vida!!!

Bueno........... Ayudante de cátedra en la Universidad de Bs As y cero capacidad de resúmen, pero creo que te debía las gracias.

Y quería gritarlas!!!!!!!

Beso enorme!!!!!!!!!!

Te dejo la URL del de poesía, que,me falta un detalle con la tipografía en el final de los post que quiero cambiar.... pero allí verás más completo lo que te digo.......

(Auqnue no haya entradas)

Gracias Rosa!!!!!!!!!!

http://loquedictelanoche.blogspot.com/

Beso y buen finde!!!!!!!!

Rosa

Mar, que ímpetu por Dios!

Ja,ja, me has hecho reir un buen rato, te imaginaba dando saltitos de alegría :-)

Me alegro que vayas consiguiendo lo que quieres y, si, lo dije en un comentario y lo repito de nuevo, no se trata de poner de todo...cuando se tiene claro que queremos conseguir, pues intentamos lograr eso y listo, lo demás muchas veces no hace más que sobrecargar el blog.

Tu alegría ha sido para mi como un regalo de Reyes, en serio.

¡Un abrazo!

Rosa

Email Urbano, Feliz Año para ti también!

Rosa

Oporto, si, no me había dado cuenta de ese detalle, es que cuando diseñe los cambios Blogger aún no permitia subir una imagen al header de forma directa...

El By Rosa es el titulo del blog que está sustituido por una imagen, mira, retira la imagen de la cabecera para que solo quede el By Rosa, luego ve al html de la plantilla y expande los artilugios. Busca esto:

<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>

Unas líneas más abajo está este código:

<img src='http://signatures.mylivesignature.com/54485/197/C03A7FF355AFBD90FD676F4E01338FF5.png' style='border: none; background: transparent;'/>

Borralo y el By Rosa desaparecerá, guarda los cambios y sube la imagen de nuevo.

Rosa

emiga, gracias a ti! Feliz Año!

luna

Hola Rosa
Feliz año y a nombre de todos los que empezamos un blog Gracias....Gracias
Me alegra que en el mundo todavía hay gente que quiera compartir lo que sabe, un abrazo fuerte de Luna

Rosa

Luna y a mi me alegra que haya gente como tu, que se para unos minutos a dejar unas palabras tan lindas :-)
¡Un abrazo!

Charete

Hola Rosa y Feliz Año.

Soy Charete, sí esa, la que se fue a China en Octubre del año pasado y que tanto te dio la brasa con la creación del Blog para que pudiera contar mi aventura de la adonción de mi segunda hija, te acuerdad, claro que sí. Bueno pues todo salió a pedir de boca y ahora al cabo de un tiempito tengo un pequeño problema.

Siento que este comentario, quizás no pertenezca a esta entrada, pero tengo un problema.

Ayer se me fue todo al garete, borre (POR DESPISTE) el álbum de fotos de mi Blog y se fueron todas al traste, no me di cuenta y por aquello de que las fotos de las peques no estuvieran por donde no deben, será eso de ser madre, pues nada que me equivoqué y pensé que esas fotos estaban hay por equivocación o como espejo, yo que sé.... el caso es que me equivoqué y ahora estoy pagando los platos rotos).

Estoy arreglándolo poco a poco y lo verdad es que me va a costar un pico, pero trabajaremos duro.

Mi solicitud de ayuda es la siguiente Rosa: Yo tenía las fotos de mis dos peques en el sidebar, una de Susana y otra de Marta, en la parte derecha del Blog (EN UN FORMATO GRANDOTE), para que la gente pudiera verlas bien, pero ahora al volver a añadir las mismas fotos en el mismo elemento del Blog, me salen muy pequeñitas y no sé o no me acuerdo de como hice aquello: ¿PUEDES INDICARME COMO PUEDO HACER QUE ESAS FOTOS SEAN MÁS GRANDES?, por favor me gustaría que la apariencia del Blog, volviera a ser como antes y eso no he sido capaz de lograrlo.

Rosa, como siempre muchas gracias.

Avalon

Excelente Rosa!!!!!! Muchas Gracias!!!

Rosa

Avalon, gracias a ti. Es una "chapuzilla" de las mías...

Guille

Rosa: te molesto porque quiero poner una galería de fotos en la cabecera del blog (se llama header?).
Alguna vez leí (creo que acá) que se podía linkear con una dir y así las imágenes iban rotando. Es posible? Estoy loco? Bue... felicitaciones como siempre y agradeceré tu rta. BSOS!

Rosa

Guille, como no te refieras a esto...
Headers aleatorias

LaPosta2007.blogspot.com

casi me sale, pero me pasa esto:
cuando pincho en la imagen, antes de la dirección enlazada, aparece la de mi blog, y por tanto no lleva a ningun lado. ejemplo: yo quiero hacer un link con google y me queda así:

"www.laposta2007.blogspot.com/www.google.com"

¿sabes que debo cambiar?
gracias

Rosa

La Posta, no se que habrás hecho para que pase eso...si quieres enlazar con Google, solo has de poner donde añades:

<a href='Dirección_del_enlace'>

Esto:

<a href='www.google.com'>

LaPosta2007.blogspot.com

vaya a saber porque será que aunque sigo tus pasos me aparece:
"www.blogger.com/www.google.com", inutilizando así el link de la imagen.
Bueno igual muchas gracias por contestarme. si alguien sabe algo que avise.
Saludos.

Rosa

Laposta, yo he dado por hecho que la consulta es para este post, es decir, para una imagen subida a la sidebar con Blogger ...¿es así? porque me extraña mucho que te pase eso que comentas si la has subido desde Blogger a la sidebar mediante un elemento imagen.

Memiliano

No tengo palabras para agradecer!!!

Ahora si estoy llorando estuve facil una semana intentando hacer estas cosas y en 5 minutos las resolvi inmediatamente, sin errores y exactamente como yo queria... No puedo creerlo, podría decirse que estoy saltando en una pata!!! (aunque en realidad este sentado JA!) (perdón el chiste malo, estoy muy contento...) jajaja

Gracias!!!

Rosa

Memiliano, tu llorando y yo "muerta" de risa...:D imaginandote a una patita :-X

MarvinG

Hola rosita aqui denuevo molestandote un ratito, y es que puse una imagen de mi gmail, y quiero hacerlo enlace

le puse href="mailto:mi_correo"

Pero no me funciona, como haria para ponerle el enlace a mi correo, espero me puedas ayudar :)

Saludos...

Rosa

MarvinG , la forma correcta de hacerlo puedes verla aqui

MarvinG

Una vez mas Rosita muchas gracias, de verdad que eres genial.
Gracias pora ayudar a este novato :)

Saludos

Alan

Rosa una pregunta, en la opcion de blogger para agregar una imagen solo se puede subir UNA imagen, como hago para poner mas imágenes, osea una al lado de la otra tipo Elite o Botones.
Grax

Rosa

Alan, pues tendrás que subirlas antes a un alojamiento de imágenes, como ImageShack por ejemplo y luego colocarlas directamente en un elemento HTML:

<img src="url de la imagen"/>

Álvaro Blanes

Tengo una duda Rosa, intentaré no enrrollarme mucho:

¿es posible cambiar el enlace al que me dirige al pinchar en la cabecera del blog? Me explico: tengo un blog que consta de 4 páginas (es decir 4 blogs unidos entre sí) siendo uno de ellos la portada y los otros tres las secciones. ¿es posible que al pinchar la cabecera de uno de los blogs/secciones me envíe al blog/principal? Es decir, ¿se puede cambiar la dirección a la que se te envía al pinchar sobre la cabecera de un blog?

No sé si me he explicado bien, aquí os dejo el enlace al blog/principal a ver si lo entendeis viéndolo: http://lostiemposmodernos.blogspot.com/

Un saludo y gracias!!

Carledens

Naguara Rosa me has leído la mente.... hace días entre a tu blog para ver si encontraba esto.. busque y busque y nada.. lo quería para agregar la imagen del logo de Firefox y alli poner el enlace de descarga, pero metía el código en un elemento y nada que lo agarraba :/ te podrás imaginar que sentí cuando leí esta entrada xD no la perderé .. ya mismo me pongo a la tarea xD.... y de paso también me llevo la nieve a mi blog xD jeje que buen regalo de Navidad me has dado xD ... saludos desde Venezuela Rosa... un besote ....

Alan

Rosa ayuda!!!!
Mira este es mi blog:
www.hilarydufflatin.ya.st
tengo un problema con las imagenes q puse en el sidebar, son imagenes que tendrían que quedar unidas como para formar una barra, pero me quedaron separadas.
Q hago para que queden unidas????

Rosa

Alan, tienes que localizar en la plantilla sin expandir los artilugios la línea que corresponde al gadget donde están las imagenes.
La línea será como esta:
<b:widget id='HTML7' locked='false' title='' type='HTML'/>

Luego se usa la identidad (id) de ese gadget para darle las propiedades que quieras independientemente de los otros.
En este caso tendríamos que hacer que no hubiese separación entre líneas, ya que es lo que hace que las imágenes se separen.

Así que pondriamos esto en el css (antes de ]]></b:skin>

#HTML7{line-height:0px;}

Aunque te lo he explicado para que lo entiendas, puedes usar ese código directamente sin localizar la id del gadget, ya que es esa misma, HTML7

Pruebas Priamo

Hola Rosa, veras una imagen en la sidebar de unos pilotos y pone Circuit Turia, quisiera que:
O bien:al pinchar en ella desplegara un visor de fotos para mostrar la secuencia de montaje de mi circuito de slot.
O bien:Como hacer para que al hacer clik en la imagen se acceda a una entrada con la secuencia de las fotos (mi idea era efectuar la entrada, asignarle una etiqueta y linkearla misma a la imagen.Hay otra manera? GRACIAS

Rosa

Pruebas Priamo, creo que la mejor opción es la segunda, puedes poner a la entrada una fecha antigua y así no se verá entre las últimas publicadas, de esta manera la carga del blog tampoco se verá afectada...

Pruebas Priamo

Buena idea la pondré en practica. pero
como le pongo a la entrada una fecha antigua???
Gracias

Rosa

Prueba Priamo, en el editor de entradas (donde las escribes) abajo hay un enlace que dice "opciones de entrada" ahí viene su fecha y hora de publicación que puede cambiarse por la que quieras.
Incluso puedes poner una fecha anterior a la del comienzo de tu blog.

Pruebas Priamo

Todo perfecto.MIl Gracias

© ۞Jair Octavio۞

Emm Rosita con esta entrada mas colocar el fondo solido con la imagen pegada en una mas borrarle la linea ---- bajo el gadjet de la imagen de la sidebar, me dio como resultado algo mejor, ya asi sin matarnos tanto mira:

http://jairoctavio.blogspot.com/

Asi esta mejor, agregue una entrada en blanco sin letras ni imagenes para borrar eso que decia:

Ninguna entrada coincide con la consulta. Mostrar todas las entradas.

Ahora me quedo las letras del footer hasta arriba, je je je...

© ۞Jair Octavio۞

Ya solucionamos eso del blog INTRODUCCION, solo me quda ver eso de que ahi mismo, como la plantilla es "transparente" digamos y una sola imagen de fondo hace que se mire bien.

Ahora como te vuelvo a escribir aqui arriba de mi comentario, que el texto que va en el footer queda subido y se mira chistoso arriba.

No se si borrar todo eso y que se mire bacia la plantilla o bajarlo pero no se como je je, una idea que tube era de que en esa entrada sin titulo le puse un punto (.) al inicio y otro como a 5 renglones eso hace que no se note pero que baje el texto del footer, si es que dado el caso quisiera bajarlo, y si por estetica lo quiero borrar pues solo lo borro y ya.

No se si habra alguna otra indicacion que me des al respecto para que baje el texto del footer...

© ۞Jair Octavio۞

Hola Rosita, mira te agradezco tu valiosa ayuda, lo que necesito en si en el blog de la INTRODUCCION son 4 cosas:

Ocultar el titulo, sin que le tenga que poner un punto (.) no se si se pueda...

Mover o poner ese boton de "entrar" arriba superior derecha o con un codigo darle unas coordenadas a donde quisiera que apareciera de toda la plantilla...

un codigo para mostrar la imagen de la foto del centro que tambien la cambiara despues por otra imagen...(osea que la imagen sea una y el fondo otra...) sin que la ponga en el outer-wrapper..

y pues ocultar el texto del footer tambien...

Solo eso estaria bien... Mil gracias de antemano Rosita sabemos que tienes muchas cosas por hacer pero pues no se que hacer...

© ۞Jair Octavio۞

Rosita ya pude ocultar el titulo basandome en la entrada: "Eliminar el titulo del blog", mil gracias...

Rosa

© ۞Jair Octavio۞ Tendrías que poner la imagen de fondo (la de madera por ejemplo) aplicada en el body{ y la otra, la que iría sobre esa en #outer-wrapper{

Para ocultar el texto del footer, lo eliminas y ya está, sino quieres borrarlo colocas aquí algo así:
/* Footer
----------------------------------- */
#footer {
height:0px; visibility:hidden; display:none;

El botón de "Entrar" no se donde lo has colocado... si es en una entrada, no puedes darle coordenadas... solo centrarlo, ponerlo a izquierda o a derecha...

© ۞Jair Octavio۞

Mira Rosita, ya le puse en el outer-wrapper la imagen y el fondo se lo deje con la imagen para que vieras lo que tanto te estube diciendo: que el texto del footer cortaba la imagen si la ponia en el outer-wrapper, ahora si lo quito de todas formas la corta.

Ahora la madera del fondo y la imagen de atras son una sola, o sea un solo diseño y la imagen frontal solo es del outer-wrapper.

Ahora con respecto a la imagen del boton esta en la diebar con link como lo dice esta entrada: "Imagen en la sidebar que funciona como link"...

Aparte lo que me dijiste que le agregara al footer:

height:0px; visibility:hidden; display:none;

Como que no le sirvio no se borro nada como lo miras sigue ahi el texto,m a pesar de estarle moviendo el "height" a varias medidas.

Ahora no se que hacer je je...

Rosa

© ۞Jair Octavio۞ Retira la imagen del outer-wrapper y dejala solo en el body como la tenías.
Ahora para eliminar el footer, localiza esto en el código de la plantilla (estará casi al final) y borralo:
<div id="powered">
2010 - Copyright © <a href="http://jairoctavio.blogspot.com/">&#1758; *Jair Octavio* &#1758;</a>.
Todos Los Derechos Reservados.<br>
Diseño De: <a href="http://jairoctavio.blogspot.com/">Jair Octavio</a>. Basado En El Diseño De: <a href="http://btemplates.com/2009/06/30/sunflower/demo/">Sunflower</a>. Por: <a href="http://btemplates.com/">Blogger/Blogspot Templates</a>.
</div>

Ya solo queda el botón... dime justo donde quieres que se vea...

© ۞Jair Octavio۞

Ya hice exactamente todo lo que me dijiste, quedo bien.

Ahora eso del boton, me gustaria que fuera asi como dices: por coordenadas, ya que lo tengo en la sidebar con el link al menu, pero igual y lo quito de ahi y le ponemos coordenadas, para cuando ponga otra imagen pues pueda subir y bajar o a la izquierda o a donde no le estorbe o se mira discreta.

Y si no se puede pues que se mire arriba a la derecha, que seria lo mas formal creo yo je je... Mil gracias de antemano...

© ۞Jair Octavio۞

Rosita te tengo otra pregunta:

como le hago para que la caja de busqueda funcione como algunas que cuando le das click para buscar algun texto o entrada el texto que tienen esas leyendas de:

"buscar, Search... Search this website..." y otros se borre de forma automatica.

Es como autoborrar cuando se le da click a las cajas de Search o busqueda de texto o entrada.

En mi blog del MENU en donde dice:
BUSCA ENTRADAS:

http://jairoctaviomenu.blogspot.com/

No funciona, por que asi traia su codigo y en el blog de MIS ARTISTAS FAVORITOS:

http://jairoctaviomisartistas.blogspot.com/

Si funciona, ahi donde dice: BUSCAR ARTISTA...

© ۞Jair Octavio۞

Rosa por aqui ando, necesito de tu ayuda aqui arriba de mi...

Rosa

© ۞Jair Octavio۞ ¿Porqué no haces lo más sencillo?... copia el código del buscador que te gusta y cambialo por el otro...

© ۞Jair Octavio۞

Lamentablemente no se puede, decodifica esa parte, asi que mejor editare la imagen...

Solo nos queda lo del boton, de INICIO asignarle unas coordenadas o situarlo en superior derecha que seria lo mas formal...

Rosa

© ۞Jair Octavio۞ Mete el código del botón en un div:

<div id="Floatboton">
AQUI EL CÓDIGO
</div>

Y luego añade algo así en el CSS:

#Floatboton{
position:fixed;
text-align:left;
/*Si la ubicación del boton no es la adecuada modificar los valores: */
margin-top:0px;
margin-left:-100px;
}

© ۞Jair Octavio۞

Genere el codigo en una entrada, lo deje ahi y le agregue el enlace al menu, de ahi lo pegue tambien dentro del div, y siguiendo del div en el main, y le aguegue el codigo antes de SKIN.

Y si quedo bien, ahora me pregunto si funcionara esto para la imagen grande, lo intentare...

Mil gracias Rosita...

© ۞Jair Octavio۞

No queda ponerle el codigo en la imagen BASE la de fondo je je, se mira feo:

http://jairoctaviopruebas1.blogspot.com/

O a no ser que la modifique, pero asi la voy a dejar como es:

http://jairoctavio.blogspot.com/

Asi esta mejor je je, mil gracias nuevamente Rosita, sabes que tu ayuda es muy importante...

Publicar un comentario en la entrada

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