Cómo conseguir imágenes estáticas en blogger

Share

Por cuestiones del diseño o de inserción, las imágenes en el blogger que subimos siempre tienden a ser propensas a realizar una acción cuando se da clic sobre ellas, ya sea que se abran en la misma pestaña del navegador o en un visor como lo es el lightbox de blogger. Sin embargo eso puede cambiar si modificas un poco el código HTML de cada imagen después de subirla como te muestro a continuación:

Cuando insertas una imagen a tu blog en blogger (ya sea subida desde tu computadora o una url) siempre genera un código de inserción como el siguiente:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglWw5XWwRIrhy4zoPBje5xt1RCa4ggO2swaOkidREmTZIJ-gNC4oBtMjX39PXVHyTS3eF72FmrIDrzc3L5RLVZ4LztjG-0Y_shtwOWWhgkjs3A_3aOwCSe8TVkz_ourhDmGFttTLAqxuk/s1600/imagenes-estaticas-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglWw5XWwRIrhy4zoPBje5xt1RCa4ggO2swaOkidREmTZIJ-gNC4oBtMjX39PXVHyTS3eF72FmrIDrzc3L5RLVZ4LztjG-0Y_shtwOWWhgkjs3A_3aOwCSe8TVkz_ourhDmGFttTLAqxuk/s1600/imagenes-estaticas-blogger.jpg" height="180" width="320" /></a></div>

El código de arriba corresponde al de la imagen que puedes ver en este artículo, sin embargo, verás que se conforma de dos partes: la de referencia y la de fuente. La URL de referencia marcada en rojo es la dirección que nos dan los servidores de google cuando se sube una foto, y la de fuente marcada en morado es la obligatoria para que se muestre la fotografía en nuestra entrada.

Cuando quieras 'generar' una imagen estática en tu blog, simplemente sube la imagen e insértala a tu contenido normalmente, cuando ya esté en el cuerpo del post, dirígete al apartado de HTML de las herramientas como se muestra en la imagen:

Cuando veas todo un conjunto de letras y números, busca el código HTML correspondiente a la imagen que será más o menos como este:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglWw5XWwRIrhy4zoPBje5xt1RCa4ggO2swaOkidREmTZIJ-gNC4oBtMjX39PXVHyTS3eF72FmrIDrzc3L5RLVZ4LztjG-0Y_shtwOWWhgkjs3A_3aOwCSe8TVkz_ourhDmGFttTLAqxuk/s1600/imagenes-estaticas-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglWw5XWwRIrhy4zoPBje5xt1RCa4ggO2swaOkidREmTZIJ-gNC4oBtMjX39PXVHyTS3eF72FmrIDrzc3L5RLVZ4LztjG-0Y_shtwOWWhgkjs3A_3aOwCSe8TVkz_ourhDmGFttTLAqxuk/s1600/imagenes-estaticas-blogger.jpg" height="180" width="320" /></a></div>

Para hacer que la imagen se mantenga estática, borra (con mucho cuidado) lo que aparece en rojo, al eliminar ese atributo estás instruyendo que tu imagen sólo sea visible pero sin la oportunidad de que haga alguna acción al dar clic sobre ella, tal y como las imágenes de este post; si intentas dar clic en alguna, no se mostrarán en el visor de fotos ni se abrirán en una nueva pestaña.

Recuerda que estoy para resolver cualquier duda que dejen en los comentarios.