Poner imágenes en una entrada (sin añadirlas a la entrada)

Hay ocasiones en las que queremos añadir imágenes a una entrada pero no queremos que puedan abrirse aparte, ya sea porqué no hace falta o por cualquier otro motivo, pero si las subimos directamente al blog, mediante la herramienta de añadir fotos, siempre se abrirán aparte al pincharlas.

Esto se debe a que blogger las almacena en el álbum que crea para cada blog en Picasaweb y luego las muestra en un tamaño adecuado al espacio del que disponemos.

Cuando añadimos una imagen a una entrada por este sistema, si pinchamos en la pestaña Edición de HTML, veremos un código muy largo, que blogger añade para poder mostrar la imagen, en el que hay la dirección de la imagen, la posición de la misma en la entrada, la medida que muestra y varios detalles más.
Dicho código es, al mismo tiempo, un enlace a la imagen del álbum, por eso, cuando se pincha, la imagen se abre mostrándose en su medida original, si fuera mayor que la mostrada, o simplemente en la misma medida, pero sin la entrada.

Para que no se abran, podemos añadirlas directamente al HTML de la entrada, pero para ello primero tendremos que subirlas al álbum, (o a cualquier otro servidor), a fin de que les den una dirección que podamos usar para que se vean.

Si queremos usar el propio álbum, podemos acceder a el y subirlas directamente, como explico en esta entrada, si no disponemos del programa Picasa, o a través del programa, si lo usamos. En éste caso puedes elegir subirlas al álbum del blog, a cualquier otro álbum que tengas, o crear uno nuevo.
Una vez subidas al álbum, ya podremos añadirlas a nuestra entrada sin problema.

Para ello deberemos trabajar con dos ventanas (o pestañas), de nuestro navegador.
En una de ellas abriremos nuestro blog y pincharemos en Entrada nueva, a fin de empezar a escribirla.
En la otra abriremos el álbum donde estén las imágenes que queramos añadir a la entrada.
También podríamos usar dos navegadores, uno para cada ventana. Esto queda a gusto de cada cual.

Una vez las dos ventanas o pestañas preparadas, seguiremos estos pasos:

1º.- En la ventana donde está el álbum.
Si tenemos la vista de miniaturas, pincharemos en la imagen que queramos añadir a fin de que se abra sola.
(Si esta frase te crea dudas, mira esta entrada).

2º.- En la ventana del blog.
En cuanto queramos añadir la imagen, pincharemos en Edición de HTML .
Allí verás el texto que hayas escrito hasta el momento. Le damos a Enter para que la imagen se coloque debajo de lo escrito, (si queremos que quede una línea de separación entre el texto y la imagen, le damos 2 veces a Enter) y escribiremos: <img src="

3º.- En la ventana donde esté la imagen a añadir.
La pincharemos con el botón derecho para saber su url.

Si usamos Firefox, o Google Chrome, o algún otro navegador que no sea Internet Explorer, al pinchar la imagen con el botón derecho, en el menú que aparece, se ve la frase Copiar URL de la imagen. (O cualquier otra similar, cada navegador lo expresa a su manera, pero siempre has de mirar que diga URL de la imagen o dirección de la imagen).

Si usamos Internet Explorer, al final del menú veremos Propiedades.

4º.- Pincharemos en lo que corresponda, Copiar URL o Propiedades, con el botón izquierdo.

4º/a.- Si se usa Internet Explorer, al pinchar en Propiedades se abrirá una ventanita en la que se ve la URL. La seleccionaremos y la pincharemos con el botón derecho para que se abra el menú. Allí pincharemos en copiar.

En cualquier caso, una vez pinchado en Copiar, del menú de Internet Explorer, o en Copiar URL de la imagen, de cualquier otro navegador, volveremos a la ventana del blog.

5º.- En la ventana del blog.
Pegaremos la dirección que hemos copiado, detrás de las comillas y añadiremos ">
Le damos a Enter para que el cursor se coloque en la línea de abajo.
Si queremos que quede un espacio entre la imagen y el texto, le damos dos veces a Enter.

Esto nos dará un código así: <img src="aquí estará la dirección de la imagen">

6º.- Sin salir de Edición de HTML.
Si queremos seguir escribiendo, teclearemos la primera palabra del resto de la entrada, a fin de saber donde escribir cuando volvamos a Redactar.
Si queremos añadir otra imagen, repetiremos los pasos anteriores.

Estos pasos harán que la imagen quede a la izquierda. Si queremos centrarla, antes del código de la imagen escribiremos: <center> y al final del código escribiremos </center>
Con esto el código de cada imagen será así:

<center><img src="la dirección de la imagen"></center>

Si la imagen es más grande que el espacio del que disponemos para las entradas es posible que, o bien se vea cortada, o bien se salga del espacio y nos eche hacia abajo la columna lateral.
Para evitarlo le añadiremos el dato del ancho, antes de src, de esta forma:

