Cuatro packs de íconos pequeños

Just Vector
	Contiene 100 íconos de 32x32, en formato PNG.descargar

Milky
	Contiene 262 íconos de 48x48 y 64x64, en formato PNG.descargar

Simple Icons
	Contiene 16 íconos de 32x32, en formato PNG.descargar

Designer icons
	Contiene 12 íconos de 32x32, en formato PNG.descargar

Glass es un servicio que a mi juicio sigue estando aún un poco verde pero que agrega una nueva forma de compartir cosas en la web de manera ... digamos que simple.

Una vez que nos registramos gratuitamente, tenemos que agregar la extensión ya sea para Firefox como para Chrome y a partir de allí, se nos agregará un botón al navegador. Desde cualquier sitio, haciendo click en él, se abrirá un panel donde, por ejemplo, si elegimos New Slide, podremos dejar mensajes, agregar enlaces, imágenes o incluso videos agregando las direcciones URL de estos que luego, podrán ser vistos por cualquiera que use el servicio o sól opor aquellos que nosotros hayamos elegido.

No sé si este modelo de comunicación tendrá o no tendrá alguna repercusión en el futuro pero, no puede negarse que es original y cualquier cosa, hay más detalles que pueden verse en el tutorial paso a paso que, si bien está en inglés, puede entenderse sin demasiadas dificultades.

Glass

Una forma distinta de compartir contenidos.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/4FepgyhwoHU'><param name='movie' value='http://www.youtube.com/v/4FepgyhwoHU' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

REFERENCIAS:wwwhatsnew.com

Sigamos mezclando cosas.

A partir de la navegación por entradas usando JSON, otra posibilidad es hacer algo similar con las etiquetas pero, usando algún otro dato que también nos dan los feeds y el resultado, será algo parecido a esta entrada pero, agregándole la posibilidad de avanzar y retroceder en la lista sin necesidad de salir de la página, cargándolas de manera dinámica.

Esta vez, en lugar de contar las entradas y paginarlas, vamos a usar el dato de página anterior y página siguiente que puede ser leido en el feed ya que las páginas son enlaces que tienen un atributo rel específico pero, hay varios enlaces generales así que las buscamos de esta manera:

var urlanterior = "";
var urlsiguiente = "";

for (var k = 0; k < json.feed.link.length; k++) {
  if (json.feed.link[k].rel == 'previous') {
    // si existe, guardamos la dirección a la página anterior
    urlanterior = json.feed.link[k].href;
  }
  if (json.feed.link[k].rel == 'next') {
    // si existe, guardamos la dirección a la página siguiente
    urlsiguiente = json.feed.link[k].href;
  }
}

El problema con esas direcciones es que son raras; no sé por que. Por ejemplo, dicen esto:

http://www.blogger.com/feeds/33571139/posts/default/-/iconos/-/iconos?alt=json-in-script&start-index=6&max-results=5&orderby=published

así que usaremos JavaScript para modificarla un poco eliminando una parte y que se adapte al formato que uno conoce.

Entonces, como en todos los casos anteriores, primero el JavaScript que ponemos antes de </head>:

<script type='text/javascript'>
//<![CDATA[
... aquí ponemos el contenido del script
//]]>
</script>

o bien cargamos desde un archivo externo:

<script type='text/javascript' src='URL_archivo.js' />

// estos son los datos que deben definirse
var entradasporpagina = 5; // establecer la cantidad de entradas a mostrar
var urlsitio = "http://miblog.blogspot.com"; // cambiar por el nombre del sitio
var imgxdefecto = "http://xxxxxxxxxxx"; // establecer la dirección de la imagen por defecto a ser utilizada
var cualetiqueta = "nombreetiqueta"; // definir la etiqueta a mostrar

var flagfirst = 0;
var cantidadposts = 0;
var urlanterior, urlsiguiente;

// esta es la función genérica que elimina las etiqueas y crea el resumen
function eliminartags(cual,longitud){
  var resumen = cual.split("<");
  for(var i=0;i<resumen.length;i++){
    if(resumen[i].indexOf(">")!=-1){
      resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);
    }
  }
  resumen =  resumen.join("");
  resumen = resumen.substring(0,longitud-1);
  return resumen;
}

