spin.js: Script para generar Imágenes de carga

spin.js es un pequeño script que permite crear esas imágenes que uno ve a menudo cuando de indica que algo se está cargando y debemos esperar.

esta es una imagen

No parecería nada del otro mundo pero hay una diferencia sustancial; no genera imagenes sino animaciones con CSS o usando el lenguaje VML en el caso que estemos usando Internet Explorer incluyendo la versión 6 si es que aún hay dinosaurios caminando por la web.

Se integra fácilmente, basta agregar el script normal o minimizado que descargamos desde la página del autor y agregarlo antes de </head> ya sea, alojándolo en un servidor propio:

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

o copiando y pegando su contenido:

<script type='text/javascript'>
//<![CDATA[
  ....... acá copiamos y pegamos el contenido del archivo .......
//]]>
</script>

Ahora, podemos usarlo de dos modos, o agregamos definiciones globales para controlar su aspecto:

<script>
  var opts = {
    lines: 15, // la cantidad de líneas
    length: 36, // el tamaño de cada línea
    width: 8, // el grosor de las líneas
    radius: 36, // el radio del círculo
    color: '#FFF', // el color en formato RGB
    speed: 1, // la velocidad
    trail: 60, // el efecto luminosidad
    shadow: false // habilitar o deshabilitar las sombras
  };
</script>

Y generamos la imagen en un DIV:

<div id="spin1"></div>
<script>new Spinner(opts).spin(document.getElementById('spin1'));</script>

O bien podemos generar imágenes individuales, estableciendo opciones diferentes:

<div id="spin2"></div>
<script>new Spinner({color:'#FF0', lines: 12}).spin(document.getElementById('spin2'));</script>

<div id="spin3"></div>
<script>
  new Spinner({color:'#77DF', lines: 15, length: 20, width: 6, radius: 20, speed: 2}).spin(document.getElementById('spin3'));
</script>

FeedEkes un plugin para jQuery que nos facilita la tarea a la hora de mostrar contenido de sitios externos a través de sus feeds; tanto de nuestro sitio como de cualquier otro..

En la página de los desarrolladores podemos descargar el archivo RAR que contiene un ejemplo completo y del que sólo necesitamos el archivo FeedEk.js que alojamos en un servidor, incluimos en la plantilla o agregamos a un elemento HTML:

<script type="text/javascript" src="URL_FeedEk.js"></script>

Luego, donde quisiéramos que se mostrase el contenido, pondríamos un DIV vacío de este modo:

<div id="divRss"></div>

Lo único que nos faltaría es ejecutar la función:

<script type="text/javascript">
$(document).ready(function(){
   $('#divRss').FeedEk({
   FeedUrl : 'URL_FEED',
   MaxCount : 3,
   ShowDesc : true,
   ShowPubDate: true
  });
});
</script>

donde tenemos una serie de opciones a elegir:
MaxCount es la cantidad de entradas a mostrar (por defecto 5)
ShowDesc permite mostrar u ocultar el contenido (por defecto true)
ShowPubDate permite mostrar u ocultar la fecha de publicación (por defecto true)

El único dato obligatorio s la URL del feed a mostrar que colocaremos en FeedUrl y que puede ser casi cualquiera; sólo es cosa de probar y ver:

http://miblog.blogspot.com/feeds/posts/default
http://miblog.com/feeds/posts/default
http://feeds2.feedburner.com/miblog
http://miblog.com/feed.php

Obviamente, el estilo con que se mostrarán puede ser personalizado. Para comenzar, pueden usarse algunas de las reglas que se inlcuyen en el archivo FeedEk.css que son bastante sencillas:

#divRss {} es el contenedor general, el DIV donde se mostrará el feed
#divRss .ItemTitle {} es un DIV con el título de cada entrada
#divRss .ItemTitle a {} es el enlace con el título de cada entrada
#divRss .ItemDate {} es un DIV con la fecha
#divRss .ItemContent {} es un DIV con el contenido

Detalles extras que dependerán del contenido pueden ser configuradas por separado:

#divRss .ItemContent p {}
#divRss .ItemContent img {}