style="width: XXXpx;" siendo XXX el ancho que ha de tener para que se vea entera dentro del espacio de la entrada.
Si ignoras cual es el ancho del que dispones, pon 450px y si luego, al publicarla y ver la entrada, te parece que todavía es muy grande, o que podría ser más ancha, solo tendrías que Editar la entrada, buscar el dato en la pestaña Edición de HTML y modificarlo.

Con este dato el código ha de quedar así:

<center><img style="width: XXXpx;" src="la dirección"></center>

Y con este truquillo, cuando le des a Publicar, tus imágenes se verán, pero no se abrirán aparte.

Fuentes y colores 2 (Como se ve ahora)

Desde hace ya bastantes días, habreis notado que ya no se ve la pestaña Fuentes y colores.
Ahora se ve ésto.

Para modificar los colores y/o las fuentes del blog, pinchando ahí veis esto.

Al pinchar en Avanzado se abre esto que veis. Desde ahí se puede modificar tanto los colores como las fuentes, pero ¡Cuidado! antes de cambiar nada tomad nota de lo que se vea ahí, por ejemplo, en este caso, el código del color, pues podría ser que al escoger otro si no os gusta y le dais a Borrar cambios no saliera exactamente el que había.

Me sucedió con una fuente. No me fijé en la que había, modelo y tamaño y escogí otra. No me gustó y le di a borrar cambios y apareció una letra pequeñísima que estaba segura que no era la que había antes.

Por suerte era un blog de pruebas y no tuvo mayores consecuencias.

Actualiza tu plantilla

Este es el aviso que aparece ahora en el Escritorio de blogger:

No te asustes. se trata tan solo de asegurarte de que no tienes ningún archivo alojado en Google Pages Creator, ya que va a cerrar definitivamente.

Quizá digas que tu no has subido nada a Google Pages, pero piensa que a veces os dejamos códigos para el blog que quizá incluyan la dirección de algún script y ese archivo si que puede estar alojado allí, así que te aconsejo que aceptes, pinchando en ese enlace que dice Actualizar y revisar.

Al hacerlo se abrirá una página para que accedas a tu cuenta. Ya estará la dirección de mail colocada, solo tienes que poner la contraseña y aceptar.

Te redirigirán a esta página:

donde te advierten de que ese sitio quiere acceder a tu cuenta. Acepta. (Al fin y al cabo es un servicio más de blogger).

Al aceptar se abrirá una página en la que verás tu/tus blog/s, de esta forma:

Si junto al título hay una señal verde y pone que no se han enncontrado referencias, significa que no tienes en el blog ningún archivo que esté alojado allí.

Pero si sale esa señal de peligro y dice que hay 1 (o más) referencias, pincha en Update references.

Se abrirá una nueva página así:

Aquí te dicen que el primer paso es descargarte la plantilla de tu blog.
No estás obligado/a a hacerlo, he actualizado todos mis blogs sin descargarla y no he tenido problemas, pero si te vas a sentir más seguro/a hazlo.
Se abrirá una ventanita que te preguntará que hacer con el archivo. Dale a Guardar.

Una vez hecho, o no, este paso, pincha en Next.

Te llevará al segundo paso, que lo verás así:

A la izquierda verás esto y a la derecha podrás ver la nueva dirección que tendrá tu archivo.

(Lo he subido en dos imágenes para que se pueda ver bien).

Dale a Update.

A los pocos segundos volverás a la página de los blogs para poder actualizar otro, si lo hubiera.
Y junto al que acabas de actualizar se verá la señal verde.

El hecho de que los actualices no hará desaparecer el aviso del escritorio. Supongo que hasta que Google Pages cierre, se seguirá viendo para que todos podamos actualizar nuestros blogs.

Un detalle a tener en cuenta: Acepta todo tipo de archivos, así que si tienes scripts en tu blog, (páginas dobladas, leer más, etc.), se alojarán en el nuevo hosting sin problemas.

Una entrada siempre la primera

Ultimamente muchas personas me preguntan como hacerlo. Quieren que una de las entradas del blog sea siempre la primera que se ve.

Para hacerlo hay que republicarla cada vez que se hace una entrada nueva.

Por ejemplo: Esta entrada que estás leyendo se publicará con fecha 9/12/09 a las 10:05, ya que la hora de publicación es aquella en la que empiezas a escribirla.

Si yo quisiera que la entrada anterior a ésta, o sea la que hasta este momento ha estado la primera de todas, siguiera siendo la primera que se ve, en cuanto publique esta entrada que estás leyendo pincharía en Editar entradas y en Editar de la entrada en cuestión y le cambiaría la fecha de publicación, poniendo 9/12/09 a las 10:10 y le daría a Publicar entrada, con lo cual la entrada anterior volvería a ser la primera que se viera al entrar en el blog.

