Happy Easter

Happy Easter es una selección de posters creados por la empresa Preuss und Preuss de Alemania como publicidad par el Köl­ner Zoo de Cologne.

REFERENCIAS:ibelieveinadv.com

"Hola, soy El Monstruo del Cursor . Mi papá tiene un mensaje para ti: "Por favor, no utilices cursor:none, salvo que quieras crear un monstruo comedor de cursores".

Creado por lab.simurai.com es algo al que sólo hay que ir y ver.

Hay muchas formas de fijar carteles en una página web; pueden ser simples o sofisticados pero, todos ellos se basan en el uso de la misma propiedad CSS: position: fixed que hace justamente eso, fijar una etiqueta de tal modo que queda siempre en la misma posición.

Esa posición se establece indicando el valor de cuatro posibles propiedades: left top right y bottom donde top:0; left:0; es el ángulo superior izquierdo de la ventana del navegador y bottom:0; right:0; es el ángulo inferior derecho.

Dado que esa posición depende del tamaño de la ventana, es posible que en monitores con resoluciones de pantalla muy grandes, el cartel se muestre "muy lejos"; eso suele resolverse con JavaScript pero, si uno no quiere complicarse, basta establecer la posición utilizando porcentajes como left: 50%.

Su contenido puede ser cualquier cosa ya que sólo se trata de una etiqueta exactamente igual a las demás; puede tener textos, enlaces, imágenes, tablas, videos, lo que se nos ocurra pero, siempre es bueno que se le agregue alguna clase de enlace que permita "cerrarla".

Los detalles del ejemplo:

<style>
  #fijo {
    background-color: #678;
    border: 1px solid #234;
    bottom: 20px;
    color: #FFF;
    font-size: 16px;
    outline: 1px solid #CCC;
    padding: 10px;
    position: fixed;
    left: 50%;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
    width: 300px;
    z-index: 1;
  }
  #fijo a { /* depende de la imagen a usar */
    display: block;
    float: right;
    height: 35px;
    width: 35px;
  }
</style>

<div id="fijo">
  <a href="javascript:void(0);" onclick="document.getElementById('fijo').style.display='none';">
    <img src="URL_IMAGEN" />
  </a>
  <p> ....... el contenido ....... </p>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate, nulla eget feugiat massa nunc.

Si bien es cierto que los feeds dan muchas posibilidades para leer los datos de nuestro blog usando JSON de manera relativamente simple, esto tiene dos limitaciones importantes, una objetiva y otra subjetiva. La primera es que no podemos leer TODO ya que siempre nos toparemos con que hay un máximo de 500 items; la segunda es que aún así, cargar cantidades importantes es impráctico porque el tiempo de ejecución se multiplica de manera significativa e incluso, hará que aparezcan ventanas de alerta en los navegadores si ese tiempo supera el tiempo máximo establecido por cada uno de ellos y se nos solicitará autorización para continuar o cancelar.

La combinación de ambas limitaciones es el motivo fundamental por la cual debemos usar valores pequeños; leer sólo una cantidad de entradas y mostrar eso pero claro, uno siempre quiere más; entonces se hace imprescindible que tengamos alguna clase de paginación o navegación que nos permita ir mostrando pedacitos de información e irlas cargando a medida que el usuario las solicita.

Acá es cuando podemos hacer uso del parámetro start-index que es el que nos permite solicitar datos a partir de determinada entrada; por ejemplo, esto cargaría las últimas 10 entradas:

http://miblog.blogspot.com/feeds/posts/default?start-index=1&max-results=10&orderby=published&alt=json-in-script&callback=mifuncion

y esto las siguientes diez:

http://miblog.blogspot.com/feeds/posts/default?start-index=11&max-results=10&orderby=published&alt=json-in-script&callback=mifuncion

y así, sucesivamente:

http://miblog.blogspot.com/feeds/posts/default?start-index=21&max-results=10&orderby=published&alt=json-in-script&callback=mifuncion
http://miblog.blogspot.com/feeds/posts/default?start-index=31&max-results=10&orderby=published&alt=json-in-script&callback=mifuncion

