Ventanas flotantes sencillas con jQuery

Una forma muy simple de usar la librería jQuery para generar un caja flotante que se desplaza a medida que hacemos scroll sobre la página.

El HTML conviene ponerlo antes de </body> porque lo vamos a posicionar de manera absoluta así que debe estar fuera de cualquier otro contenedor que tenga la propiedad position:relative y dentro de ese DIV agregaremos cualquier cosa, en este caso, enlaces con íconos:

<div id="caja_flotante">
  <div id="cont_caja_flotante">
    <a href="#"><img src="URL_IMAGEN_1" /></a>
    <a href="#"><img src="URL_IMAGEN_2" /></a>
    <a href="#"><img src="URL_IMAGEN_3" /></a>
  </div>
</div>

Y las reglas de estilo que ponemos antes de &/head>:

<style>
#caja_flotante{
  left: 0; /* o le damos un valor para separarlo del borde izquierdo de la ventana */
  position: absolute;
  top: 0;  /* o le damos un valor para separarlo del borde superior de la ventana */
  width: ANCHOpx; /* definimos su ancho */
  /* cualquier otra propiedad gráfica como background, border, etc */
}
</style>

Y por debajo de eso, el script:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  var posicion = $("#caja_flotante").offset();
  var margenSuperior = 15;
  $(window).scroll(function() {
    if ($(window).scrollTop() > posicion.top) {
      $("#caja_flotante").stop().animate({
        marginTop: $(window).scrollTop() - posicion.top + margenSuperior
      });
    } else {
      $("#caja_flotante").stop().animate({
        marginTop: 0
      });
    };
  });
});
//]]>
</script>

El ejemplo online puede verse en esta página donde, en lugar de posicionarlo a la izquierda de la ventana del navegador, lo he ubicado a la izquierda del DIV contenedor del blog que en este caso es #outer-wrapper y como sé que mide 600 pixeles de ancho, la imagen se coloca en el centro de la pantalla y luego, se la desplaza hacia un lado, un poco más que la mitad del ancho de ese contenedor:

<style>
#caja_flotante{
  left: 50%;
  margin-left: -370px;
  position: absolute;
  top: 50px; 
  width: 64px;
}
</style>

REFERENCIAS:webintenta.com

Social stamps
	Contiene 108 íconos de 16x16, 32x32, 64x64 y 128x128, en formato PNG. descargar

Social media icons by simpo-jo
	Contiene 16 íconos de 240x284, en formato PNG. descargar

Vintage icon set for bloggers
	Contiene 35 íconos de 128x128 y 256x256, en formato PNG. descargar

Otra más.

Con el nuevo sistema de comentarios, cuando uno entra a una página individual de cualquier blog que lo utilice, el navegador nos posiciona al final de la pagina, un poco más arriba del formulario en lugar de hacerlo como lo haría normalmente, al principio de ella.

En realidad no es así, no pasa en todos los navegadores, es algo que ocurre en IE, Firefox y Opera es decir, en todos ... menos en Chrome ... ¿casualidad?

Cuando buscamos información en los Grupos de Ayuda de Blogger, vemos que son muchos se quejan de lo mismo y las respuestas de los moderadores son "hemos comunicado el problema a los ingenieros" o "usen Chrome que ahí anda bien".

Son ese tipo de respuestas que dan ganas de patearlos desde acá a la luna sin etapas; de la segunda, NI HABLAR, yo quiero usar el navegador que se me de la gana porque se me da la gana y sin tener que dar explicaciones a nadie por mis elecciones.

La primera respuesta llama la atención: "informaremos del problema" ¿Quiere decir que los mentados ingenieros nunca miraron si su creación funciona en los distintos navegadores tal como hace cualquiera de nosotros que tenga dos dedos de frente? ¿Será posible que sean tan negligentes? Es una pregunta retórica, no hace falta contestarla.

De todos modos, hay una solución muy parcial. Digo que es parcial porque no soluciona el problema en Internet Explorer aunque parece hacerlo en Firefox y en Opera.

Para conseguir esto, que espero que sólo sea temporal, tenemos que hacer dos cosas sencillas. Primero, buscamos el script de los comentarios anidados y allí, modificamos el atributo defer tal como indica Oloman en una de sus entradas más recientes. En lugar de esto:

<script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>

ponemos esto:

<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

Ahora, agregamos algo así antes de </head>

<style>
#comments {
    left: -10000px;
    position: fixed;
    top: -10000px;
}
</style>
<script>
//<![CDATA[
window.onload = (function(){
  document.getElementById("comments").style.position = "static";
})
//]]>
</script>

La regla de estilo sacará el DIV contenedor de los comentarios fuera de la ventana del navegador así que no lo veremos y el script, se ejecutará cuando se haya cargado la página, restaurando la posición de ese DIV y haciéndolo visible otra vez; de ese modo, se evitará que el script interno de Blogger que escribe ese contenido, afecte al resto el sitio.

Si se usa jQuery, en lugar de document.getElementById() podría ponerse algo así:

$("#comments").css({"position":"static"});

es indistinto, ambas cosas hacen lo mismo.

No hay garantías de que esto funcione en todos los blogs pero, se puede probar y ver.