Para cambiar la fecha de publicación has de pinchar en Opciones de entrada, en la parte de abajo del editor de textos.
Al pinchar ahí se expande esta zona mostrando la fecha y hora de la entrada, que puedes modificar a tu gusto.

Otra cuestión es la necesidad de tener una entrada siempre la primera.

Para mi, esto es un error y te explicaré por qué siguiendo con el ejemplo.

Si tu tienes este blog en tu lista de blogs y yo tuviera una entrada que mantuviera siempre en primer lugar, en tu lista de blogs dicha entrada sería la única que se vería siempre, con lo cual no sabrías si he actualizado el blog o no y si alguien entra ocasionalmente en este blog y quiere regresar en otro momento, pero ni se ha hecho seguidor ni ha pedido que le lleguen mis actualizaciones, si al volver a entrar ve la misma entrada pensará que no he actualizado el blog y quizá no vuelva a entrar si ve siempre lo mismo (y ambas cosas las he podido comprobar en un blog al que yo entraba a veces antes de que blogger implantara lo de los seguidores).

Por otro lado, no se si los lectores de feeds darían por republicada la entrada en cuestión, con lo que a mis lectores les llegaría un aviso de haber vuelto a hacer la misma entrada siempre.

Si quieres mostrar algo siempre en primer lugar, ¿porqué no lo pones en un gadget Texto y colocas ese gadget encima de las entradas?
Puedes hacer que dicho gadget se muestre solo en la página principal y no en las siguientes.

Ya se que esta solución no permitiría que dejaran comentarios en dicha entrada, pero ¿de veras crees que los lectores van a comentar siempre en la misma entrada?

Si optas por esta solución, en esta entrada de Tuneando el blog, explico como hacerlo.

Poner imágenes más grandes en el blog.

Esta es una consulta que me han hecho en varias ocasiones.

Cuando subimos una imagen al blog, blogger la redimensiona basándose en las medidas originales de sus plantillas.

El problema es que hoy en día la mayoría de usuarios hemos ensanchado los blogs, con lo que sus medidas quedan algo pequeñas.

Para poner las imágenes de un tamaño mayor al que da blogger, has de subir las imágenes al álbum y colocarlas luego a través del HTML de la entrada, teniendo en cuenta el ancho de tus entradas para que la imagen no se corte ni salga del margen.

Como hacerlo:

En primer lugar has de subir las imágenes a tu álbum.

Si usas Picasa, el programa, simplemente selecciona las imágenes que vayas a añadir y dale a Subir.

Te dirá que las va a poner en un álbum con el título de la carpeta en la que estén esas imágenes.

Así, si las tienes en Mis imágenes abrirá un álbum con este título.

Puedes aceptar, o buscar el álbum del blog para añadirlas en él.

Si no usas Picasa has de entrar en la página y subirlas directamente. Quizá te pida que te registres, ya sabes, dirección y contraseña con los que entras al blog.

Una vez subidas abres tu blog y el álbum en dos ventanas distintas.

Haces la entrada y cuando la acabes, pinchas en la pestaña edición de HTML.

En la otra ventana, pinchas en la imagen que vayas a colocar allí y, cuando se abra sola, miras a la derecha. En la columna verás que pone: Enlace a esta foto. Pincha.

Se desplegarán dos direcciones. La que vale es la que hay bajo Enlace, la que empieza por http

Seleccionas, y copias.

Buscas el lugar exacto en el que vas a incluir una imagen y allí escribes:

<img src="y aquí pegas la dirección que has copiado">

Si la imagen es más ancha que la zona de las entradas de tu blog, has de añadir algo para que se vea entera, con lo que esa línea la has de dejar así: (pongamos por ejemplo que la zona de entradas midiera 550 pixels)

<img style="width:500px" src="la dirección">

Para saber cuanto puede medir la zona de las entradas, entra en Diseño/Edición de HTML y en la zona que veas que ponga algo así: #main o #main-wrapper mira que cifra hay en la línea width. Ese es el ancho de la zona de las entradas.

Como ves no te digo que uses todo el espacio. Eso es por si tienes algún padding que haga que no uses realmente todos los pixels disponibles.

El problema con eso es que no se va a poder pinchar para verla a tamaño natural.

Si quieres que se pueda pinchar has de escribir esto:

<a href="la dirección de la imagen"><img
style="width:500px" src="la dirección de la imagen"></a>

De esta forma se verá más grande de lo que blogger decide y se podrá pinchar para verla a tamaño natural.

Si vas a poner más de una repites el proceso con la siguiente colocando el código que te he dado donde corresponda.

Más información de estos procesos la encontrarás en estas entradas:

Añadir imágenes a las entradas

Como averiguar, copiar y pegar una URL

Subir imágenes directamente al álbum web de Picasa

Crear un nuevo álbum desde Picasa