AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Poner imágenes en el blog y hacer enlaces con ellas.

miércoles, 2 de enero de 2008

Nuevamente, una solicitud de ayuda me da una idea para explicaros algo que, aunque quizá muchos ya sepais, hay mucha gente que no lo tiene tan claro.
Así que voy a explicarlo pasito a pasito, con imágenes de cada paso. (Disculpad, si me enrollo mucho, o repito las cosas, los que sepais de qué va el tema.)
Para leer el texto del cuadro, baja la barra amarilla lateral o haz girar la rueda del ratón dentro del cuadro.
---


Queremos poner una imagen en el blog, o en un elemento, pero subirla a blogger no nos sirve.
Hay un par de motivos para decir eso.
1º.- Las imágenes con movimiento, los gifs, blogger los convierte en imágenes fijas.
2º.- A menudo nos falsea el tamaño, reduciendo imágenes demasiado grandes.
3º.- Si quieres poner más de una, blogger, por defecto, las coloca todas arriba del todo. Y no siempre resulta sencillo moverlas o arrastrarlas, sobre todo si quieres ir intercalándolas para escribir junto a ellas.
Bien.
En primer lugar, para seguir estas explicaciones, las imágenes han de estar en internet, ya sea en otro blog o página, ya sea en algún servidor que usemos. (Ya haré otra entrada explicando como subirlas a algún servidor que no las varíe). En algunos casos incluso el propio blogger nos servirá, si son imágenes normalitas. (Entiéndase por normalitas, sin movimiento y no demasiado grandes). En tal caso basta con abrir una entrada para ir subiéndolas e ir copiando las direcciones que les va dando. Después la guardas como borrador y ¡listo!
Para acceder a sus direcciones has de pinchar en Vista previa y seguir los pasos que voy a dar a continuación. (Una buena manera de poder hacerlo es abrir el blog dos veces, lo que se logra pinchando en Ver blog, de esta misma ventana en la que escribimos, con el botón derecho y pinchar con el izquierdo en Abrir en una ventana nueva.

Pero tanto si usamos el servidor de blogger, como si este no nos sirve, pues la imagen que vamos a poner es un gif y está en una página o blog que te permita copiarlas, las instrucciones para que la entrada quede bien y no os volvais muy locos, son las que voy a explicar a continuación.
---
Y como lo mejor es trabajar con un ejemplo práctico eso haremos.
Imagina que quieres poner, ya que estamos en fechas navideñas, una campana que se mueva, en una entrada.
Para ello necesitas saber la dirección de la campana, así que entras en alguna página que tenga imágenes navideñas y buscas la que te guste.
Una vez allí decides que te gusta la campana azul que hay en la zona dedicada a Navidad.
Primero la has de pinchar con el botón derecho del ratón y dependiendo del navegador que uses, pinchar, con el izquierdo en Copiar url de la imagen, o, si usas Explorer, sobre todo el antiguo, aparecerá este menú.


Después, con el botón izquierdo, pinchas en Propiedades.


Eso te abre esta ventana en la que has de seleccionar la dirección, pasando al ratón por encima, mientras mantienes pinchado el botón izquierdo, hasta que toda ella se vea así.


¡Cuidado!, a veces son más largas de lo que se ve a simple vista. Si no estás segur@ de que la ves entera, basta con que bajes un poquito, (pero muy poquito, no vayas a copiar las medidas), el ratón antes de soltarlo. Si no aparecen más letras es que la dirección acababa ahí, si aparecen, sigue bajando, despacio, hasta que se termine. Esto es válido, sobretodo en las direcciones de las imágenes alojadas en blogger o en live Spaces, donde son más largas que un día sin pan.
¡Bien! Cuando está toda azul, pinchas, con el botón derecho del ratón, encima de las letras azules para que aparezca este menu.


En el que has de pinchar en Copiar, con el botón izquierdo del ratón.
Después cierras la ventana y cierras, o minimizas, por si acaso, la página.
Al llegar a este punto, la URL (dirección) de la imagen está en tu ratón (por decirlo de alguna manera).
Ahora has de pegarla.
Si es en una entrada y va a estar arriba del todo, basta con que la pegues en la casilla correspondiente, de la ventana que sale al pinchar en la foto de aquí encima, (piensa que estoy escribiendo la entrada), para insertar imágenes.


Hay dos métodos para pegar.
Pinchando con el botón derecho del ratón en la casilla de la URL, aparecerá la rayita que se mueve, (el cursor), y nuevamente el menú, en el que estará activado el Pegar.


Pinchando con el izquierdo en Pegar, la dirección se colocará ahí.
El otro método es pinchar con el izquierdo en la casilla, para que aparezca el cursor, y luego pulsar a la vez, las teclas Ctrl (abajo del todo a la izquierda) y la letra V de tu teclado. (Lo que se suele describir como Control + V)
Y al darle a subir imágenes, estas se colocarán en tu entrada.
Pero eso no siempre funciona bien.
Por ejemplo, ahora mismo, intentaba subir la imagen de las campanas por este método, (quizás puedas apreciar que la dirección está pegada en el recuadro). Al darle a subir imágenes, han empezado a clonarse las campanas hasta que le he dado a Finalizar, aparte de que me ha descolocado todo el texto, con superespacios entre líneas y otras zarandajas. (Afortunadamente se arreglar el código HTML, si no me hubiese desesperado mucho).
---
Para pegar la imagen sin que se descontrole nada, y que ésta quede en el sitio donde la quieres, lo más sencillo, a mi entender, es poner tu mism@ el código en la pestaña Edición de HTML de éste escritorio.
No es difícil.
Tan solo has de pinchar en dicha pestaña.
Verás el texto que estás escribiendo, pero ligeramente distinto. Con una letra diferente a la que sale cuando escribes, más pequeña, y entre símbolos como éstos <p> y </p>
Pues desde ahí es muy sencillo añadir una imagen en el sitio que deseas.
Basta con que pinches en el lugar en que quieres que se vea y escribas esto: <img src="
pegues a continuación, sin dejar espacios la dirección y añadas esto "/> sin dejar ningún espacio más que el que hay entre img y src.
El código completo sería este: <img src="dirección"/>Una vez escrito eso, vuelves a pinchar en Redactar y verás la imagen allí.
Aunque quizás la tengas enmarcada.
Este es un defecto de blogger y si no lo cambias en el código fuente, siempre aparece este marquito alrededor de las imágenes.
Puedes quitárselo desde Plantilla/Edición de HTML, (en esta entrada te explico como hacerlo) y ya no tendrás que preocuparte más de los marcos, o desde el propio código que estás escribiendo, añadiéndole esto detrás de las comillas: (espacio)border="0" y antes de la barra inclinada de cierre.
Este código es válido para imágenes grandes que vayan a ocupar todo el espacio del blog.
Si son pequeñas, por defecto, se colocan a la izquierda, ya que así está estipulado en el código fuente del blog y te quedará una zona en blanco junto a ellas.
Para poder escribir allí has de añadir otra orden, la posición, así: (espacio)align=left.
Nota: (espacio) significa que ahí has de dejar un espacio, no que tengas que escribirlo.Para que veas el efecto voy a pegar aquí, a continuación, las campanas con este método.


Como ves han quedado a la izquierda y también puedes ver que estoy escribiendo al lado.
Recapitulemos, pues, con el código.
Para verlas a la izquierda y escribir al lado, el código a introducir sería este: <img src="dirección" align="left" border="0" /> cambiando la palabra dirección por la URL que hayas copiado.
---
Si quieres que queden centradas, has de escribir esto <div align=center> antes del primer código que he escrito y al final del mismo, esto otro: </div> ya que, como en este caso no se puede escribir a los lados, la alineación de la imagen se la has de decir aparte, de lo contrario te la colocará a la izquierda.
Con lo que el código completo, para centrarlas, finalmente, sería este:
<div align=center><img src="dirección"></div>
y se verían así

Centradas.


Si cambias left por right, en el código anterior, se verán a la derecha y también podrás escribir a su lado.
El código, en este caso, sería este: <img src="dirección" align="right" border="0" />
---
Si en lugar de insertarla en una entrada, quieres que la imagen se vea en la columna lateral, por ejemplo el árbol de Navidad que hay aquí, a la izquierda, pincha en Plantilla y en la página de elementos pincha en Añadir elemento a la página. En la ventana que se abre, selecciona HTML/Javascript y pegas el mismo código que para centrarlas, en el recuadro blanco. Si la quieres colocar a la derecha, cambias center por right y si la prefieres a la izquierda lo cambias por left, dependiendo del lado en que esté situada tu columna lateral.
Como allí no vas a escribir junto a la imagen, el código de centrarlas es suficiente.
---
Ahora vamos a ver cómo hacer que una imagen nos sirva de enlace a otro sitio.
Primero os voy a pegar el código y después pasaré a describirlo, para que sepas el porqué de cada cosa.
Sigamos con el ejemplo de las imágenes que hay en la barra lateral.
Puedes comprobar que pinchando en la bola Navideña vas a parar a la página concreta, de mi web, donde están todas las imágenes. Y si pinchas en la mariposa vas a parar a un álbum de Spaces, lo mismo sucede con los fondos, que te llevan a un álbum de Picasa.
El código que introduje en el elemento HTML/Javascript es el siguiente:
<div align="center"><a href="la dirección de la página a la que quiero que llegues" target="_blank"><img border="0" src="la dirección de la imagen que ves"/></a></div>
Vamos por partes:
En primer lugar: con align=center le digo que centre la imagen que ves.
Con a href le digo a donde quiero que vayas a parar al pincharla.
Con eso de target="blank" le digo que te abra la página en otra ventana.
Y por último, con img src le digo qué imagen quiero que veas aquí.
Lo de border="0" lo añadió el sistema, pues, como he dicho antes, en el código fuente del blog ya le he dado la orden de que no le ponga marcos a las imágenes. Si no has editado el código HTML del blog, o código fuente, tendrás que añadírselo tu, o le pondrán el consabido reborde.
El resto son los comandos que hacen que el programa obedezca.
Fíjate también que para cada comando de apertura <div hay uno de cierre </div> y que están situados en orden inverso los de cierre a los de apertura.
Es como si hubieses ido abriendo puertas, para llegar a algún sitio, dejándolas abiertas y las fueses cerrando al salir, conforme lo haces.
Ten en cuenta que si te faltase, tan solo un espacio, o unas comillas, o algo así, el código no funcionaría.

---
Pues eso es todo. Disculpad por la extensión de esta entrada, pero era la mejor manera de dejar todas estas explicaciones claras y juntas (pero no revueltas).
Espero haberme explicado con total claridad, pero, ya sabes, si te ha quedado alguna duda, mándame un mail o déjame un comentario y trataré de ayudarte.
¡Feliz Año!

Imprime esta entrada

11 comentarios. ¿Quieres añadir el tuyo?

  1. Key ha dicho
  2. Hola Eulalia !!! simplemente paso a dejarte mis deseos de que este Año esté lleno de felicidad, y lo hago ahora porque estaba de vacaciones, y no había tenido oportunidad de conectarme.
    Te deseo un muy Feliz año !!!
    Besotes ^_^

  3. Eulalia ha dicho
  4. Gracias, Key, lo mismo te deseo a ti. Besos.

  5. Alejandra ha dicho
  6. hola muy buen trabajo, gracias por el truco de las imagenes me sirvio mucho, pero me falto algo me pudes ayudar ...
    necesito saber como le hago para que las imagenes se queden como yo las acomodo, para que no queden una sobre otra, y sin texto asi solas?
    ayudame porfavor

  7. Eulalia ha dicho
  8. Hola Alejandra, bienvenida.
    He entrado en tu blog para ver a que te refieres y entiendo lo que deseas.
    Para hacer eso deberías indicarle, a través del HTML de la entrada, la posición de la imagen respecto al espacio de la misma.
    Es bastante complicado de hacer, sobre todo porqué ni cuando la escribes, ni en vista previa de la entrada, la vemos tal y como saldrá después en el blog.
    Pero intentaré hacer un tutorial este fin de semana para ayudar a calcularlo. Si me sale bien, te dejaré un aviso en tu blog.
    Saludos.

  9. Alejandra ha dicho
  10. ok. muchas gracias por tu ayuda. que tengas un buen dia.

  11. neus1973 ha dicho
  12. qué paciencia tienes con tu página, madre mía, y por cierto, cómo controlas de todo este mundillo, no??????

  13. Vesta ha dicho
  14. ¡Fantástica y productiva explicación Eulalia!

    Me ha encantado que en la explicación utilizases un ejemplo. Siempre queda mucho más claro y más real.

    ¡Mi enhorabuena!

    Besitos,

    Vesta, desde mi corazón.

  15. May Mupe ha dicho
  16. Mil gracias por tu ayuda!!! llevo un par de días practicando lo de las imágenes con enlaces... y voy a seguirte para no perderme ninguno de tus estupendos consejos blogueros. Un saludo :)

  17. Yolanny Andrea Rodriguez ha dicho
  18. hola queria saber si tienes alguna idea de comos e pega una imagen a un blog ajeno en la parte de los comentarios

    espero pronta respues
    gracias

  19. Eulalia ha dicho
  20. Hasta donde yo se, no es posible.

  21. Екатерина Гарбуз ha dicho
  22. Como hacer Backlinks de calidad !!! http://linxgo.com/DylV0 … Esta es una buena aplicación web para contratación de backlinks acreditados, optimizados e indexados por los buscadores. Es una plataforma que te permite crear cadenas de backlinks reales con mas de 500 directorios a la vez, el único sitio que te permite visualizar tus backlinks pagina por pagina y administrarlo como mejor te parece. Crea backlinks correctos con dominios principales (espacios dedicados exclusivamente para esto) no con subdominios o quien sabe que sitios raros que te pueden perjudicar gravemente. Aquí encontraras varias opciones para el posicionamiento en los buscadores a través de la masificación de contenidos. echa un vistazo … http://www.linxgo.com

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.