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

Nuevo gadget de etiquetas

Pues si, no estoy loca, hay una nueva forma de mostrar las etiquetas en tu blog: la llamada Nube de etiquetas.

Para ponerla tienes dos opciones: O eliminas el gadget que ya tenías, o añades un segundo gadget de etiquetas.

Escoger una u otra opción puede depender de la cantidad de etiquetas que estés usando.

Me explico:
Si tienes pocas etiquetas en tu blog, no es necesario que conserves el antiguo. Puedes mostrarlas todas mediante este sistema.
Pero si tienes muchas etiquetas en tu blog y decides mostrarlas todas de esta forma, es posible que ocupe muchisimo espacio en la sidebar y haga más lioso encontrar algo.
En este caso te recomendaría que usaras los dos.
El antiguo para mostrarlas todas y el nuevo para destacar las más utilizadas, o las que desees.

Porqué, a diferencia del gadget anterior, en este nuevo gadget puedes escoger cuantas mostrar.

Para añadirlo, solo has de ir a Diseño, pinchar en Añadir un gadget y escoger el de Etiquetas.

Lo verás así

Puedes cambiarle el nombre al gadget, para no confundirlo con el otro si has de retocar algo en el código, decidir si se muestran por orden alfabético o por frecuencia, si quieres que se vea la cantidad de entradas que hay en cada una o no, por supuesto marcar nube y lo principal, decidir si quieres que se muestren todas o solo algunas.

Si optas por esa opción se abrirá una lista como ésta:

Las verás marcadas todas. Si tienes muchas, dale primero a ninguna, arriba de todo, para que se desmarquen y luego marca las que creas oportunas mostrar en esa nube.
Dale a Finalizado cuando estés.

Se cerrará este panel y verás así el gadget:

Dale a Guardar, si todo está bien o cambia cualquier otro detalle, aunque lo podrás editar siempre que quieras y ya lo verás en el blog.

Si quieres ver como queda, en la columna lateral he dejado uno con unas pocas.

El elemento Imagen

Este es otro de los elementos que nos sirven para enlazar con algún otro sitio con una imagen, pero, a diferencia de los gadgets Tetxo y HTML/Javascript, solo podrás poner una imagen en cada uno.

Cuando añadimos este gadget, eso es lo que vemos:

Fíjate que tienes 3 casillas. Una para el título, otra para el pie de foto y una tercera para poner un enlace en la imagen.

Rellenamos las 3, si queremos que se vea el título, o solo las otras dos si lo preferimos sin título.
Ahora hay que añadir una imagen.
Puedes hacerlo desde tu pc, dándole a examinar.
También verás un cuadrito marcado, que te dice que la imagen se reducirá hasta ajustarse a una cierta medida. No lo desmarques. Si tu imagen es menor que esto, no hay problema, pero si es mayor pueden pasar dos cosas: O que no se vea entera, o que la columna lateral se vaya al fondo para poder mostrarla entera, ya que la medida que veas ahí, es la medida que tiene de ancho tu columna lateral.

Una vez encontrada la imagen al momento ya se ve aquí.

Y si le das a guardar, la verás así en el blog.

También puedes añadir una imagen que esté en algún lugar de la red. Para ello pincha en esta casilla y pega ahí la dirección de la imagen.

Al momento la verás ahí.




Y al guardar la verás así en el blog.

En ambos casos, la imagen está alineada a la izquierda. Si es bastante grande quizá no se note, pero si es pequeñita si que se nota mucho. Si quieres que se centre has de entrar en Diseño/Edición de HTML y buscar ésto en el código del blog.

Y añadir esto que ves aquí, o sea:
.Image {
text-align:center;
}

Y aunque con esta imagen casi no se aprecia, por ser casi tan grande como la columna lateral, fíjate que el texto que había abajo se ha centrado, lo que significa que si la imagen hubiese sido pequeñita también se vería centrada.

Como puedes comprobar poniendo una mucho mas pequeña.



Y si pincharas en esta imagen irias a parar a mi nuevo blog.

El elemento Texto