Hace poco, Blogger Buzz anunciaba que ya estaba disponible un nuevo gadget que permite agregar un traductor en el blog pero, a mi entender, lo anunciaba de modo erróneo (o a propósito) haciendo hincapié en que funcionaba en las Vistas Dinámicas cuando, en realidad, la información debería decir que TAMBIÉN funciona en ese tipo de plantillas pero que está disponible para cualquier otra pero, ya se sabe que la gente de Blogger se enamora fácil de sus fracasos ya que las las Vistas Dinámicas son eso, un juguete que muy pocas personas utilizan.

De todos modos, allá vamos y respondo a un par de consultas generales advirtiendo desde ya que, como casi cualquier otro gadget, las posibilidades de configurarlo visualmente son escasas. De hecho, cuando lo agregamos, nos da muy pocas opciones; podemos colocarle un título y seleccionar un estilo (Vertical, Horizontal, Solo desplegable) aunque, al parecer, en una plantilla normal, esos estilos no existen y siempre se ve igual, elijamos lo que elijamos.

El gadget se agrega como widget cuyo ID es Translate:

<b:widget id='Translate1' locked='false' title='Translate' type='Translate'/>

Sólo podemos cambiar algunas cosas mediante CSS, agregando las reglas correspondientes antes de </b:skin>. Un ejemplo con un poco de todo:

#Translate1 { /* centramos todo */
  text-align: center;
}
#Translate1 select { /* cambiamos el elemento SELECT a gusto */
  background: #DDD;
  border: 2px solid #EEE;
  border-radius: 4px;
  color: #000;
  font-family: Tahoma;
  margin: 10px 0;
  padding: 2px 10px;
  width: 200px;
}
#Translate1 option { /* cambiamos la forma en que se verán las opciones */
  font-style: italic;
  padding-left: 10px;
}
#Translate1 span { /* ocultamos el texto "Traductor de Google" que es demasiado ancho y se ve cortado */
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  width: 55px;
}
#Translate1 a {
  color: transparent;
}

Soft Media Vol 1 & 2

Contiene 96 íconos de 32x32 en formato PNG. descargar

PixelUI

Contiene 77 íconos de 16x16 en formato PNG. descargar

Freecns

Contiene 218 íconos de 16x16 en formato PNG. descargar

IC Mini Social

Contiene 18 íconos de 32x32 en formato PNG. descargar

Estas son dudas comunes:

1. el blog es lento
2. Blogger no respeta la cantidad de entradas que he indicado en al Configuración
3. la cantidad de entradas es variable cuando navego hacia atrás o hacia adelante

y las respuestas son siempre las mismas, objetivas, subjetivas, de todo un poco:

• por defecto, Blogger ES LENTO porque incluye una enorme cantidad de scripts sobre los cuales nada podemos hacer excepto soportarlos
• la cantidad de entradas a mostrar por página debe ser un valor "bajo" ya que las páginas excesivamente largas suelen ser poco amigables
• las imágenes deben ser optimizadas y su tamaño original debe ser adecuado; de nada sirve re-dimensionarlas con CSS; si son grandes, seguirá siendo grandes aunque las veamos pequeñas
• todo servicio externo implica una demora en la carga, que sea un script de una línea no lo hace más liviano
• audio, videos, Flash, cada archivo multimedia suma y suma de modo sustancial
• muchos archivos con scripts cortos tardan en cargarse bastante más que uno solo más largo
• todo lo que está en la plantilla se carga más rápido que si se aloja en un servidor externo
• la longitud de la plantilla no es un detalle a tener en cuenta, puede tener pocas líneas y generar páginas pesadas
• si se usa jSon, no hay que abusar del valor establecido en &max-results, ese número indica cuántas entradas se leerán del feed por lo tanto, pueden ser volúmenes significativos; es usual ver que se coloca 9999 porque se cree que con eso se cargaran todas pero eso es falso ya que el máximo es 500 sin importar el valor que coloquemos y cargar y procesar 500 entradas de un feed puede colapsar el navegador hasta tal punto que este nos muestre una ventana de advertencia

Si bien la lentitud o agilidad de un sitio depende de muchas cosas incluyendo nuestra conexión, que a veces veamos que el home muestra cantidades de entradas diferentes a las definidas por nosotros se debe a una limitación establecida por el mismo Blogger que, hace ya bastante tiempo, ha decido que si la página a mostrar excede determinado tamaño, se recortará SI O SI y no hay apelación posible.