¿No cansa este manoseo que hace Blogger de sus usuarios? Si Google quiere terminar con el servicio, que lo haga de una buena vez y listo; si quiere que todos nos mudemos a su red social y nos pasemos allí las horas mientras hacemos clicks en sus avisos y los aplaudimos: que lo digan; sólo pido que nos eviten esta tortura del hacer y rehacer cada vez que a alguno de sus cráneos desarrolladores se le ocurre que es mejor toquetear el sistema en lugar de ir al jugar un rato al Pacman y de esa manera, aparentar que "labura".

Durante la tarde, Gem@ me había comentado que veía algo raro, los avatares de los comentarios estaban mal y había otros detalles extraños. Me fijé, no vi nada y pensé que era uno de esos errores temporales a los que nos tiene acostumbrados Blogger pero ... hace un rato, entro a contestar comentarios y oh surprise, los comentarios se ven ... digamos mal para no ser exagerado; avatares desproporcionados o recortados, letras pequeñas, todos los detalles gráficos perdidos en la nada.

¿Qué ocurre?

La respuesta es simple, en el nuevo sistema de comentarios anidados, el CSS se encontraba en la misma plantilla, dentro de:

<b:includable id='threaded_comment_css'>

Lo había incluido Blogger en su momento pero ahora, ha desaparecido.

No lo ha hecho en todos los blogs, en mi cuenta, algunos aún sigue estando allí pero, tengo la sospecha que comenzará a ser quitado de todos porque se ha incluido dentro de uno de los archivos CSS que Blogger carga de modo automático. Si miramos el contenido de ese archivo, veremos las reglas de estilo originales.

¿Qué efecto tiene esto?

En los blogs que utilicen el nuevo sistema y hayan modificado esas reglas de estilo lo más probable es que deban comenzar de nuevo y agregar las reglas a la plantilla manualmente. Si aún están allí, les recomendaría hacer una copia de esa parte antes que se pierda; si ya no están ... habrá que comenzar de nuevo y agregar las reglas para sobrescribir las de Blogger. Para esto, lo más seguro es colocarlas entre etiquetas <style> </style> pero poner eso justo después de <body>

En los blogs que NO usan el nuevo sistema (como este) la solución puede ser más sencilla; el problema surge porque todas esas reglas de estilo afectan al DIV cuya clase es comments; si no usamos reglas indicando esa clase sino reglas usando el ID que se llama igual, basta ir a la plantilla y buscar esto:

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>

y allí, solamente cambiamos el atributo class poniéndole otro nombre (insultos a Blogger son aceptados) o lo eliminamos:

<b:includable id='comments' var='post'>
  <div class='miscomentarios' id='comments'>

Con eso, estaremos a salvo un rato más, hasta que a alguien se le ocurra otra idea excitante ...

ACTUALIZACIÓN:

Sugeriría que la clase comments, no sólo se cambie en los blogs que no usan el nuevo sistema sino también en los que lo usan; de ese modo, el CSS será más corto y ya no sufrirá cambios cada vez que a Blogger se le de la gana modificarlo.

Para eso, basta buscar:

<b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments'>

y darle otro nombre:

<b:includable id='threaded_comments' var='post'>
  <div class='OTROScomments' id='comments'>

de ahí en más, busquen las referencias a las reglas:

.comments

y cámbienlas por

.OTROScomments

o el nombre que le hayan dado a esa nueva clase.

Respondiendo a Chary Cirujano y otros visitantes que preguntan cosas parecidas, esta es una de las formas de modificar la numeración de los comentarios para que las "respuestas" anidadas se ven un poco distintas o se numeren de otro modo.

La primera opción es la más simple: hacer que el contador de respuestas tenga un estilo diferente, por ejemplo, un color o una fuente; para eso, agregaríamos esta regla:

.comments .comment-replies .comment-block:before {
  color: #08C;
  font-size: 20px;
}

dependiendo del orden en que tengamos las reglas, puede requerir el agregado de la palabra !important; por ejemplo:

color: #08C !important;

La segunda opción lo que hará es resetear el contador de respuestas de tal modo que los comentarios tendrán numeraciones distintas:

.comments .comment-replies {
  counter-reset: contadorcomentarios;
}
.comments .comment-replies .comment-block:before {
  color: #08C;
  font-size: 20px;
}

La tercera opción combina ambas cosas, acá se agrega un segundo contador y se muestran ambos:

.comments .comment-replies {
  counter-reset: contador_reply;
}
.comments .comment-replies .comment-block:before {
    color: #08C;
    font-size: 20px;
    content: counter(contadorcomentarios, decimal) " [" counter(contador_reply, decimal) "]";
    counter-increment: contador_reply;
}

En este último caso, lo que hacemos es armar la salida visible, uniendo los datos y cualquier otro carácter.

Si usamos los comentarios de nuevo estilo, otra vez vamos a tener que cambiar el script que agrega los emoticones ya que el viejo sistema, no funcionará (las viejas entradas: 1 | 2 | 3)

El problema surge porque Blogger añade los comentarios usando JavaScript así que ahora, debemos "esperar que sean escriots" y recién luego, analizar el texto y cambiar las imágenes.

Desplegamos los artilugios y buscamos el includable cuyo ID es threaded_comments y veremos estas líneas:

<div id='comment-holder'>
  <data:post.commentHtml/>
</div>

donde eso en color son los comentarios en si mismo; allí es donde interceptamos la página y agregamos la llamada al script:

<div id='comment-holder'>
  <data:post.commentHtml/>
  <script type='text/javascript'>NEWemoticonComentario();</script>
</div>

Ahora, deberíamos agregar el script antes de </head> y allí, pondré dos funciones, la primera, será la lista de los emoticones y es muy similar a lo que ya usábamos; la segunda es la que hará los cambios:

<script type='text/javascript'>
//<![CDATA[

// llega con el texto del comentario y lo devuelve modificado
function DRAWemo(cualTexto){
  cualTexto = cualTexto.replace(/:\)/g,'<img width="15" height="15" src="URL_imagen" />');
  // ....... sigo agregando la lista
  // y termino así:
  return cualTexto;
}

// busca los textos de los comentarios
function NEWemoticonComentario() {
  // vamos a cambiar aprte del contenido del DIV cuyo ID es comment-holder
  var  c = document.getElementById("comment-holder");
  if(c!=null) {
    // si existe, creamos una lista con todas las etiquetas BLOCKQUOTE que es donde estan los textos
    var listacoms = c.getElementsByTagName("blockquote");
    if(listacoms.length>0){
      // si hay comentario, lo leemos uno por uno
      for(var i=0; i<listacoms.length; ++i) {
        // leemos el contenido del comentario en formato HTML
        comlTexto = listacoms[i].innerHTML;
        // y lo cambiamos     
        listacoms[i].innerHTML = DRAWemo(comlTexto);
      }
    }
  }
}

//]]>
</script>

Si se usa jQuery, la segunda creo que podría simplificarse de este modo:

function NEWemoticonComentario() {
  $("blockquote.comment-content").each(function(index) {
    var nuevoTexto = DRAWemo($(this).html());
    $(this).html(nuevoTexto);
  });
}

Textify es una idea extraña pero divertida; convierte cualquier imagen que arrastramos o subimos, en otra, donde sólo se utilizan caracteres de texto.

El servicio es realmente rápido y posee un panel con una serie de opciones que podemos elegir e ir viendo el resultado para, finalmente, poder descargar neustra obra de arte en formato PNG.

REFERENCIAS:webappers.com

Seguimos con los comentarios anidados y vamos a establecer las reglas del texto del comentario en si mismo:

.comments .comments-content .comment-content {
  color: #666;
  font-family: Trebuchet MS;
  font-size: 13px;
  line-height: 1.3;
  margin: 0;
  padding: 15px 5px 10px;
}

y los enlaces Responder y Suprimir

.comments .comment .comment-actions a {
  background-color: #FFF;
  border-radius: 8px;
  box-shadow: 0 0 2px #000 inset;
  color: #888;
  float: right;
  font-family: Tahoma;
  font-size: 11px;
  margin: 0 2px;
  opacity: .7;
  padding: 1px 10px 3px;
  text-decoration: none;
  text-transform: lowercase;
}
.comments .comment .comment-actions a:hover {
  opacity: 1;
}

Y los comentarios anidados los separamos un poco hacia la izquierda y les quitamos la secuencia de color par/impar:

.comments .comments-content .comment-replies {
  clear: both;
  margin: 15px 0 0 25px;
}
.comments .comments-content .comment-thread ol li ol li {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

Debajo de todo eso, está el enlace "Responder" y nos queda un enlace que dice "Respuestas" que despliega y contrae las respuestas si es que las hay:

.comments .continue {
  display:inline-block;
}
.comments .continue a {
  background-color: #FFF;
  border-radius: 8px;
  box-shadow: 0 0 2px #000 inset;
  color: #888;
  font-family: Tahoma;
  font-size: 11px;
  margin: 0 2px;
  opacity: .7;
  padding: 1px 10px 3px;
  text-decoration: none;
  text-transform: lowercase;
}
.comments .continue a:hover {
  opacity: 1;
}
.comments .thread-toggle {
  background-color: #FFF;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 0 2px #000 inset;
  cursor:pointer
  display: inline-block;
  margin: 0 2px;
  opacity: 0.7;
  padding: 1px 10px 3px;
}
.comments .thread-toggle:hover {opacity: 1;}
.comments .thread-toggle a {
  color: #888;
  font-family: Tahoma;
  font-size: 11px;
  text-decoration: none;
  text-transform: lowercase;
}
.comments .comments-content .comment-thread:empty {
  display:none;
}

Dejamos las flechitas que usa Blogger:

.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 7px;
  width: 10px;
}
.comments .thread-expanded .thread-arrow {
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat 0 0;
}
.comments .thread-collapsed .thread-arrow {
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat 0 0;
}

Lo único que nos faltaría es el formulario de comentarios sobre el que mucho no podemos hacer, solo trataré de centrarlos. Hay dos tipos básicos:

.comment-replybox-thread  { /* el que está debajo de los comentarios */
  padding: 10px 0 0 20px;
}
.comments .comment-replybox-single { /* el que se muestra dentro de los replies */
  padding: 5px 0 0 0px;
}

Un detale extra, el enlace "Carar más ..." que se muestra al final cuando hay demasiados o no se han terminado de cargar:

.comments .comments-content .loadmore {
  background-color: #F0F0F0;
  border-radius: 16px;
  box-shadow: 0 0 10px #888 inset;
  font-family: Tahoma;
  height: 32px;
  line-height: 32px;
  margin: 20px auto;
  text-align: center;
  text-transform: lowercase;
  width: 80%;
}
.comments .comments-content .loadmore a {
  color: #888;
  font-size: 20px;
}
.comments .comments-content .loadmore:hover a {
  color: #000;
}
.comments .comments-content .loadmore.loaded {
  opacity: 0;
  overflow: hidden;
}

Aunque quedan cosas sin resolver con reglas de estilo que no tengo idea qué uso tendrán ya que hacen referencia a clases que no existen o carecen de contenido:

.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}

¿Y que pasa si quito todo el CSS de los nuevos comentarios?

No es que lo recomiende pero, sin duda, si quiero personalizar esa parte del blog, prefiero empezar desde cero antes que tratar de modificar las propiedades existentes ya que los desarrolladores de Google suelen ser poco eficientes a la hora de simplificar códigos y no me gusta andar emparchando cosas.

En estos casos, siempre hago lo mismo, olvidarme de lo que está y verlo al desnudo, sin propiedades, quitando márgenes, flotaciones, paddings, bordes y cualquier otra detalle para poder tener una idea básica de cómo están armadas la etiquetas que no son otra cosa que rectangulitos a los que luego podré manipular (o no).

Como no soy suicida, lo haré en un blog auxiliar.

Ni siquiera debo borrar cosas, busco:

<b:include name='threaded_comment_css'/>

y "lo comento" para que no se ejecute:

<!-- <b:include name='threaded_comment_css'/> -->

Tendré entonces los comentarios anidados sin detalles gráficos más allá de los definidos genéricamente en la plantilla y tal como los mostraría el navegador por defecto [ ver captura ]

Si miro el código fuente, los comentarios, incluyendo el formulario, están en un rectángulo cuyos atributos ID y class tienen el mismo nombre, se llaman comments. Arriba, una etiqueta H4 muestra el texto con la cantidad de comentarios y debajo, otro DIV con la clase comments-content sirve de contenedor genérico que, a su vez, tiene otro DIV interno llamado comment-holder y otro DIV más y otro y otro ... y recién luego está la etiqueta OL con el contenido de cada comentario en etiquetas LI:

<div id="comments" class="comments">
  <h4> XX comentarios: </h4>
  <div class="comments-content">
    <div class="comment-holder">
      <div id="bc_XXXXXX" kind="c">
        <div id="bc_XXXXXX">
           <div id="bc_XXXXXX" class="comment-thread" u="0" t="0" kind="r">
             <ol id="bc_XXXXXX">
                <li id="bc_XXXXXX" class="comment" kind="b"> ............ </li>
                ..................
                <li id="bc_XXXXXX" class="comment" kind="b"> ............ </li>
             </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Comienzo entonces, borrando todo el contenido del CSS que es lo que está en:

<b:includable id='threaded_comment_css'>
  <style>
    ....... borro todo .......
  </style>
</b:includable>

y allí, entre <style> y </style>, es donde agregaré las reglas de estilo que vaya definiendo.

Lo primero que haré será colocar las del contenedor general; si no se tiene idea del espacio real que ocupa ese rectángulo, puede ponerse un color de fondo aunque sea provisorio y si quiero establecer las propiedades del título, las colocaré en #comments h4 {} que suele estar definido en otra parte de la plantilla; en este ejemplo, las ignoraré:

.comments {
  clear: both;
  margin: 0;
  padding: 0;
}

Como voy a numerarlos, definiré el contador:

.comments .comments-content {
    counter-reset: contadorcomentarios;
    overflow: hidden;
    position: relative;
    width: 100%;
}

Todos esos DIVs internos no me sirven de nada así que estableceré las reglas de la lista OL LI, separando verticalmente estas últimas porque les quiero poner un color de fondo que permute (los impares tendrán un color y los pares otro):

.comments .comments-content .comment-thread ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.comments .comments-content .comment {
background-color: #F0F0F8;
  border-bottom: 1px solid #CCE;
  border-top: 1px solid #CCE;
  margin: 5px 0;
  padding: 10px;
}
.comments .comments-content .comment:nth-child(2n+1) {
  background-color: #E8E8F0;
}

Hasta acá, tendré algo como lo que muestra esta imagen.

Y ahora voy a tener que meterme en el contenido de cada etiqueta LI que también es bastante engorroso pero, allá vamos; tiene cuatro grandes secciones:

<li id="bc_XXXXXX" class="comment" kind="b">
  <div class="avatar-image-container"> ....... </div>
  <div id="XXXXXX" class="comment-block"> ....... </div>
  <div id="bc_XXXXXX" class="comment-replies"> ....... </div>
  <div id="bc_XXXXXX" class="comment-replybox-single"> ....... </div>
</li>

La imagen del comentarista a la izquierda; defiimos su tamaño máximo, bordes y detalles decorativos varios:

.comments .avatar-image-container {
  background-color: #FFF;
  border: 1px solid #88B;
  float: left;
  height: 45px;
  line-height: 45px;
  overflow: hidden;
  padding: 1px;
  text-align: center;
  width: 45px;
}
.comments .avatar-image-container img {
  max-height: 45px;
  /* eventualmente, usar max-width: 45px; */
}

El DIV inferior con la numeracion:

.comments .comment-block {
  position: relative;
}
.comments .comment-block:before {
  color: #00BFFF;
  content: counter(contadorcomentarios, decimal);
  counter-increment: contadorcomentarios;
  font-family: Helvetica;
  font-size: 30px;
  position: absolute;
  right: 0;
  top: 0;
}

El DIV comment-block inferior contiene tres partes; en comment-header está el nombre del comentarista y a fecha:

.comments .comment-header {
  height: 50px;
}
.comments .comments-content .user {
  padding: 10px 0 0 10px;
}
.comments .comments-content .user, .comments .comments-content .user a {
  color: #00BFFF;
  font-family: Tahoma;
  font-size: 18px;
  font-style: normal;
}
.comments .comments-content .datetime {
  color: #666;
  display: block;
  font-family: Arial;
  font-size: 11px;
  padding: 2px 0 0 60px;
}

Esa parte también incluye una etiqueta que, por ahora, no parece tener ningún uso:

<span class="icon user blog-author"></span>

Ya va tomando forma [ ver captrura ] pero sigo ,mañana

Quienes tenían aplicadas personalizaciones en los comentarios y hayan decidido usar el nuevo sistema que los anida e incluye la posibilidad de Reply, se habrán visto en problemas ya que esa personalización se ha perdido y deben empezar otra vez.

El nuevo sistema ha dejado de ser lo que era y, bien o mal, Blogger ha decidido mostrar los comentarios utilizando JavaScript con lo cual, ciertas cosas se complican.

La más simple de resolver es la numeración de los comentarios ya que, tal como mostraba en esta otra entrada, es algo que podemos agregar usando sólo CSS y que funcionará en cualquier navegador.

En el nuevo modelo, debemos modificar y agregar algunas reglas; expandimos la plantilla y buscamos:

<b:includable id='threaded_comment_css'>

adentro, están las reglas de estilo de los comentarios, una de ellas es la clase .comments .comments-content, allí, agregamos esto:

.comments .comments-content {
  .......
  counter-reset: contadorcomentarios;
}

luego, verificamos qoe esta regla tenga la propiedad position: relative; si no la tiene, la agregamos:

.comments .comment-block {
  .......
  position: relative;
}

Por último, debajo de la anterior ponemos lo siguiente:

.comments .comment-block:before {
  /* el contador */
  content: counter(contadorcomentarios, decimal);
  counter-increment: contadorcomentarios;
  /* la posición dentro del rectángulo */
  position: absolute;
  right: 0;
  top: 15px;
  /* las propiedades gráficas de la fuente */
  color: #9AB;
  font-family: Century Gothic;
  font-size: 36px;
}

Y listo.

Esa regla escribirá el número de modo automático y, por supuesto, puede cambiarse. La posición del número la controlaremos con top, right, bottom y left y el el resto con las propiedades de estilo normales para cualquier texto.

Social media icons by carizzo
	Contiene 17 íconos de 600x600, en formato PNG. descargar

Isometric 3D by pixeden
	Contiene 376 íconos de 32x32, 64x64, 128x128 y 256x256, en formato PNG. descargar

Starry Site
	Contiene 16 íconos de 68x65, en formato PNG. descargar

Old bottle crowns
	Contiene 20 íconos de 200x200, en formato PNG. descargar

Blogger ha implementado el sistema de comentarios anidados con opción de Reply en cada uno de ellos y esto trae algunos dolores de cabeza ya que el sistema se aplica a todos los blogs, sin importar la plantilla que se use, sea esta de las nuevas o no.

En todas ellas, veremos (en realidad hace tiempo que ya está pero no tenían uso), estos cuatro elementos includable dentro del widget llamado Blog1 que es el que contiene las entradas:

<b:includable id='threaded_comment_js' var='post'>
...
</b:includable>

<b:includable id='threaded_comments' var='post'>
...
</b:includable>

<b:includable id='threaded-comment-form' var='post'>
...
</b:includable>

<b:includable id='threaded_comment_css'>
...
</b:includable>

El primero es el script que usa Blogger para mostrar los comentarios; el segundo es el contenedor de esos comentarios de nuevo estilo, el tercero es el formulario para ese modelo y el ultimo son las reglas de estilo de esa sección.

Por ahora, los dolores de cabeza y dudas que se presentan son tres:

1. tengo todo eso pero no se ve nada
2. tengo todo eso y se ve pero no funciona
3. tengo todo eso, se ve, funciona pero no lo quiero usar

Como dije, los includables están en todas las plantillas pero, si alguien quiere utilizar el sistema y no lo ve implementado, es posible que falte un código que es el que va en el includable llamado main; allí, seguramente veremos una o dos veces, el siguiente código:

<b:include data='post' name='comments'/>

y ninguna referencia al nuevo sistema así que bastaría reemplazar eso por esto:

<b:if cond='data:post.showThreadedComments'>
  <b:include data='post' name='threaded_comments'/>
<b:else/>
  <b:include data='post' name='comments'/>
</b:if>

Y al revés, si NO quisiéramos usar el nuevo sistema, borraríamos eso y dejaríamos sólo:

<b:include data='post' name='comments'/>

El tercer error que he visto afecta a quienes usamos Prototype+Scriptaculous; en ese caso, lo que no parece funcionar es el "Responder" y eso se corrige cambiando la forma de cargar estas librerías ya que es un error similar al que ocurría con los Seguidores; si usamos las API de Google, podemos cargarlas de este modo aunque esto es dudoso:

<script src='http://www.google.com/jsapi'/>
<script>
  google.load(&quot;prototype&quot;, &quot;1&quot;);
  window.JSON = {
    parse: function (st) { return st.evalJSON(); },
    stringify: function(obj) { return Object.toJSON(obj); }
  };
  google.load(&quot;scriptaculous&quot;, &quot;1&quot;);
</script>

Por último, hay que tener en claro que el nuevo sistema no usa las mismas reglas de estilo que el anterior y por lo tanto, el resultado gráfico, si es que se ha personalizado toda esa parte, podrá ser ... cualquier cosa y habrá que comenzar a toquetear las cosas para acomodarlas nuevamente.

Todas las definiciones de estilo de este modelo se encuentran en threaded_comment_css y pueden ser modificadas allí ... con paciencia, prudencia y tratando de no insultar demasiado a los desarrolladores de Blogger.

Veremos si a lo largo de los días puedo ir poniendo los detalles de eso y de que manera ir re-acomodando las cosas y los distintos trucos o personalizaciones que ya han sido publicadas.

Canvas es una nueva etiqueta de HTML5 que permite generar gráficos de manera dinámica en una página y es soportada por Firefox, Opera, Safari e Internet Explorer 9 o superior.

Aunque por ahora es poco utilizada, se supone que será una de esas cosas que en un futuro cercano, transformarán la web.

Es una etiqueta vacía, un contenedor donde puede escribirse, dibujarse o agregarse imágenes que se controlan con JavaScript y por lo tanto, pueden ser modificados en tiempo real, creándose ilustraciones, animaciones, juegos ... casi cualquier cosa.

Hay muchos demos dando vueltas en la red; los diseñadores están experimentando y con esfuerzo, han conseguido cosas notables.

Por ejemplo, somethinghitme.com ha creado una réplica del viejo juegoSpace Invaders al que ha llamado Canvas Invaders y que podemos ver funcionando haciendo click en este enlace, ejecutándose aca mismo, en una ventana modal .

Algo similar se puede ver en un puzzle llamado Lights Off o en una réplica de Juego de la Vida de Conway, el Pacman de arandomurl.com, el extraño personaje animado creado por hakim.se, los puzzles de ~jcm, los demos de Kevin Roast, Mario Kart, CubeOut, Harmony, Biolab Disaster, el Canvas 3D de dhteumeuleu, Google Images Gift Box, los juegos de Dustin Montgomery, etc, etc.

Ya que no es una etiqueta que soporten las viejas versiones de Internet Explorer, hay una serie de proyectos que intentan solucionar el tema aunque lo logran de manera parcial o limitada. Uno de los más difundidos es el llamado ExplorerCanvas que no es otra cosa que un script que podemos agregar de manera condicional.

Por ejemplo una aplicación como Canvas Painter que también esta agregada a esta entrada y se abre en una ventana modal, debería funcionar en Internet Explorer 8.

La mayor parte de estos experimentos pueden descargarse e incluirse en cualquier página web y hacer eso no tiene demasiados secretos, se agregan como cualquier otro script; por ejemplo, este es uno llamado canvascape que funcionará de manera errática en IE8:

Hasta ahí no hay mayores problemas, hacemos un copypaste de algo y listo pero me da la impresión que estas facilidades van a ir más allá porque no es demasiado difícil generar nuestros propios gráficos así que vamos a ver si por lo menos, logramos empezar a descubrir de qué se trata esta nueva etiqueta, cómo utilizarla y luego, como siempre, todo quedará en manos de nuestra paciencia e imaginación.

El CSS3 está cambiando la forma en que son tratados los textos. Durante años, las propiedades permanecieron invariables; ahora, se agregan opciones que algunos navegadores reconocen, otros no y otros más o menos.

leer artículo actualizado

Los íconos sociales estilo puzzle de daddydesign son originales y pueden ser descargados gratuitamente pero, como son PNGs transparente, pueden servir para armar algo más divertido tal como usa ese sitio en su sidebar; simplemente, colocando cada uno de ellos de tal forma que se superpongan y de ese modo, crear un puzzle completo o parcial.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Es sencillo de armar, basta crear una lista de enlaces con las imágenes y eventualmente, como en este ejemplo, en lugar de colocar un ícono, colocamos una imagen transparente para crear un "agujero":

<div id="puzzleredes">
  <ul>
    <li>
      <a href="URL_SERVICIO">
        <img src="URL_IMAGEN.png">
      </a>
    </li>
    <!-- y seguimos agregando todas las que se nos ocurra -->
</ul>
</div>

Ahora, falta el CSS que simplemente se basa en hacer que cada item de la lista flote y dimensionarlas de tal modo que los rectángulos sean más pequeños que las imágenes para que se superpongan.

Sólo basta un poco de aritmética y probar los distintos valores que, es este caso se refieren a los íconos de 128x128:

<style>
  #puzzleredes {
    height: 390px;
    margin: 0 auto;
    position: relative;
    width: 470px;
  }
  #puzzleredes a {
    display: block;
  }
  #puzzleredes ul {
    list-style-type:none;
    margin: 0;
  }
  #puzzleredes li {
    float:left;
    height:85px
    width:85px;
  }
</style>