// esta es la misma función de siempres con algunas variantes
function showpageetiquetas(json) {
  var entry, posttitle, posturl, postimg, postcontent;
  var salida = "";

  // vamos a buscar las direcciones para navegar la lista
  for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
      // esta es la página anterior
      urlanterior = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
      // esta es la página siguiente
      urlsiguiente = json.feed.link[k].href;
    }
  }

  // leemos tantas entradas como definimos
  for (var i = 0; i < entradasporpagina; i++) {

    // si no hay más, terminamos el bucle
    if (i == json.feed.entry.length) { break; }

    entry = json.feed.entry[i];

    // este es título de cada entrada
    posttitle = entry.title.$t;

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

    // buscamos el contendio de la entrada y lo guardamos
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    } else {
      postcontent = "";
    }

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

    // terminada la lectura, vamos creando el código HTML
    salida += "<div class='paginaetiquetas'>";
    salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
    salida += "<p>" + eliminartags(postcontent,100) + " ...</p>";
    salida += "</div>";
  }

  // terminamos el bucle y escribimos el resultado que son las entradas encontradas
  document.getElementById("misetiquetas").innerHTML = salida;

  // vamos a crear la parte inferior con la navegación
  salida = "";

  // si hay una página anterior, ponemos el elnace y sino, sólo un texto
  if(urlanterior) {
    salida += "<a href='javascript:navpaginaetiquetas(-1);' class='anterior'>anterior</a>";
  } else {
    salida += "<span class='deshabilitado anterior'>anterior</span>";
  }

  // si hay una página siguiente, ponemos el elnace y sino, sólo un texto
  if(urlsiguiente) {
    salida += "<a href='javascript:navpaginaetiquetas(1);' class='siguiente'>siguiente</a>";
  } else {
    salida += "<span class='deshabilitado siguiente'>siguiente</span>";
  }
 
  // le agregamos un enlace a la primera página
  salida += "<a href='javascript:navpaginaetiquetas(0);' class='inicio'>inicio</a>";

  // escribimos el código
  document.getElementById("navegadionetiquetas").innerHTML = salida;
}

// esta es la funcion que creará la dirección del feed que vamos a leer
function navpaginaetiquetas(direccion){
  var p, parametros;
  if(direccion==-1) {
    // página anterior
    p = urlanterior.indexOf("?");
    parametros = urlanterior.substring(p);
  } else if (direccion==1) {
    // página siguiente
    p = urlsiguiente.indexOf("?");
    parametros = urlsiguiente.substring(p);
  } else {
    // página inicial
    parametros = "?start-index=1&max-results=" + entradasporpagina + "&orderby=published&alt=json-in-script"
  }
  parametros += "&callback=showpageetiquetas";
  
  incluirscript(parametros);
}

// esta es la funcion que carga el script de manera dinámica
function incluirscript(parametros) {
  // si no es la primera vez, borramos el script anterior
  if(flagfirst==1) {removerscript();}
  // borramos todo y ponemos un texto o una imagen de carga
  document.getElementById("misetiquetas").innerHTML = "<div id='loadingscript'></div>";
  document.getElementById("navegadionetiquetas").innerHTML = "";
  // este es el archivo con los feeds
  var archivofeeds = urlsitio + "/feeds/posts/default/-/" + cualetiqueta + parametros;
  // lo cargamos y ejecutamos
  var nuevo = document.createElement('script');
  nuevo.setAttribute('type', 'text/javascript');
  nuevo.setAttribute('src', archivofeeds);
  nuevo.setAttribute('id', 'OTROTEMPORAL');
  document.getElementsByTagName('head')[0].appendChild(nuevo);
  flagfirst = 1;
}

// esta es la función que remueve el script cargado previamente
function removerscript() {
  var el = document.getElementById("OTROTEMPORAL");
  var padre = el.parentNode;
  padre.removeChild(el);
}

// cuando se cargue nuestro sitio, iniciamos las funciones
onload=function() { navpaginaetiquetas(0); }