Podría, entonces, combinarse eso con alguno de los tantos scripts que hay pero sería engorroso y además, terminaríamos llenando la memoria con tanta cosa que en algún momento colapsaría el navegador o se haría imposible de usar.

Muchos podrían decir que, sin embargo, hay decenas de sitios donde parece que esto de la paginaciòn funciona ya que podemos navegar por la información sin salir de la página, vemos alguna clase de imagen de carga y avanzamos o retrocedemos pero, ese tipo de sitios suele usar PHP o Ajax, dos cosas que en Blogger nos están vedadas así que hay que buscar una solución alternativa y una de ellas es utilizar la idea de cargar scripts de manera dinámica de tal forma que si eso lo combinamos con lo inverso y podemos remover el script, solucionaríamos el problema y podríamos cargar los datos, usarlos y deshacernos de ellos.

Entonces, vamos a tratar de usar eso para mostrar TODAS las entradas del blog en una misma página sin colapsarla, agregándole la posibilidad de navegar por ellas.

Paginar: he ahí el dilema y, como esto va a ser una mezcolanza de cosas, para poder hacer una buena paginación, lo que debemos hacer es usar algo que ya exista; en este caso, uno de los tantos scripts de PHP que hay pero traducido a JavaScript.

¿Cómo paginamos algo? Necesitamos tres datos: saber la cantidad total de entradas, determinar la cantidad de entradas por página que se mostrarán y saber en qué página estamos; lo primero es un dato que tiene el mismo feed así que podemos leerlo ya que hay muchos gadgets que muestran la cantidad de entradas publicadas:

postporpagina = 50; // es un dato que definimos nosotros
cantidadposts = parseInt(json.feed.openSearch$totalResults.$t); // leemos la cantidad de entradas publicadas
cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1; // y calculamos la cantidad total de páginas

Acá van las explicaciones: Ver/Ocultar [+]

// estos son los datos que debemos establecer
var postporpagina = 60; // la cantidad de entradas a mostrar por página
var urlsitio = "http://miblog.blogspot.com"; // la url de nuestro blog
var minpaginas = 5; // la cantidad mínima de páginas a mostrar
var maxpaginas = 10; // la cantidad máxima de páginas a mostrar
var imgxdefecto = "http://xxxxxxxxxxx"; // la dirección de la imagen por defecto a ser utilizada

var firsttime = 0; // lo usamos para detectar la primera vez que se ejecuta
var paginaactual = 1; // contendrá el número de página donde estemos
var cantidadpaginas = 0; // contendrá el número total de páginas
var cantidadposts = 0; // contendrá el número total de entradas

// la función que interpreta los feeds y que siempre es más o menos la misma
function showpageposts(json) {
  var entry, posttitle, posturl, postimg;
  var salida = "";

  // la primera vez que se ejecuta la función, leemos la cantidad de entradas que hay y calculamos la cantidad de páginas
  if(cantidadpaginas==0) {
    cantidadposts = parseInt(json.feed.openSearch$totalResults.$t);
    cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1;
  }

  // leemos los datos que luego mostraremos
  for (var i = 0; i < postporpagina; i++) {
    if (i == json.feed.entry.length) { break; } // si no hay más, salimos
    entry = json.feed.entry[i];

    // el título de las entradas
    posttitle = entry.title.$t;

    // buscamos la url de las entradas
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

    // buscamos la imagen de las entradas o usamos la que establecimos por defecto
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = imgxdefecto;
    }

    // armamos el código HTML de salida de manera similar a lo que se veía en una <a href="http://vagabundia.blogspot.com/2010/12/usar-json-para-mostrar-las-entradas-del.html" target="_blank">entrada anterior</a>
    salida += "<div class='paginaposts'>";
    salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
    salida += "</div>";
  }
  
  // listo, ahora lo mostramos
  document.getElementById("resultados").innerHTML = salida;

  // y ejecutamos la función para paginar
  paginacion();
}