El enlace es LARGO ... a primera vista: ASUSTA pero, cuando lo vemos más detalladamente ... ES PEOR; sin embargo, funciona y es una buena forma de eludir los problemas que generan los distintos modos de compartir entradas de Blogger en Facebook.

Quién quiera leer de esos problemas puede ver esta entrada pero, la base del asunto es que Blogger no nos permite establecer los datos necesarios en las etiquetas META correspondiente que deben estar SI o SI en el HEAD de la plantilla para que sean leídas correctamente por Facebook.

Uno de esos datos es la imagen miniatura que "adornaría" el post y el otro es el resumen de ese post, es decir, el texto explicativo; ambos datos, no son accesibles en Blogger salvo en el includable post y, como eso es parte del BODY, no hay manera de ponerlos en el HEAD ya que usando JavaScript, serán ignorados; por lo tanto, el resultado a compartir depende siempre de la buena voluntad de Blogger.

Facebook dispone de un plugin para enviar, pero, los datos de ese envío son automáticos, no tenemos control sobre ellos; otra forma es usar un simple enlace, algo que el sistema parece haber depreciado pero, que aún sigue funcionando e imagino que funcionará por mucho tiempo ya que es utilizado por incontables sitios y es la forma más sencilla de agregar un botón para este sistema ya que no requiere aplicaciones o scripts extras.

El enlace básico sería este:

<a href="http://www.facebook.com/sharer.php?u=URL_PAGINA&amp;t=TITULO_ENTRADA"> Compartir en Facebook </a>

Se envían dos parámetros:

u es la dirección URL de la página
t es el título de la entrada

El resultado es pobre pero, según se ve en la web, muchos sitios hablan de la posibilidad de agregar parámetros extras y de ese modo, crear un botón de compartir personalizado; para eso, los parámetros serán otros:

p[url] es la dirección URL de la página
p[title] es el título de la entrada
p[summary] es el texto de la entrada
p[images][0] es la miniatura de la entrada (100x100)

el resultado, sería algo como esto:

http://www.facebook.com/sharer.php?s=100&p[title]=TITULO_ENTRADA&p[summary]=RESUMEN&p[url]=URL_PAGINA&&p[images][0]=URL_IMAGEN

Y ahora, agregaremos el botón de compartir en alguna parte de las entradas, por ejemplo, en el post-footer y allí, empezaremos a colocar los datos que nos provee Blogger:

p[url] la dirección URL de la página = data:post.url
p[title] el título de la entrada = data:post.title
p[summary] el texto de la entrada = data:post.snippet
p[images][0] la miniatura de la entrada = data:post.thumbnailUrl

Abriremos ese enlace en una ventana de tipo pop-up y crearemos dos enlaces diferentes, uno para las entradas que tengan definida una imagen miniatura y otro para las que no las tengan en cuyo caso, agregaremos una imagen por defecto; para esto, usaremos los condicionales de Blogger y el monstruo final, sería este:

<b:if cond='data:post.thumbnailUrl == &quot;&quot;'>
  <a expr:onclick='&quot;window.open(\&quot;http://www.facebook.com/sharer.php?s=100&amp;p[title]=&quot; + data:post.title + &quot;&amp;p[summary]=&quot; + data:post.snippet + &quot;&amp;p[url]=&quot; + data:post.url + &quot;&amp;&amp;p[images][0]=URL_IMAGENxDEFECTO\&quot;,\&quot;sharefb\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript: void(0)'> Compartir en Facebook </a>
<b:else/>
  <a expr:onclick='&quot;window.open(\&quot;http://www.facebook.com/sharer.php?s=100&amp;p[title]=&quot; + data:post.title + &quot;&amp;p[summary]=&quot; + data:post.snippet + &quot;&amp;p[url]=&quot; + data:post.url + &quot;&amp;&amp;p[images][0]=&quot; + data:post.thumbnailUrl + &quot;\&quot;,\&quot;sharefb\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript: void(0)'> Compartir en Facebook </a>
</b:if>

La ventana pop-up que se abriría sería algo así:

Y el resultado en Facebook sería este:

Este es el sistema que ahora está funcionando en el blog, así que pueden probarlo online.

ACTUALIZACIÓN:

En lugar de este dato que es la miniatura de 72x72:

data:post.thumbnailUrl

en caso de error, debería probarse este otro que es la imagen real:

data:post.firstImageUrl

Esta son dos formas sencillas de crear un efecto fade sobre una imagen, permutando una por otra.

En la primera, sólo usaremos CSS así que el el efecto no funcionará en versiones inferiores a IE9; el HTML para ambos es este:

<div id="ejemplo">
  <img src="URL_IMAGEN"/>
</div>

Y el CSS sería algo así:

<style type="text/css">  
  /* al DIV contenedor lo centramos centramos y dimensionamos */
  #ejemplo {
    cursor: pointer;  
    height: 375px;  
    margin: 0 auto;
    position: relative;
    width: 500px;  
    /* y acá, colocamos la segunda iamgen como fondo */
    background: transparent url(URL_OTRA_IMAGEN) no-repeat left top;  
  }  
  /* a la etiqueta IMG interna, le agregamos el efecto y la transición */
  #ejemplo img {
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 1;
    /* agreamos el filtro para que en IE8 funcione aunque no sea animado */
    filter:alpha(opacity=100);
  }
  /* al poner el cursor encima, la imagen se oculta así que lo que veremos es el fondo de la segunda imagen */
  #ejemplo:hover img {
    opacity:0;
    filter:alpha(opacity=0);
  }