Un poco de CSS para darle forma. Lo ponemos debajo de lo anterior:

<style>
  #misetiquetas { /* el contenedor */
      margin: 0 auto;
      width: 314px;
  }
  #loadingscript { /* el texto o imagen de carga */ }
  .paginaetiquetas { /* cada una de las entradas */
    border: 2px solid #101921;
    height: 72px;
    margin: 5px 0;
    padding: 5px;
    width: 300px;
  }
  .paginaetiquetas img { /* la miniatura */
    float: left;
    height: 72px;
    padding-right: 5px;
    width: 72px;
  }
  .paginaetiquetas h6, .paginaetiquetas h6 a { /* los títulos de las entradas */
    font-size: 11px;
    font-weight: normal;
    margin: 0;
  }
  .paginaetiquetas p { /* los resúmenes */
    font-size: 11px;
    margin: 5px 0;
  }
  #navegadionetiquetas { /* el contenedor con los enlaces para navegar */
    border: 1px solid #404951;
    color: #BBB;
    font-size: 18px;
    text-align: center;
    margin:0 auto;
    width:314px;
  }
  #navegadionetiquetas a { /* los enlaces para navegar */
    color: #BBB;
    display:block;
    font-size: 18px;
    padding: 5px 10px;
  }
  #navegadionetiquetas span { /* los textos deshabilitados */ 
    color: #666;
    padding: 5px 10px;
  }
  /* las posiciones de los enlaces para navegar */
  #navegadionetiquetas .siguiente {float: right;}
  #navegadionetiquetas .anterior {float: left;}
  #navegadionetiquetas .inicio {text-align: center;}
</style>

Bien; sólo nos falta ponerlo en algún elemento HTML, en un post o en la plantilla misma:

<div id="misetiquetas"></div>
<div id="navegadionetiquetas"></div>

Y eso es todo.

Facebook ha añadido un nuevo botón llamado "Enviar" que sirve para compartir contenido de modo diferente al botón Me Gusta ya que, en lugar de enviar la información a todos los contactos, la envia de manera personalizada, ya sea a una persona, a un conjunto de personas o a los miembros de un grupo.

El nuevo botón sólo puede ser agregado utiliando lenguaje XFMBL por lo tanto, si no tenemos incorporada esta posibilidad a nuestro sitio, primero que nada debemos colocar lo siguiente justo después de <body>:

<div id='fb-root'></div>
<script src='http://connect.facebook.net/es_ES/all.js#appId=APP_ID&amp;xfbml=1'></script>

Esto nos permitirá utilizar el código especial de Facebook con cualquier otro plugin de la red social. Este código no es otra cosa que etiquetas especiales llamadas FB y para agregar el botón Enviar, lo mínimo a colcoar sería lo siguiente:

<fb:send href='URL'></fb:send>

donde href es la dirección URL a compartir. El resto de las opciones (color, fuentes, etc) podemos verlas en la misma página del plugin.

En Blogger si queremos que la URL apunte a cada entrada en particular, deberíamos condicionar el botón de tal forma que sólo se muestre en las entradas individuales y utilizar las expresiones de Blogegr para indicar esa dirección:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <fb:send expr:src='data:post.url'></fb:send>  
</b:if>

Quienes ya utilicen el botón Me Gusta tienen la posibilidad de combinarlos utilizando el mismo código XFMBL al que sólo se le debe agregar el atributo send="true" con el mismo criterio que antes, indicando una dirección URL especifica como por ejemplo el home de nuestro sitio:

<fb:like src='http://miblog.blogspot.com' send='true' width='450' show_faces='true'></fb:like>

o condicionándolo para que puedan compartirse las entradas individuales:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <fb:like expr:src='data:post.url' send='true' width='450' show_faces='true'></fb:like>
</b:if>

Los navegadores utilizan cursores de manera predeterminada, estableciendo cuál será el que se muestra de acuerdo al tipo de etiqueta pero, como casi todo, esos valores pueden ser cambiados utilizando CSS. En este caso, al propiedad que los define es:

cursor: valor;