// esta es la función que muestra la paginación
function paginacion() {
  contadorP = 0;
  salida = "";

  // dependiendo de donde estamos, ponemos un enlace para retroceder o no
  if(paginaactual>1) {
    salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual-1) + ")'>anterior</a>";
  } else {
    salida += "<span class='deshabilitado'>anterior</span>";
  }

  // se calcula y se muestran los números de las primeras páginas, una sepación y las últimas páginas
  if (cantidadpaginas<(maxpaginas+1)) {
    for (contadorP = 1; contadorP <= cantidadpaginas; contadorP++){
      if (contadorP==paginaactual) {
        salida += "<span class='actual'>" + contadorP + "</span>";
      } else {
        salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
      }
    }
  } else if(cantidadpaginas>(maxpaginas-1)) {
    if(paginaactual<minpaginas) {
      for (contadorP=1; contadorP<(maxpaginas-2); contadorP++){
       if (contadorP == paginaactual) {
         salida += "<span class='actual'>" + contadorP + "</span>";
       } else {
         salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
       }
     }
     salida += " ... ";
     salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
     salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
    } else if(cantidadpaginas-(minpaginas-1)>paginaactual&&paginaactual>(minpaginas-1)) {
      salida += "<a href='javascript:incluirscript(1)'>1</a>";
      salida += "<a href='javascript:incluirscript(2)'>2</a>";
      salida += " ... ";
      for (contadorP=paginaactual-2; contadorP<=paginaactual+2; contadorP++) {
        if (contadorP==paginaactual) {
          salida += "<span class='actual'>" + contadorP + "</span>";
        } else {
          salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
        }
      }
      salida += " ... ";
      salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
      salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
    } else {
      salida += "<a href='javascript:incluirscript(1)'>1</a>";
      salida += "<a href='javascript:incluirscript(2)'>2</a>";
      salida += " ... ";
      for (contadorP=cantidadpaginas-(minpaginas+1); contadorP<=cantidadpaginas; contadorP++) {
        if (contadorP==paginaactual) {
          salida += "<span class='actual'>" + contadorP + "</span>";
        } else {
          salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
        }
      }
    }
  }

  // dependiendo de donde estamos, ponemos un enlace para avanzar o no
  if (paginaactual<contadorP-1) {
    salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual+1) + ")'>siguiente</a>";
  } else {
    salida += "<span class='deshabilitado'>siguiente</span>";
  }

  // mostramos el resultado
  document.getElementById("paginacion").innerHTML = salida;

  // y eventualmente, podemos mostrar la cantidad total
  var iniciopagina = (paginaactual * postporpagina) - (postporpagina - 1);
  var finalpagina = paginaactual * postporpagina;
  var totales = "Total de entradas publicadas: " + cantidadposts + " - Mostrando entradas " + iniciopagina + " a " + finalpagina;
  document.getElementById("totales").innerHTML = totales;
}

// esta es la función que escribe y ejecuta el script de manera dinámica
function incluirscript(pagina) {

  // salvo que sea la primera vez, antes, borramos el script
  if(firsttime==1) {removerscript();}

  // borramos todo y mostramos algún mensaje de carga
  document.getElementById("resultados").innerHTML = "<div id='loadingscript'>cargando ...</div>";
  document.getElementById("paginacion").innerHTML = "";
  document.getElementById("totales").innerHTML = "";

  // calculamos el valor a colocar en start-index
  var iniciopagina = (pagina * postporpagina) - (postporpagina - 1);

  // y armamos la url del feed
  var archivo = urlsitio + "/feeds/posts/default?start-index=" + iniciopagina;
  archivo += "&max-results=" + postporpagina;
  archivo += "&orderby=published&alt=json-in-script&callback=showpageposts";

  // cargamos y ejecutamos el script de manera dinámica
  var nuevo = document.createElement('script');
  nuevo.setAttribute('type', 'text/javascript');
  nuevo.setAttribute('src', archivo);
  nuevo.setAttribute('id', 'TEMPORAL');
  document.getElementsByTagName('head')[0].appendChild(nuevo);

  // establecemos los nuevos datos
  firsttime = 1;
  paginaactual = pagina;
}

// esta es la función que elimina un script previamente agregado utilizando su ID
function removerscript() {
  var el = document.getElementById("TEMPORAL");
  var padre = el.parentNode;
  padre.removeChild(el);
}