Este elemento es muy parecido al HTML/Javascript, pero, a diferencia de aquel, solo sirve para poner texto e imágenes, con enlaces o sin ellos, pero no se si se podrían poner los códigos que nos dan en las páginas que nos proporcionan cosas. El otro está pensado para admitir scripts, embeds y otras zarandajas. Ignoro si en éste funcionarían igual, nunca se me ha ocurrido probarlo.

Pero, ¡en fin!, vamos a ver como funciona.

De entrada. cuando lo escoges en la lista de gadgets, tras haber pinchado en Añadir un gadget, ya verás que, al contrario que en el otro, sale la pantalla "normal" del editor de textos, con un enlace para ver el HTML de lo que escribas.

Así puedes escribir normalmente, como haces en el editor de las entradas y ver el HTML de lo escrito al pinchar en Edición de HTML, igual que en las entradas.
Poder ver el HTML significa poder añadir imágenes, pues es el modo de hacerlo, ya que, a diferencia del editor de las entradas, este no tiene el botoncito para hacerlo directamente.

Aquí puedes ver que he añadido el código adecuado para que se vea una imagen.

Como digo en la entrada dedicada al gadget HTML/Javascript, los saltos de línea los decide el sistema en base a lo larga que sea la dirección de la imagen. Tu has de escribir esto:

<img src="aqui la dirección de la imagen"> sin dejar más espacios que el que hay entre img y src. Y, por supuesto, has de poner la dirección de la imagen que quieras que se vea, no las palabras que he escrito yo.

Una vez escrito ya puedes verlo pinchando en Formato RTF.

Fíjate que la imagen se ha colocado a la izquierda. Esto es así porqué el código dice que, por defecto, todo empieza por la izquierda.

Si quieres centrarlo, has de añadir esto que ves aquí.

Con este <center> al principio le dices que quieres que la imagen esté centrada.

Con el </center> del final cierras la orden, con lo que, si siguieras escribiendo debajo de la imagen, el resto del escrito se vería alineado a la izquierda.

Y puedes ver que ha obedecido la orden, pinchando de nuevo en Formato RTF.

Si quieres que esta imagen sirva de enlace a algún sitio, puedes seleccionarla y pinchar en el botón de añadir enlaces...

...para que se abra la ventanita donde añadir la dirección del sitio que quieras enlazar.

Recuerda que si vas a pegar la dirección has de borrar ese http:// que ya hay escrito, y que si vas a escribirla, y no lo borras, no has de repetirlo, o la dirección no funcionará.

Si vuelves a edición de HTML después de haber colocado el enlace lo verás así.

Si quisieras que este enlace se abriera en otra ventana, solo has de añadir eso de target="_blank" después de las comillas que cierran la dirección enlazada, dejando un espacio entre dichas comillas y la t de target.

Y si además quieres que se vea un texto al poner el ratón encima de la imagen, añades también un espacio y title="lo que quieras que se lea" detrás de las comillas que cerraban lo de target blank.

Al volver a Formato RTF ya podemos ver como se verá ese texto, poniendo el ratón encima de la imagen.

Y así es como se verá en el blog, una vez que hayas guardado el gadget.

Al poner el ratón encima de la imagen, además de verse la leyenda, también puedes ver la dirección enlazada si miras abajo, a la izquierda, en la barra de estado de la ventana del navegador.

Si vieras dos http:// significaría que te has equivocado y que este enlace no funcionará. Vuelves a Diseño, pinchas en editar de ese gadget, entras en Edición de HTML y borras uno de los dos.

Al igual que en el elemento HTML/Javascript, puedes añadir más imágenes solo repitiendo el proceso tantas veces como quieras.

El elemento HTML/Javascript

Este elemento, o gadget sirve para muchas cosas.
Principalmente podemos colocar en él los códigos que nos proporcionan algunos sitios para poder tener en nuestro blog, contadores, videos, etc.
Pero también puedes usarlo para poner imágenes o textos y enlaces a cualquier sitio mediante ese texto o esas imágenes.

Y como el movimiento se demuestra andando y una imagen vale más que mil palabras, aquí están las imágenes paso a paso de como usar un gadget de esos para poner un texto con un enlace o una imagen que sirva de enlace a tu dirección de correo.

Empezaremos por ir a Diseño y pinchar en Añadir un gadget, de la columna lateral.
De la lista de gadgets que sale escogeremos HTML/Javascript.
Veremos ésto:

Pinchando en estas letras que se ven en naranja, (al poner el ratón encima, pues se ven en azul normalmente), que dicen Formato RTF se ve así:

Como ves, hay más herramientas arriba, ya que se ha convertido en un editor de textos normalito, aunque muy simple. Puedes escribir en el recuadro e incluso añadir un enlace a tu texto, de la misma forma que en cualquier editor, simplemente seleccionas el texto que servirá de enlace y pinchas en la bola.

Saldrá esta ventanita para que añadas el enlace. Este http:// lo verás en azul, como seleccionado. Si pinchas al lado se pondrá así y podrás escribir el resto de la dirección. Recuerda que no has de escribir eso que ya está ahi, o la dirección no funcionará.

Pero si en lugar de escribirla quieres pegarla, porque la has copiado previamente, dale a la tecla retroceso de tu teclado para que borre ese http:// y la barra para escribir la dirección quede vacía...

Y pega ahí la dirección.

En cuanto le des a Aceptar, el enlace quedará colocado y las palabras usadas se verán así:

Si quieres que ese enlace se abra en otra ventana, pincha en Edición de HTML...

Verás el código de lo que hayas escrito, con el enlace allí colocado.

Añades eso de target="_blank" después de las comillas de la dirección del enlace, dejando un espacio antes de ponerlo y cuando alguien pinche en este enlace se abrirá en una ventana nueva.

Ahora vamos a usar este mismo gadget para poner una imagen y luego haremos que enlace a tu dirección de mail.

En este caso hemos de hacerlo directamente en Edición de HTML, o sea, en el gadget tal y como se abre cuando lo añades.

Empecemos por poner la imagen. Escribes la dirección así como se ve aquí.

Los cambios de línea los decide el sistema en base a lo larga que sea la dirección. Tu has de escribirlo seguido así: <img src="aqui la dirección de la imagen">

Si pinchas en Formato RTF verás la imagen que has colocado.

Pero, si te fijas, verás que se ve a la izquierda del todo. Quizá prefieras que se vea centrada. En este caso, vuelve a pinchar en Edición de HTML y añade esos center que ves aquí.

Fíjate que hay dos, ambos entre simbolos. Uno al principio de todo y otro al final y que el del final tiene, además una barra inclinada delante de la palabra center.

Esta barra inclinada es la orden de cierre.

De esta forma le estás diciendo que centre esta imagen y cierras la orden al final. Así, si quisieras seguir escribiendo, el resto saldría bien colocado a la izquierda.

Y como puedes ver la orden se cumple.

Ahora añadiremos el enlace a la dirección de correo.

Puedes seleccionar la imagen, cuando estás viéndola así y añadir el enlace en la ventanita que se abre para añadir direcciones.

En éste caso has de borrar lo de http:// y escribir mailto:dirección evidentemente poniendo la dirección de correo en lugar de la palabra dirección que he escrito yo...

...o escribir el enlace directamente en el HTML tal como ves aquí.

Fíjate como se escribe un enlace: <a href="enlace">lo enlazado, ya sea imagen o texto</a>

Fíjate también que la orden /center sigue estando al final de todo y que la /a se ha colocado delante de ella. Esto es así porqué las órdenes se han de cerrar en orden inverso al que tienen al principio.

Si además quisieras que al poner el ratón encima de la imagen se viera un texto, en Edición de HTML has de añadir eso que ves aquí.

O sea, detrás de las comillas que cierran el enlace, dejas un espacio y escribes: title="palabras que quieras que se vean"

En este caso he escrito Contáctame.

Volviendo a Formato RTF ya se puede ver el efecto al poner el ratón encima de la imagen.

Y una vez guardado el gadget, así se ve en el blog.

Al poner el ratón encima, además de verse la leyenda también se ve lo enlazado en la barra de estado, esa barra blanca que hay abajo de todo de la página, en la ventana del navegador.

Donde, como puedes comprobar, se ve el enlace que hay en la imagen de arriba.

Si quiseras añadir más imágenes, solo has de repetir el proceso en el mismo gadget, añadiendo, detrás/debajo de lo que haya, el nuevo código para que se vea la otra imagen.

Puedes añadir todas las que quieras. Solo ten en cuenta que cuantas más añadas más largo será el gadget.