</style>

La otra forma simple es utilizando la librería jQuery.

Como dije, el HTML es exactamente el mismo y el CSS es más corto:

<style type="text/css">  
  /* al DIV contenedor lo centramos centramos y dimensionamos */
  #ejemplo {
    cursor: pointer;  
    height: 375px;  
    margin: 0 auto;
    position: relative;
    width: 500px;  
    /* y acá, colocamos la segunda imagen como fondo */
    background: transparent url(URL_OTRA_IMAGEN) no-repeat left top;  
  }  
</style>

Obviamente, nos falta el script:

<script type="text/javascript">
  $(document).ready(function() {
    $("#ejemplo").hover(function(){
      $(this).find("img").fadeOut();
    }, function() {
      $(this).find("img").fadeIn();
    });
  });   
</script>

El uso de las fuentes de la llamada Google Font API se va extendiendo pero, en sistemas de blogs como Blogger suele tener algunas limitaciones. Por un lado, hay una demora notable entre la carga de los sitios y la carga del API por lo que suelen mostrarse las fuentes con los valores por defecto establecidos para las etiquetas y, pasado un tiempo, cambian.

Esto no es fácil de resolver pero hay algunas alternativas; una de ellas es ocultar temporalmente el body de la página y mostrarla pasados unos cuantos segundos; puede hacerse de modo sofisticado o, simplemente, poniendo algo así antes de </head>

<style> body { visibility:hidden; } </style>
<script>
//<![CDATA[
  setTimeout(demora,3000); 
  function demora() { document.body.style.visibility = "visible"; }
//]]>
</script>

donde 3000 es el tiempo que se expresea en milisegundos (1000 = 1 segundo)

Otra forma es la que indica el mismo Google y es más razonable pero, para eso, en lugar de usar la etiqueta LINK:

<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css' />

debemos cargar las fuente con JavaScript:

<script type='text/javascript'>
//<![CDATA[
  WebFontConfig = {google: { families: [ 'Shadows Into Light' ] } };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
//]]>
</script>

y luego, establecer las reglas para una serie de clases que define el mismo API:

<style>
  .wf-loading { visibility: hidden; }
  .wf-active, .wf-inactive { visibility: visible; }
</style>

De este modo, cualquier etiqueta que utilice esas fuentes, permanecerá invisible hasta que sea cargada.

En el script, esta línea indica los tipos de fuente:

WebFontConfig = {google: { families: [ 'Shadows Into Light' ] } };

si usamos varias, las separamos con comas:

WebFontConfig = {google: { families: [ 'Shadows Into Light', 'Paytone+One' ] } };

Quisque et elit mi? In volutpat accumsan est ut auctor! Vivamus vulputate turpis non urna dignissim vehicula. Praesent id tortor et turpis lacinia elementum ut nec libero. Maecenas mollis tincidunt mi, vitae scelerisque sapien porttitor vitae. Nulla sed risus non orci interdum ultricies.

Vagabundia

Otra dificultad se genera cuando queremos usar "fuentes especiales" en alguna entrada en particular y no en todo el sitio. Eso, no lo podemos hacer utiizando la etiqueta LINK pero podemos usar la etiqueta STYLE  e "importar" la fuente de este modo:

<style type="text/css"> @import url("http://fonts.googleapis.com/css?family=Shadows+Into+Light"); </style>

Obviamente, dependiendo de cada sitio, tendrá el mismo inconveniente de la demora así que, llegado el caso, también podemos usar el script cargador porque funcionará perfectamente, tanto en una entrada como en la plantilla.

En todos los casos, utilizaremos esta fuente del mismo modo que usamos cualquier otra, ya sea en una etiqueta, ID, una clase o directamente inline:

h1 { font-family: Paytone One,Arial,serif; }
#titulo { font-family: Shadows Into Light,Arial,serif; }
.mifuente { font-family: Paytone One,Arial,serif; }

<div style="font-family: Shadows Into Light,Arial,serif;"> ....... </div>

Un detalle interesante es que se nos permite reducir el tiempo de carga de cualquier fuente que vayamos a utilizar, seleccionado los caracteres deseados, algo que es útil cuando, por ejemplo, sólo quemos emplearla para el logo o algo semejante (más información).

Esto, se hace agregado el parámetro text=valor y, aunque es una función en desarrollo, parece funcionar perfectamente:

http://fonts.googleapis.com/css?family=Paytone+One&text=Vagabundia

donde es necesario codificar la URL, transformando los caracteres que no sean alfanumericos, por sus equivalencias. Por ejemplo %20 es un espacio:

http://fonts.googleapis.com/css?family=Inconsolata&text=Google%20World

Otros caracteres usuales:

á %c3%a1
é %c3%a9
í %c3%ad
ó %c3%b3
ú %c3%ba
ñ %c3%b1
¡ %c2%a1
¿ %c2%bf

Año nuevo ... vida nueva

no

La misma vida de siempre salvo que uno quiera cambiarla y para eso no hace falta que el almanaque nos defina el cuando.
Basta hacerlo de una buena vez ...
... ahora mismo.

¡Feliz Año y Feliz Vida para todos !!!