// ejecutamos la función por primera vez cuando se termina de cargar nuestro sitio
onload=function() { incluirscript(1); }

Como todo script, lo colocamos entre etiquetas <script type='text/javascript'> </script> aunque imagino que lo ideal sería usar una página estática y, en ese caso si colocamos el script en la plantilla deberíamos condicionarlo o bien alojarlo en algún servidor externo como DropBox o similar.

Faltaría darle alguna clase de estilo y allí, las posibildiades son muchas; en este ejemplo, usé algo así: Ver/Ocultar [+]

<style>
  #resultados { /* es el rectángulo del DIV donde se mostrarán */ }
  #loadingscript { /* es el texto de "cargando" */ }

  /* estas son las reglas de estilo para las entradas */
  .paginaposts { /* cada rectángulo */
    border: 1px solid #555;
    float: left;
    height: 35px;
    margin: 1px;
    padding: 5px;
    width: 197px;
  }
  .paginaposts a { /* los enlaces */
    color: #DDD;
    display: block;
    font-size: 11px;
    text-decoration: none;
  }
  .paginaposts img { /* la imagen miniatura */
    float: left;
    height: 36px;
    width: 36px;
  }
  .paginaposts h6 { /* el título de las entradas */
    float: right;
    height: 45px;
    margin: 0;
    width: 145px;
  }
  .paginaposts:hover { /* un efecto hover */
    background-image: -moz-linear-gradient(100% 100% 90deg, #338, #33F);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#338), to(#33F));
    filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF3333FF', EndColorStr='#FF333388');
    border: 1px solid #33F;
  }

  /* estas son las reglas de estilo para la paginación inferior */
  #paginacion { /* el rectángulo contenedor */
    color: #BBB;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    height: 35px;
    line-height: 28px;
    padding: 20px 0;
    text-align: center;
  }
  #paginacion span, #paginacion a { /* cada número, texto o enlace */
    border: 1px solid #444;
    color: #BBB;
    display: inline-block;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    margin: 0 2px;
    padding: 0 5px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
  }
  #paginacion span.actual { /* resaltamos la página actual */
    color: #FFF;
    padding: 0 5px;
    -moz-box-shadow: 0 0 30px #DDD inset;
    -webkit-box-shadow: 0 0 30px #DDD inset;
    box-shadow: 0 0 30px #DDD inset;
  }
  #paginacion a:hover { /* efecto hover sobre los enlaces */
    color: #FFF;
    -moz-box-shadow: 0 0 20px #666 inset;
    -webkit-box-shadow: 0 0 20px #666 inset;
    box-shadow: 0 0 20px #666 inset;
  }
  #paginacion .antesdespues { border: none; }
  #paginacion .antesdespues:hover {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  #paginacion span.deshabilitado { /* los enlaces deshabilitados */
    border: none;
    color: #666;
  }

  /* la salida de la cantidad total */
  #totales {text-align:center;}
</style>

Entonces, ya tenemos todo así que en este demo online lo que he creado es una página estática y allí he puesto lo siguiente:

<style>
/* la reglas de estilo
</style>

<!-- cargo el script -->
<script src="URL_miscript.js"></script>

<!-- los divs contenedores -->

<!-- aquí se mostrarán los posts -->
<div id="resultados"> </div>

<!-- elimino flotaciones -->
<div style="clear:both;"> </div>

<!-- aquí se mostrará la paginación -->
<div id="paginacion"> </div>

<!-- aquí se mostrará el texto con los totales  -->
<div id="totales"> </div>

Resumen de entradas

Los elementos agregados a nuestro sitio pueden flotar a la izquierda o a la derecha y no existen términos medios.

Es cierto que en algunas plantillas se ven cosas como float: center; pero eso tiene el mismo efecto que poner float: pepito; ya que, cuando el navegador no reconoce una propiedad, simplemente la ignora y sigue de largo sin hacer nada ni indicar que hay un error así que, cualquier valor colocado que no sea left, right o none no hará nada de nada.

¿Para qué hacer que algo flote? El uso más común es para "acomodar" cierto texto alrededor de una imagen:

<div><img style="float: left;" src="URL_imagen" /> el texto a mostrar </div>

Cras tincidunt auctor metus in interdum. Nam semper varius est, sed pulvinar tellus dignissim vel. Fusce lobortis congue interdum. Morbi lobortis gravida rutrum. Fusce scelerisque fringilla diam, vitae viverra justo rhoncus auctor. Nullam metus purus; sollicitudin sit amet pulvinar ut, euismod at odio. Duis bibendum lacus nec velit posuere pulvinar. Praesent tristique elit a felis tincidunt eu dictum diam ultrices. Donec accumsan posuere accumsan? Maecenas condimentum vulputate ante ac egestas. Suspendisse et enim est, interdum dapibus metus. Nullam venenatis molestie rutrum.

<div><img style="float: right;" src="URL_imagen" /> el texto a mostrar </div>

Cras tincidunt auctor metus in interdum. Nam semper varius est, sed pulvinar tellus dignissim vel. Fusce lobortis congue interdum. Morbi lobortis gravida rutrum. Fusce scelerisque fringilla diam, vitae viverra justo rhoncus auctor. Nullam metus purus; sollicitudin sit amet pulvinar ut, euismod at odio. Duis bibendum lacus nec velit posuere pulvinar. Praesent tristique elit a felis tincidunt eu dictum diam ultrices. Donec accumsan posuere accumsan? Maecenas condimentum vulputate ante ac egestas. Suspendisse et enim est, interdum dapibus metus. Nullam venenatis molestie rutrum.

Pero ¿qué pasa cuando queremos centrar esa imagen y ponerle el texto alrededor? No hay respuestas para eso. No está previsto e incluso hay quienes sostienen que es innecesario ya que la legibilidad de los textos se vería seriamente afectada y pese a que eso es una opinión subjetiva, no deja de tener cierta lógica.

Lo que si es posible es utilizar columnas donde tengamos una imagen centrada y dos textos, uno a su derecha y otro a su izquierda. La primera solución para eso es un esquema de este tipo:

<style>
  #contenedor-center {
    margin: 0 auto;
    text-align: center;
    width: 620px;
  }
  #texto-L, #texto-R { width: 200px; }
  #texto-L { float: left; text-align:right; }
  #texto-R { float: right; text-align:left; }
</style>

<div id="contenedor-center">
  <div id="texto-L">
    <p> el texto a mostrar </p>
  </div>
  <div id="texto-R">
    <p> el texto a mostrar </p>
  </div>
  <img src="URL_imagen" />
</div>

Cras tincidunt auctor metus in interdum. Nam semper varius est, sed pulvinar tellus dignissim vel. Fusce lobortis congue interdum. Morbi lobortis gravida rutrum. Fusce scelerisque fringilla diam, vitae viverra justo rhoncus auctor. Nullam metus purus; sollicitudin sit amet pulvinar ut, euismod at odio. Duis bibendum lacus nec velit posuere pulvinar. Praesent tristique elit a felis tincidunt eu dictum diam ultrices. Donec accumsan posuere accumsan? Maecenas condimentum vulputate ante ac egestas. Suspendisse et enim est, interdum dapibus metus. Nullam venenatis molestie rutrum.

Aenean sollicitudin urna quis nibh ultricies rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec commodo ligula. Ut eleifend, justo elementum tempor pharetra, eros nunc rhoncus nibh, nec eleifend tellus mi vitae mauris. Curabitur a mauris varius est bibendum iaculis? Nam in felis mauris. Cras odio dui, fermentum ac tincidunt in; condimentum non nulla. Proin convallis; lectus sit amet sollicitudin rutrum, sapien quam porta purus, et feugiat felis lacus id dui. Cras sed pretium quam.

Se verán tres columnas pero el texto no rodeará la imagen; abajo quedará un espacio en blanco si es que ese texto es largo.

En css-tricks.com dan una solución aternativa utilziando el pseudo-elemento before para crear un "agujero" y allí poner la imagen:

<style>
  #contenedor-center {
    margin: 0 auto;
    position: relative;
    width: 620px;
  }
  #imagen-center {
    position: absolute;
    top: 0;
    left:50%;
    margin-left:-100px; /* el margen es la mitad del ancho de la imagen */
  }
  #texto-L, #texto-R { width: 49%; }
  #texto-L { float: left; }
  #texto-R { float: right; }
  #texto-L:before, #texto-R:before {
    content: "";
    height: 300px; /* la altura es igual a la altura de la imagen */
    width: 100px; /* el ancho es la mitad del ancho de la imagen */
  }
  #texto-L:before { float: right; }
  #texto-R:before { float: left; }