Esos valores posibles son muchos e inclusio varian de navegador en navegador; algunos no producen efectos y otros son iguales entre si.

El valor por defecto es auto; el valor default muestra la fecha típica de selección y si usamos el valor none no se mostrará ninguno:

Es común ver que muchos utilizan el valor hand para indicar enlaces pero, esto es un error ya que es un cursor que sólo es soportado por Internet Explorer; para indicar un enlace, debe usarse pointer que mostrará lo mismo en todos los navegadores:

cursor: pointer;

Claro que, al entrar en al era del CSS3, a esos cursores se les han sumado algunos otros que por ahora, sólo son visibles en Firefox, Chrome, Safari y Opera pero, que pueden usarse sin problemas ya que la propiedad puede ser definida varias veces; de hecho, tendremos que definirla varias veces para usar estos nuevos modelos porque cada navegador tiene su propio valor.

Hay cuatro modelos disponibles:

cursor: grab; 
cursor: grabbing;
cursor: zoom-in;
cursor: zoom-out;

Para utilizarlos, debemos colocar los valores con sus respectivos prefijos: -moz- para Firefox, -webkit- para Chrome y Safari y -o- para Opera:

cursor: -moz-grab; cursor: -webkit-grab; cursor: -o-grab; cursor: grab;
cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: -o-grabbing; cursor: grabbing;
cursor: -moz-zoom-in; cursor: -webkit-zoom-in; cursor: -o-zoom-in; cursor: zoom-in;
cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: -o-zoom-out; cursor: zoom-out;

Aparentemente, la w3.org dice que habrá otors tres pero no parece que aún hayan sido incorporados a ningún navegador:

cursor: count-down;
cursor: count-up;
cursor: count-up-down;

Sí, el CSS para estos modelos de botones es extremadamente largo pero no hay más remedio cuando cada navegador usa sus propiedades y hay que repetirlas varias veces. De todos modos, lo que nos muestra wiseheartdesign.com es una alternativa válida, sobre todo, para aprender cómo pueden combinarse y que funcionen relativamente bien en la mayoría de las plataformas.

El demo puede verse funcioanndo acá y la idea es crear botones que tengan varias líneas de texto.

En la página del autor hay varios ejemplos y este sólo es uno de ellos:

<style>
a.multi-line-button {
  /* lo normal */
  background-color: #60a3d8;
  border-color: #2970a9;
  border-left-color: #60a3d8;
  border-top-color: #60a3d8;
  border-style: solid;
  border-width: 1px;
  color:#EEE;
  display: block;
  margin: 0.2em auto;
  padding: 12px 15px;
  text-align: center;
  text-decoration: none;
  /* el CSS3 */
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  -o-background-clip: padding-box;
  -ms-background-clip: padding-box;
  -khtml-background-clip: padding-box;
  background-clip: padding-box;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  ms-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #89BBE2), color-stop(50%, #60A3D8), color-stop(100%, #378BCE));
  background-image: -moz-linear-gradient(top, #89BBE2 0%, #60A3D8 50%, #378BCE 100%);
  background-image: linear-gradient(top, #89BBE2 0%, #60A3D8 50%, #378BCE 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#89bbe2', EndColorStr='#378BCE'); 
  -moz-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  -webkit-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  -o-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  text-shadow: #2e7ebd 0 1px 2px;
}
a.multi-line-button .title {
  color: #CFF;
  display: block;
  font-family: Times New Roman;
  font-size: 24px;
  opacity: 0.9;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
}
a.multi-line-button .subtitle {
  color: #DEF;
  display: block;
  font-family: Georgia;
  font-size: 14px;
  margin-top: 4px;
  opacity: 0.7;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}
a.multi-line-button:hover .title {
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

a.multi-line-button:hover .subtitle {
  opacity: 0.8;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
a.multi-line-button:active {
  padding: 13px 15px 11px;
}
a.multi-line-button:hover, a.multi-line-button:focus {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #9DC7E7), color-stop(50%, #74AFDD), color-stop(100%, #378BCE));
  background-image: -moz-linear-gradient(top, #9DC7E7 0%, #74AFDD 50%, #378BCE 100%);
  background-image: linear-gradient(top, #9DC7E7 0%, #74AFDD 50%, #378BCE 100%);
}
a.multi-line-button:active, a.multi-line-button.depressed {
  border-color: #2970a9;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #5796C8), color-stop(100%, #6AA2CE));
  background-image: -moz-linear-gradient(top, #5796C8 0%, #6AA2CE 100%);
  background-image: linear-gradient(top, #5796C8 0%, #6AA2CE 100%);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
</style>

Y se usaría de este modo:

<a class='multi-line-button' href='#' style='width:14em'>
  <span class='title'>MI EJEMPLO</span>
  <span class='subtitle'>el botón con una segunda línea de texto de cualquier longitud</span>
</a>

MI EJEMPLOel botón con una segunda línea de texto de cualquier longitud

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;
}

Social Icon Set by oxanaart
	Contiene 120 íconos de 64x64, 128x128 y 256x256, en formato PNG.descargar

Accro

Una animación de Google Doodle.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/3NGSU2PM9dA'><param name='movie' value='http://www.youtube.com/v/3NGSU2PM9dA' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

REFERENCIAS:Shuatas

MpppIt es un buscador de archivos MP3 que se identifica a si mismo como Super Simple y realmente lo es; basta poner el nombre del tema o el intérprete o cualquier otra cosa que se nos ocurra para que aparezca una lista y un reproductor que ejecuta automáticamanete el primer resultado.

Haciendo click en cualquier item de la lista, cambiamos de tema o seguimos buscando.

El reproductor funciona perfectamente y además de los controles usuales posee dos botones extras:

Upload to Dropbox nos permitirá subir el tema directamente a nuestra cuenta para lo cual usa el sistema de autentificacion del mismo DropBox que es un método similar al que usa Twitetr para aceptar aplicaciones de terceros. Esto no lo he probado porque en general no me gusta autorizar accesos que a veces son un poco vagos en cuanto a sus condiciones. Para más información puede verse el blog del sitio aunque poco dicen.

Direct Link nos da el enlace directo así que con ese botón, podemos descargarlos y los subimos nosotros mismos.

REFERENCIAS:wwwhatsnew.com

css3.me es otro de esos sitios que nos ayudan a crear reglas de estilo, fundamentalmente, aquellas que suelen ser complejas de entender tales como sombras o gradientes.

Lo interesante de este es que incluye las necesarias para que funcione en versiones de Internet Explorer anteriores a la 9 siempre y cuando puedan ser "traducidas" a filtros.

Podemos jugar un rato e ir previsualizando los resultados hasta que nos decidamos por alguno y luego, basta hacer click en Get the code para que podamos copiarlo. Ver/Ocultar [+]

background-color:#ffffff;
border-width:2px;
border-color:transparent;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
/*IE DOES NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow:inset 0px 0px 20px #000000;
-webkit-box-shadow:inset 0px 0px 20px #000000;
box-shadow:inset 0px 0px 20px #000000;
/*Inner elements should not cover inner shadows*/
/*Chrome renders inset shadows incorrectly with border-radius*/
/*IE DOES NOT SUPPORT INSET SHADOWS*/
background: -moz-linear-gradient(left, #000000, #85a1ff);
background: -webkit-gradient(linear, left top, right top, from(#000000), to(#85a1ff));
background: -o-linear-gradient(left, #000000, #85a1ff);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#000000', endColorstr='#85a1ff');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#000000', endColorstr='#85a1ff')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background: linear-gradient(left, #000000, #85a1ff);
/*--IE9 DOES NOT SUPPORT GRADIENT BACKGROUNDS--*/
/*All filters must be placed together*/

Luego, podemos usarlo en cualquier tipo de regla, por ejemplo, en una clase:

.miejemplo {
....... y aquí pegamos el código .......
}

Obviamente, podemos editarlo u optimizarlo; por ejemplo, en este caso podríamos eliminar el borde, eliminar los prefijos de algunas propiedades que ya son innecesarios tales como -moz-border-radius, -webkit-border-radius, -moz-box-shadow o -webkit-box-shadow ya que los neuvos navegadoree aceptan las propiedades border-radius y box-shadow; etc.

Faltaría recordar que para que ciertas propiedades tengan efecto, las etiquetas donde son agregadas deben ser dimensionadas mediante width y height.

Esta es una variación del ejemplo anterior donde se utilizaban transiciones para crear algo similar a un slider de imágenes.

En este caso, en lugar de desplazar el contenedor, intentaremos que las imágenes se muestren con un efecto de fade y por lo tanto, aunque los principios son los mismos, la forma de detectar las cosas variará y necesitaremos más datos para identificar cada imagen.

Otra vez, armamos una lista con imágenes del mismo tamaño con una serie de enlaces debajo de ella:

<div id="demoANIM2">
  <div id="demoANIM2imagenes">
    <img id="img_1" src="URL_IMAGEN1" class="visible" />
    <img id="img_2" src="URL_IMAGEN2" class="novisible" />
    <img id="img_3" src="URL_IMAGEN3" class="novisible" />
    <-- agregamos todas las que se nos ocurran (en el ejemplo hay siete) -->
    <img id="img_7" src="URL_IMAGEN7" class="novisible" />
  </div>
</div>
<div id="demoANIM2links">
  <a onclick="srcdemoANIM2(1);" href="javascript:void(0);">1</a>
  <a onclick="srcdemoANIM2(2);" href="javascript:void(0);">2</a>
  <a onclick="srcdemoANIM2(3);" href="javascript:void(0);">3</a>
  <-- agregamos un enlace para cada una de las imágenes -->
  <a onclick="srcdemoANIM2(7);" href="javascript:void(0);">7</a>
</div>

La diferencia básica es que acá le agregamos un ID distinto a cada imagen y una clase que será class="visible" en la primera o en aquella que querramos mostrar por defecto y class="novisible" en el resto de ellas.

Por supuesto, el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio:

<style>
  #demoANIM2 { /* 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 */
  }
  #demoANIM2imagenes img { /* las imágenes */
    /* lo fijo arriba */
    position:absolute;
    left: 0;
    top: 0;
    /* fuerzo a que las imágenes se vean todas iguales */
    height: 375px;
    width: 500px;
    /* 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;
  }
  #demoANIM2imagenes img.visible { /* la imagen es visible */
    opacity:1;
    filter: alpha(opacity=100);
  }
  #demoANIM2imagenes img.novisible {  /* la imagen está oculta */
    opacity:0;
    filter: alpha(opacity=0);
  }
  /* y le pongo un poc de estilo a los numeritos que sirven de enlace */
  #demoANIM2links {
    border-bottom: 1px solid #345;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    width: 500px;
  }
  #demoANIM2links a {
    background-color: #345;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 4px #ABC inset;
    margin: 0 2px;
    padding: 4px 8px;
  }
  #demoANIM2links a:hover {
    box-shadow: 0 0 8px #ABC inset;
    color: #FFF;
  }
</style>

Lo que haremos para que esto funcione como slideshow es variar la opacidad de las imágenes permutando su clase y eso lo haremos con JavaScript:

<script>
//<![CDATA[
// establezco cuál es la imagen visible inicial
var imgvisible = "img_1";

function srcdemoANIM2(num) {
  // la imagen a ser mostrada
  var id = "img_" + num;
  var mostrar = document.getElementById(id);
  // la que ahora esta visible
  var actual = document.getElementById(imgvisible);
  // si son la misma no hago nada
  if(mostrar==actual) {return false;}
  // permutos su clase ocultando la visible y mostrando otra
  actual.className="novisible";
  mostrar.className="visible";
  // y guardo ese dato
  imgvisible = id;
}
//]]>
</script>

En Firefox 4, Safari, Chrome y Opera veremos como las imágenes aparecencon un efecto de fade y en el resto de los navegadores se mostrarán de manera simple.

1234567

Toda etiqueta es un rectángulo que se ubica ya sea uno al lado del otro o uno debajo del otro. Esto siempre es así salvo excepciones ... como todo.

Justamente, esas excepciones son las que nos permite superponer los rectángulos y hacer que uno se muestre encima del otro. Básicamente, hay dos propiedades que controlan esos detalles: position y z-index.

Por defecto, la propiedad position, tiene el valor static pero, admite otros como relative y absolute. Usando esos dos valores podemos ubicar cualquier cosa en un lugar preciso. Lo más simple es que el contenedor tenga el valor relative y el contendio el valor absolute:

<div style="position: relative;">
  <div style="position: absolute;"> HOLA </div>
</div>

HOLA

Así como está, no parece haber diferencias, si le quitamos as propiedades, se verá igual porque nos falta algo más, agregarle las que nos permitirán ubicarlo con exactitud y estas son top, right, bottom y left que son las "coordenadas" cuyo punto de origen es el borde del contenedor asi que si ponemos left: 30px y top: 50px, el contenido bajará 50 pixeles (borde superior = cero) y se movera otros 30 a la izquierda (borde izquierdo = cero):

<div style="position: relative;">
  <div style="position: absolute; left: 30px; top: 50px;"> HOLA </div>
</div>

HOLA

Y si ponemos right: 30px y bottom: 50px, el contenido subirá 50 pixeles (borde inferior = cero) y se movera otros 30 a la derecha (borde derecho = cero):

<div style="position: relative;">
  <div style="position: absolute; right: 30px; bottom: 50px;"> HOLA </div>
</div>

HOLA

De este modo, bien podríamos ubicar más de un contenido:

<div style="position: relative;">
  <div style="position: absolute; left: 30px; top: 50px;"> CONTENIDO UNO </div>
  <div style="position: absolute; right: 30px; bottom: 50px;"> CONTENIDO DOS </div>
</div>

CONTENIDO UNO

CONTENIDO DOS

En el ejemplo, dadas las ubicaciones, el segundo se superpone al primero y aparece por encima ya que esa es la forma normal en que se muestran los rectángulos; a medida que los agregamos, se van "apilando" y la propiedad z-index permite cambiar ese orden natural.

Como no los hemos definido, basta ponerles un número, y el que tenga el número más alto, se mostrará por encima sin importar la forma en que esté escrito el código; en este ejemplo, el tercero no se muestra arriba de los otros porque forzamos a que sea el segundo el que esté arriba de todo, poniéndole un valor de z-index superior:

<div style="position: relative;">
  <div style="position: absolute; left: 10px; top: 30px; z-index: 1;"> CONTENIDO UNO </div>
  <div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> CONTENIDO DOS </div>
  <div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> CONTENIDO TRES </div>
</div>

CONTENIDO UNO

CONTENIDO DOS

CONTENIDO TRES

Hasta ahí son rectángulos de colores pero el contenido puede ser cualquier cosa; por ejemplo textos y si estos textos no tienen fondos de color, también se superpondrán:

este es un texto

y este es otro

Mezclamos entonces varias propiedades y si es necesario, pueden verse algunas ideas básicas en webdesignerdepot.com.

<style>
#superponer {
  position: relative;
  text-align: center;}
#superponer h5 {
  color: #D0D9E1;
  font-family: Georgia;
  font-size: 140px;
  letter-spacing: -6px;
  margin: 0;
  opacity: .9;
  padding: 0;
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  -webkit-transform: skew(20deg);
}
#superponer h6 {
  color: #4682B4;
  font-family: Verdana;
  font-size: 60px;
  left: 120px;
  letter-spacing: 20px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 20px;
}
#superponer h6 span {
  color: #F66;
  font-family: Times New Roman;
  font-size: 100px;
  font-style: italic;
  text-shadow: 3px 3px 1px #000;
}
#superponer:hover > h6 span {
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -webkit-transform: scale(2);zoom:2;
}
</style>

<div id="superponer">
  <h5> un título </h5>
  <h6> eje <span> m </span> plo </h6>
</div>

un título

ejemplo

Social Media by Digital Art Empire
	Contiene 37 íconos de 64x64, 128x128, 256x256 y 512x512, en formato PNG.descargar