Pero, aún sabiendo eso, muchas veces se argumenta que: "Tengo las entradas resumidas, ¿cómo puede ocurrir eso?"

La respuesta es otra pregunta ¿el resumen es realmente un resumen?

Para poder contestar eso hay que entender que una plantilla no es una página web, es una serie de instrucciones que ejecuta el servidor (Blogger) y que la ejecución de esas instrucciones es la parte rápida del asunto. Ese servidor crea la página, la envía al navegador y recién allí comienza el asunto.

Cuando usamos la opción MORE, el resumen es REAL e instantáneo, esa instrucción es interpretada por el servidor que no envía la entrada completa sino sólo una parte de ella por lo tanto, el navegador recibe una página más corta y obviamente, tarda menos en mostrarla.

Por el contrario, si el resumen es generado con JavaScript (que es lo que usamos muchos de nosotros), el servidor envía las entradas completas y el navegador ejecuta el script, mostrando sólo una parte de ellas. Que no las veamos completas NO significa que no se hayan cargado completas, como mucho, dependiendo del script que usemos, habremos evitado que se carguen imágenes u otros detalles pero el volumen seguirá siendo el mismo y ese es el volumen el que Blogger puede detectar como "excesivo" y mostrar entonces, una cantidad menor de entradas que las que suponíamos.

¿Acaso estos dos textos son iguales? Uno está a la derecha, otro a la izquierda pero, parecen tener el mismo tamaño y estar separados a la misma distancia en todos sus lados:

un texto

un texto

No es así, aunque ambos tienen el mismo ancho (200 pixeles) y el mismo tipo de fuente, uno tiene un margen y el otro tiene un padding.

Y otra vez volvemos a eso que es fundamental entender y que provoca muchas preguntas y genera dudas cuando queremos acomodar las cosas en una página web.

Si bien, aparentemente, usar margin y usar padding es lo mismo: NO ES LO MISMO y es fácil de ver apenas le agregamos un borde:

un texto

un texto

o un color de fondo:

un texto

un texto

Cada etiqueta es un rectángulo y esos rectángulos se pueden separar unos de otros utilizando la propiedad margin. El margen a la izquierda o a la dercha es universal, se aplica a todas las etiquetas; el margen superior o inferior sólo es efectivo cuando se trata de etiquetas de tipo bloque (DIV, P, etc) o aquellas que tienen propiedades que las transforman en bloques (display, position, etc).

El padding no separa un rectángulo del otro sino que separa el contenido de ese rectángulo:

• el margen es externo; el padding es interno.
• el margen no cambia el tamaño del elemento, el padding si.

No hay una regla exclusiva para todos los casos posibles pero, en general, si un elemento no tiene bordes ni fondo, basta definir una cualquiera de esas propiedades y no es necesario agregar ambas. Esto, es algo bastante común y confunde mucho ya que se generan espacios vacíos que se van sumando. Aunque no es una regla de oro, siempre he pensado que lo mejor es eliminar cuanto margen y padding exista y luego, agregarlos uno por uno, tratando de controlar esas separaciones y de ese modo, evitar que eso que creemos que tiene cierto tamaño, se vea cortado, apretujado o demasiado separado sin que uno sepa bien por qué.

Incluso, una etiqueta vacía (sin contenido) puede generar espacios, separaciones que no sabemos de dónde salen o por qué se producen ¿por qué hay un espacio acá abajo?

Simplemente porque esas etiquetas vacías, sin contenido, tienen un margen o padding. Otra vez, basta ponerles un borde o un fondo para "verlas":

¿Hay una forma sencilla de "ver" el tamaño real de algo? Si no queremos agregarle un color de fondo se peude utilizar la propiedad outline que agregará un borde que no ocupará espacio y por lo tanto, el elemento tendrá el tamaño real y podremos ver el lugar que realmente ocupa dentro de la página.

Las posibilidades del CSS3 sólo están comenzando a ser aplicadas y de alguna manera, son infinitas. Las opciones son muchísimas y en general, bastante simples de aplicar. En este caso, Gem@ nos enseña cómo realizar una serie de efectos originales creados por codrops. Acá, sólo voy a intentar reproducir uno de ellos pero el resto, se pueden ver en el demo online o descargar directamente a la PC.