</style>

<div id="contenedor-center">
  <img id="imagen-center" src="URL_IMAGEN" />
  <div id="texto-L">
    <p> el texto a mostrar </p>
  </div>
  <div id="texto-R">
    <p> el texto a mostrar </p>
  </div>
</div>

Cras tincidunt auctor metus in interdum. Nam semper varius est, sed pulvinar tellus dignissim vel. Fusce lobortis congue interdum. Morbi lobortis gravida rutrum. Fusce scelerisque fringilla diam, vitae viverra justo rhoncus auctor. Nullam metus purus; sollicitudin sit amet pulvinar ut, euismod at odio. Duis bibendum lacus nec velit posuere pulvinar. Praesent tristique elit a felis tincidunt eu dictum diam ultrices. Donec accumsan posuere accumsan? Maecenas condimentum vulputate ante ac egestas. Suspendisse et enim est, interdum dapibus metus. Nullam venenatis molestie rutrum.

Aenean sollicitudin urna quis nibh ultricies rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec commodo ligula. Ut eleifend, justo elementum tempor pharetra, eros nunc rhoncus nibh, nec eleifend tellus mi vitae mauris. Curabitur a mauris varius est bibendum iaculis? Nam in felis mauris. Cras odio dui, fermentum ac tincidunt in; condimentum non nulla. Proin convallis; lectus sit amet sollicitudin rutrum, sapien quam porta purus, et feugiat felis lacus id dui. Cras sed pretium quam.

Las transisiones con CSS no están limitadas a efectos hover que permutan propiedades de un solo elemento; pueden ser aplicadas de otras formas para reaccionar a clicks, pero, en ese caso, como siempre, debemos recurrir al JavaScript para que los navegadores interpreten lo que queremos hacer.

En un primer ejemplo, armamos una especie de lista con imágenes del mismo tamaño que funcionará de manera similar a un slider:

<div id="demoANIM1">
  <div id="demoANIM1imagenes">
    <img src="URL_IMAGEN1" />
    <img src="URL_IMAGEN2" />
    <img src="URL_IMAGEN3" />
    <-- agregamos todas las que se nos ocurran (en el ejemplo hay siete) -->
    <img src="URL_IMAGEN7" />
  </div>
</div>

Puesto así, las veremos una al lado de la otra o una debajo de la otra dependiendo de sus tamaños o del editor que empleemos.

No importa, ahora le agregaremos algunos enlaces para "navegar" ya sea arriba o abajo de lo anterior:

<div id="demoANIM1links">
  <a onclick="srcdemoANIM1(0);" href="javascript:void(0);">1</a>
  <a onclick="srcdemoANIM1(1);" href="javascript:void(0);">2</a>
  <a onclick="srcdemoANIM1(2);" href="javascript:void(0);">3</a>
  <-- agregamos un enlace para cada una de las imágenes -->
  <a onclick="srcdemoANIM1(6);" href="javascript:void(0);">7</a>
</div>

Veremos los numeritos que son enlaces y que por ahora no harán nada. Nos falta el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio:

<style>
  #demoANIM1 { /* es el DIV contenedor */
    /* lo dimensiono del mismo tamaño que la imagen (en este ejemplo de 500x375) */
    height: 375px;
    width: 500px;
    margin: 0 auto; /* lo centro */
    overflow: hidden; /* impido que se deborde */
    position: relative; /* establezco esta propiedad para poder ubicar las imágenes de manera absoluta */
  }
  #demoANIM1imagenes { /* es el contendor interno donde están las imágenes */
    /* lo fijo arriba */
    position:absolute;
    left: 0;
    top: 0;
    /* le digo que su ancho es igual a la suma del ancho de todas imágenes */
    width: 3500px; /* 500 * 7 = 3500 */
    /* y le digo que cualquier cambio sea animado */
    -moz-transition:all 1s ease-in-out;
    -webkit-transition:all 1s.ease-in-out;
    -o-transition:all 1s.ease-in-out;
    transition:all 1s ease-in-out;
  }
  #demoANIM1imagenes img { /* fuerzo a que las imágenes se vean todas iguales */
    height: 375px;
    width: 500px;
  }
  /* y le pongo un poc de estilo a los numeritos que sirven de enlace */
  #demoANIM1links {
    border-bottom: 1px solid #345;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    width: 500px;
  }
  #demoANIM1links a {
    background-color: #345;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 4px #ABC inset;
    margin: 0 2px;
    padding: 4px 8px;
  }
  #demoANIM1links a:hover {
    box-shadow: 0 0 8px #ABC inset;
    color: #FFF;
  }
</style>

Lo que veré ahora será una sola imagen (la primera) y si le quitara la propiedad overflow, vería una tira larga con las siete imágenes, una al lado de la otra ya que todas se encuentran dentro de un contenedor que es el que desplazaremos, modificando la propiedad left.

Para eso necesito un script que es lo que se ve en el atributo onclick de los enlaces.

<script>
//<![CDATA[
  function srcdemoANIM1(num) {
    var mover = num * 500;
    document.getElementById("demoANIM1imagenes").style.left = -mover + "px";
  }
//]]>
</script>

Es una función simple, llega con un numero de orden (de 0 a 6 en este caso), lo multiplica por el ancho de la imagen y reposiciona el DIV contenedor de las imágenes una cierta cantidad de pixeles, moviéndolo (número negativo) hacia la izquierda. Como hemos establecido las propiedades de transición, eso se verá con un efecto deslizante en Firefox 4, Safari, Chrome y Opera.

1234567

¿Para qué usamos border="0" en las imágenes?

La teoría es la siguiente: por defecto, los navegadores crean un borde automático en toda etiqueta IMG que sea un enlace; ese borde tiene un pixel de ancho y es del mismo color que el texto de los enlaces y por lo tanto, si no queremos que se muestre ese borde, debenos agregar ese atributo.

Cuando subimos una imagen a Blogger, el código siempre es un enlace que permite abrir la imagen original y si bien nos muestra un código "excesivo", de todos modos, allí está el famoso atributo:

<div class="separator" style="clear: both; text-align: center;">
  <a href="http://......./s1600/........" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" height="xxx" src="http://......./sxxx/........" width="xxx" />
  </a>
</div>

Entonces, ¿basta que pongamos border="0" para que una imagen no tenga borde?

Si pero no; esta es la misma imagen con el mismo código y sin embargo, tiene un borde:

¿Por que ocurre eso? Porque lentamente, los atributos de las etiquetas van siendo reemplazdos por el CSS y esto no es una moda; las regla de estilo, tienen prioridad sobre los atributos así que si agregamos una regla que diga que los enlaces tengan borde, el border="0" será ignorado.

En Blogger, todo eso suele estar definido al inicio; por ejemplo, en una plantilla minima dice esto:

a:link {
  color:$linkcolor;
  text-decoration:none;
}
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
}
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
a img {
  border-width:0;
}

Y por supuesto, podemos modificarlo como se nos ocurra:

a:link, a:visited {
  color: #FF0;
  outline: none;
  text-decoration:none;
}
a:hover {
  color: #F0F;
  outline: none;
  text-decoration:none;
}
a img {
  border: none;
}

o establecer reglas específicas para las imágenes de las entradas

.post img {
  border:4px outset #940f04 ;
  padding:4px;
}

o ya que Blogger agrega una clase, podemos usarla:

.separator {
  .......
}
.separator img {
  .......
}
.separator img:hover {
  .......
}

Algo similar ocurre con otros atributos como width y height.

Usando el mismo código agregado por Blogger podemos crear reglas que lo modifiquen y estas reglas de estilo, tendrán prioridad sobre los atributos:

.separator img {
  background-color: #EEE;
  border: 5px solid #ABC;
  height: 100px;
  outline: 1px solid #DDD;
  padding: 5px;
  width: 100px;
}