Todos ellos tienen una estructura similar; dentro de un DIV con cierta clase CSS (view), agregamos una imagen cuyo tamaño define el resto de las propiedades y luego, otro DIV que permanecerá oculto (mask) y cuyo contenido puede ser variable.

<div class="view">
  <img src="URL_IMAGEN" />
  <div class="mask">
    <h4> el título </h4>
    <p> el trexto </p>
    <a href="#" class="info"> LEER MAS </a>
</div>
</div>

Obviamente, el CSS es lo que importa y es ... largo porque, lamentablemente, hay que repetir muchas propiedades ya que los navegadores, aún n ose han decidido a unificarlas.

<style>
.view { /* el DIV principal al le damos la misma dimensión que a la imagen a usar, en este caso, 300x188 */
    border: 10px solid #FFF;
    cursor: pointer;
    height: 188px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 300px;
  }
  .view img { /* la imagen */
    display: block;
    position: relative;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .view:hover img { /* se "anima cuando ponesmos el cursor encima */
    -moz-transform: rotate(720deg) scale(0);
    -webkit-transform: rotate(720deg) scale(0);
    -o-transform: rotate(720deg) scale(0);
    -ms-transform: rotate(720deg) scale(0);
    transform: rotate(720deg) scale(0);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .view .mask { /* el DIV oculto con los textos */
    background-color: #ABC;
    height: 188px;
    left: 0;
    position: absolute;
    overflow: hidden;
    top: 0;
    width: 300px;
    -moz-transform: rotate(0deg) scale(1);
    -webkit-transform: rotate(0deg) scale(1);
    -o-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .view:hover .mask { /* se muestra el DIV */
    -moz-transform: translateY(0px) rotate(0deg);
    -webkit-transform: translateY(0px) rotate(0deg);
    -o-transform: translateY(0px) rotate(0deg);
    -ms-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
    -moz-transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .view h4 { /* el título que permanece oculto */
    background-color: rgba(255, 255, 255, 0.5);
    color: #FFF;
    text-align: center;
    position: relative;
    font-family: Georgia;
    font-size: 20px;
    margin: 20px 0 0 0;
    padding: 5px 0;
    text-shadow: 0 3px 1px #000;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view:hover h4 { /* se muestra el título */
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    transition-delay: 0.7s;
  }
  .view p { /* el texto que permanece oculto */
    color: #000;
    font-family: Tahoma;
    font-size: 13px;
    margin: 0;
    padding: 15px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 1px #FFF;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view:hover p { /* se muestra el texto */
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }
  .view a.info { /* el enlace que permanece oculto */
    background-color: #456;
    border-radius: 5px;
    box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;
    color: #FFF;
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view a.info:hover {
    box-shadow: 0 0 5px #FFF;
  }
  .view:hover a.info { /* se muestra el enlace */
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
</style>

estilos con estilo

Vivamus ultrices enim ac ante commodo et interdum odio pulvinar! Duis vel nisl at sapien luctus tincidunt. Mauris in erat risus, id euismod felis.

LEER MAS

Si tenemos un menú personalizado donde se muestran enlaces a alguna entradas en particular o a alguna página estática pero no estamos usando el gadget de Páginas de Blogger ¿es posible resaltar el elemento actual de menú? ¿mostrar ese enlace con alguna característica gráfica especial?
Eso es lo que se ve en muchos menús donde se establece una clase CSS para diferenciar ese item en particular, el sistema detecta la página donde estamos y automáticamente, agrega esa clase; es simple pero, no funciona en Blogger porque el sistema no nos ofrece esa posibilidad salvo, como dije antes, en el gadget de Páginas.

Supongamos que tenemos un menú de este tipo, con enlaces a entradas y páginas estáticas entremezcladas:

<ul div id="mimenu">
<li><a href="http://miblog.com">inicio</a></li>
<li><a href="http://miblog.com/2010/01/ejemplo.html" class="ejemplo">ejemplo</a></li>
<li><a href="http://miblog.com/p/otra-pagina.html">otra pagina</a></li>
<li><a href="http://miblog.com/2012/06/final.html">final</a></li>
</ul>

• inicio
• ejemplo
• otra pagina
• final

Si tenemos ese tipo de menú común y corriente, con enlaces personales, para conseguir el mismo efecto deberíamos recurrir a JavaScript y el método más cómodo, seria utilizar jQuery ya que nos permite usar selectores sencillos.

var url = document.URL;

nos diría en que página estamos y algo como esto:

$('#mimenu a[href="'+url+'"]').addClass('actual');

nos permitiría agregar la clase llamada actual para diferenciar el enlace correspondiente.

• inicio
• ejemplo
• otra pagina
• final

Esta sería una simulación pero, la idea sería la misma, haciendo click acá, se resaltaría el item del menú de este mismo ejemplo.

Bastaría entonces, agregar el script debajo del menú en si mismo:

<script>
//<![CDATA[
  var url = document.URL;
  $('#mimenu li a[href="'+url+'"]').addClass('actual');
//]]>
</script>

Timeago es un plugin para jQuery que pemite transfrormar una fecha "normal" en una fecha relativa, es decir, calcular cuanto tiempo ha pasado desde ese momento hasta ahora.

Si bien es algo que también puede hacerse sin librerías, este plugin posee algunas características que lo hacen especial ya que soporta casi cualquier tipo de formato de fecha por lo que se adapta bastante bien a cualquier sistema y para quien quiera ser "cool", utiliza una estructura de microformatos que también interpreta las nuevas etiquetas de HTML5 tales como <time> </time>

Para usarlo, descargamos el script, lo alojamos en un servidor y lo agregamos al head, debajo de la librería jQuery:

<script src="URL_jquery.timeago.js" type="text/javascript"></script>

Si no queremos usar archivos externos, copiamos y pegamos su contenido:

<script type='text/javascript'>
//<![CDATA[
  ...... acá pegamos el contenido del script jquery.timeago.js .......
//]]>
</script>

El plugin está en inglés pero, podemos cambiarlo, ya sea manualmente, buscando las variables con los textos o bien descargando cualquiera de las extensiones que ya están predefinidas y abarcan un sinnúmero de idiomas. En este caso, simplemente copiamos y pegamos ese código debajo de lo anterior; este sería el español:

<script type='text/javascript'>
//<![CDATA[
  ...... acá pegamos el contenido del script jquery.timeago.js .......
  ...... acá pegamos el contenido del script jquery.timeago.es.js .......
//]]>
</script>

Por último, ejecutamos la función indicándole la etiqueta y/o clase que debe analizar una vez que la página esté cargada:

<script type='text/javascript'>
  $(document).ready(function(){
    $('abbr.published').timeago();
  });
</script>

En este caso, utilizo una etiqueta ABBR con la clase published ya que así es como Blogger muestra ese dato por defecto:

<a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'>
  <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
    <data:post.timestamp/>
  </abbr>
</a>

Claro que, si la plantilla está muy personalizada, es posible que ese código sea distinto; sea el que sea, debe buscarse cualquiera de las variables que usa Blogger para mostrar la fecha de las entradas: data:post.timestamp o data:post.timestampISO8601 y re-armar la etiqueta; por ejemplo, de este otro modo:

<span class='timeago' expr:title='data:post.timestampISO8601'><data:post.timestamp/></span>

en cuyo caso, el script se llamaría de este modo:

$('span.timeago').timeago();

¿Y la fecha de los comentarios?

Sería similar, bastaría buscar el dato de Blogger: data:comment.timestamp y modificarlo pero ... en este momento, conviven muchos tipos de códigos para comentarios lo que hace engorroso enumerar cada uno de ellos así que sólo mostraré la forma de hacerlo con los nuevos comentarios anidados que es el método que podría causar más problemas ya que todo es generado por un script interno del sistema.

En este caso, lo que el script de Blogger escribirá será algo así:

<span class="datetime secondary-text">
  <a href="URL_COMENTARIO" rel="nofollow"> LA FECHA </a>
</span>

y no tenemos forma de modificar ese código, lo que haremos es modificar una línea del script para que lea ese dato. Buscamos:

var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");

y lo cambiamos por:

var iso8601 =  $(elem).text()

y llamaremos a la función de este modo:

$(document).ready(function(){
  $('span.datetime a').timeago();
});

Pero, para que esto funcione correctamente, debemos asegurarnos que el formato de la fecha de los comentarios sea adecuada así que en Configuración | Comentarios | Formato de hora de los comentarios, indicamos esto:

Cuanto más automatizamos una tarea, más cuidado tenemos que tener para establecer límites precisos ya que los navegadores no son inteligentes, no tienen sentido común ni ninguna otra característica humana; simplemente hacen lo que nosotros les indicamos que hagan.

leer artículo actualizado

Los rumores dicen que Blogger cambiará de nombre por Service unavailable pero sólo son rumores, nada está confirmado ...

Algunos usuarios están reportando inconvenientes similares y Blogger está al tanto de este tema.
Por de pronto te sugiero pruebes borrar cookies y temporales de internet, o utilizar otro navegador. También recargar la página puede servir.
Si el problema persiste, por favor contanos.

No vale la pena hacerlo. Sólo hay que soportar digo ... esperar.

La librería jQuery posee una serie de funciones simples que facilitan la forma en que podemos acceder a los datos de un feed en forma Json. La función getJSON es uno de esos métodos simplificados donde, en principio, bastaría colocar la dirección URL a leer.

$.getJSON('URL_A_LEER', function(variable) {
  // aca hacemos algo con los datos 
});

Usando esa función, podríamos leer cierta información que nos da Facebook, por ejemplo, algunos datos relativos a una página web o a las entradas de Blogger tales como la cantidad de Me Gusta que tiene, las veces que fue compartida, etc.

Esos datos son accesibles en esta dirección:

http://api.ak.facebook.com/restserver.php?v=1.0&method=links.getStats&urls=URL_PAGINA&format=json

así que podemos crear un script que la lea y luego, interpretar lso datos para mostrarlos en un DIV cualquiera que agregamos ahí donde quisiéramos verlo:

<div id="FBejemplo"></div>

y lluego, debajo de eso, podríamos poner el script para leer los datos de la página donde nos encontremos:

<script>
  var jsonUrl = "http://api.ak.facebook.com/restserver.php?v=1.0&method=links.getStats&urls="+location.href+"&format=json&callback=?";
  $.getJSON(jsonUrl, function(data) {
    // armamos la salida de esos datos
    var salida = "Me Gusta: " + data[0].like_count); // la cantidad de Me Gusta de esa página
    salida+ = "Comentarios: " + data[0].comment_count); // la cantidad de comentarios de Facebook
    salida+ = "Compartido: " + data[0].share_count); // la cantidad de veces que fue compartida
    // y la escribimos
    $("#FBejemplo").html(salida);
  });     
</script>

Hay otros datos accesibles tales como data[0].click_count, data[0].commentsbox_count y un dato general que suma todas las interacciones: data[0].total_count

No hace falta que los datos sean de la página que estamos viendo, podrían ser de cualquier otra, por ejemplo, acá se muestra lo que devuelve Facebook cuando coloco la URL del home:

Una serie de ejemplos de botones animados con CSS3 publicados por codrops. Todos ellos hacen un uso intensivo de las posibilidades que nos dan las propiedades CSS3 pero me concentro en el el ejemplo numero cuatro que es el que más me ha llamado la atención.

El botón es un enlace simple con una clase determinada pero, su contenido está formado por una serie de etiquetas SPAN:

<a href="#" class="a-btn">
  <span class="a-btn-text">un botón</span>
  <span class="a-btn-slide-text">animado</span>
  <span class="a-btn-icon-right">
    <span></span>
  </span>
</a>

Ese cúmulo de etiquetas internas es lo que nos permite crear la animación ya que podemos establecer propiedades diferentes para cada una de ellas.

• la clase a-btn-text será el texto visible
• la clase a-btn-slide-text el texto oculto que se mostrará al colocar el cursor encima del enlace
• la clase a-btn-icon-right será el contenedor de la imagen derecha

un botónanimado
varios ejemplosflexibles

Y ahora, las propiedades de estilo:

<style>

  /* el enlace es el contenedor */
  .a-btn {
    background:#CDE;
    background:-moz-linear-gradient(#CDE, #678);
    background:-webkit-linear-gradient(#CDE, #678);
    background:-o-linear-gradient(#CDE, #678);
    background:-ms-linear-gradient(#CDE, #678);
    background:-linear-gradient(#CDE, #678);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#CDE', endColorstr='#678',GradientType=0 );
    border:1px solid #89A;
    border-radius:20px;
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    display:inline-block;
    height:40px;
    line-height: 40px;
    margin:10px 0px;
    padding: 0 70px 0 20px; /* esto dependerá del tamaño de la imagen */
    position:relative;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    -ms-transition:all 0.3s linear;
    transition:all 0.3s linear;
  }

  /* el texto visible */
  .a-btn-text {
    color:#456;
    display:block;
    font-size:20px;
    text-shadow:0 1px 1px #FFF;
    white-space:nowrap;
    -moz-transition:all 0.2s linear;
    -webkit-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    -ms-transition:all 0.2s linear;
    transition:all 0.2s linear;
  }

  /* el texto oculto */
  .a-btn-slide-text {
    background:#456;
    color:#FFF;
    font-size:20px;
    font-family: Georgia;
    height:100%;
    line-height:40px;
    overflow:hidden;
    position:absolute;
    right:52px;
    text-align:left;
    text-indent:10px;
    text-shadow:1px 1px 1px #000;
    top:0px;
    white-space:nowrap;
    width:0;
    -moz-transition:width 0.3s linear;
    -webkit-transition:width 0.3s linear;
    -o-transition:width 0.3s linear;
    -ms-transition:width 0.3s linear;
    transition:width 0.3s linear;
  }

  /* el contenedor de la imagen derecha */
  .a-btn-icon-right {
    border-left:1px solid #89A;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    width:52px;
  }
  /* y la imagen */
  .a-btn-icon-right span {
    background:transparent url(arrow_right.png) no-repeat 50% 55%;
    height:38px;
    left:50%;
    margin:-20px 0px 0px -20px;
    opacity:0.7;
    position:absolute;
    top:50%;
    width:38px;
    -moz-transition:all 0.3s linear;
    -webkit-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    -ms-transition:all 0.3s linear;
    transition:all 0.3s linear;
  }

  /* los efectos hover */
  .a-btn:hover {
    padding-right:180px;
  }
  .a-btn:hover .a-btn-text {
    color:#000;
    text-shadow:0px 1px 1px #000;
  }
  .a-btn:hover .a-btn-slide-text {
    width:100px;
  }
  .a-btn:hover .a-btn-icon-right span {
    opacity:1;
  }

</style>

El contenedor es bastante flexible y, llegado el caso, si los textos son largos, lo que debemos hacer es aumentar los valores de estas dos reglas:

.a-btn:hover {} 
.a-btn:hover .a-btn-slide-text {}

todo el botón ...es un enlace

Cada día hay más herramientas online que nos permiten acceder a información de manera sencilla o compartirla de diversos modos. No todas nos sirven, no todas duran en el tiempo, algunas aparecen publicitadas en muchos sitios y uno quiere probarlas y son "privadas" o prometen que un futuro harán algo pero, por el momento, son inaccesibles para los simples mortales. algunos sitios de "noticias" se especializan en eso, en promover lo inexistente pero ... algo siempre queda.

En este caso, son sitios que vale la pena mirar y ver si pueden ser útiles.

CSS3 Click chart es una página donde podemos encontrar referencias rápidas a distintas propiedades con algunos ejemplos sencillos, advertencias y enlaces a artículos que amplían la información de cada tema.

Html 5 please es similar aunque la información que muestra es mucho más detallada.

Un poco más amplio es el servicio que ofrece DocHub tanto para CSS como para HTML, JavaScript, jQuery y otros lenguajes.

¿Quien probar si cierto script funciona y editarlo online? Puede usarse la herramienta de debug de w3schools.com ingresando a través de cualquier enlace Try it yourself de sus tutoriales; funcionan tanto con Javascript "clásico como con jQuery.

SnipSave permite crear, editar y guardar trozos de códigos para poder acceder a ellos desde cualquier parte.

Mozilla Thimble es una aplicación de Mozilla que nos permite escribir código HTML e ir viendo la previsualización de modo instantáneo en al misma pantalla. Lo interesante es que incluye la opción de publicar el resultado y compartirlo. Aunque aún está en desarrollo, el resultado es más que aceptable.

¿Más?

• HTML Instant
• codepad
• ideone
• cssdesk