Los gadgets de Estadísticas y Entradas populares

Como Blogger es bastante parco a la hora de informarnos cosas, hay que esperar que alguien se de cuenta y por suerte, Rosa siempre está atenta y este fin de semana nos avisa que en Blogger Draft hay dos nuevos gadgets que es posible agregar al blog: Estadísticas y Entradas populares

Por supuesto, como todo lo que se encuentra en esa parte, no están 100% probados así que es posible que nos encontremos con errores o incluso, que vayan cambiando con el tiempo pero, nada impide probar y agregarlos ya que son bastante simples.

El llamado Estadísticas del Blog muestra precisamente eso y nos permiten elegir entre cuatro estilos diferentes, algunos de los cuales podemos a su vez configurar aunque en todos ellos, las opciones son mínimas.

¿De dónde sacan las estadísticas? Seguramente coinciden con las que se muestran en la pestaña Estadísitcas del mismo Blogger Draft y se corresponden con la cantidad de páginas vistas (historial completo).

El gadget se agrega como cualquier otro y lo veremos en nuestra plantilla identificado con un ID llamado Stats1 y su título por defecto es Páginas vistas en total

<b:widget id='Stats1' locked='false' title='Páginas vistas en total' type='Stats' />

Si lo expandimos, veremos el código donde, al parecer, poco hay para tocar y si, eventualmente, se nos ocurriera modificar algún detalle, deberíamos agregar las reglas de estilo correspondientes para sobrescribir las que utiliza Blogger.

/* el bloque donde se muestra el gadget */
.Stats .counter-wrapper {
display:inline-block;
font-size:24px;
font-weight:bold;
height:30px;
line-height:30px;
vertical-align:top;
}
/* la imagen del gráfico si usamos esa opción (tamaño 75x30) */
.Stats img { margin-right:10px; vertical-align:top; }
.Stats .graph-counter-wrapper {color:#FFFFFF;}
/* el estilo de cada dígito */
.Stats .digit {
background:url("/img/widgets/stats-flipper.png") no-repeat scroll left center transparent !important;
border:1px solid #FFFFFF;
display:inline-block;
height:28px;
line-height:28px;
margin-left:-1px;
position:relative;
text-align:center;
width:22px;
}
.Stats .blind-plate {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #000000;
height:0;
left:0;
opacity:0.65;
position:absolute;
top:13px;
width:22px;
}
/* la posición de cada dígito */
.Stats .stage-0 {background-position:0 0 !important;}
.Stats .stage-1 {background-position:-22px 0 !important;}
.Stats .stage-2 {background-position:-44px 0 !important;}
.Stats .stage-3 {background-position:-66px 0 !important;}

De todo ello, tal vez, lo que seguramente es más importante es la posición ya que no está centrado, para hacerlo, deberíamos poner algo así antes de </b:skin>

#Stats1_content { text-align: center; }

Si esas estadísticas son creibles o no ... ¿quién sabe? En todo caso, es llamativo que no coincidan con las que da Google Analytics siendo ambos, servicios de la misma empresa. Es cierto que todas las estadísticas son ... dudosas pero algunas son "mas dudosas" que otras. De todas maneras, en un blog comercial, la única estadística válida es la cuenta bancaria y en un blog personal, la única estadística válida es el placer y esa, no puede ser mensurada.

El otro gadget es el llamado Entradas Populares que se basa en el mismo sistema de estadísticas por lo que difiere de aquellos otros que se basaban en la cantidad de comentarios y que, por utilizar los feeds, sólo permitian acceder a las últimas 500 entradas.

En este caso, las opciones nos permiten seleccionar tres períodos: mostrar las entradas más vistas en cualquier momento, en los últimos 30 días y en al última semana. Los resultados variarán pero lo más razonable, parecería utilizar la primera opción ya que en las otras dos, suelen pesar demasiado las últimas entradas publicadas.

A su vez, de manera similar a como lo hace el gadget Lista de blogs, podemos elegir si mostramos el título de las entradas, una miniatura (si es que hay una imagen) y un fragmento de la misma.

Al agregarlo, también veremos el código pero pocas posibilidades de personalizarlo:

<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts' />

Aparentemente, no hay limitaciones a la cantidad de gadgets a agregar así que pueden probarse todas juntas pero, tal como se ve en algunos comentarios de la entrada de Rosa, el resultado que se obtiene es bastante ... pobre. Fundamentalmente, el problema es que se listan 10 entradas y eso hace que el gadget sea excesivamente largo. En estas dos capturas se ve el resultado parcial, el real, tiene casi el doble de esa altura:

Aún usando el gadget con la opción donde se muestran sólo los títulos, el CSS agregado por Blogger es molesto, crea listas con items muy separados así que deberemos recurrir al CSS y agregar nuestras propias reglas de estilo para sobrescribirlas.

/* esta es la miniatura cuando hay un fragmento */
.PopularPosts .item-thumbnail {float:left;margin:0 5px 5px;}
/* esta es la miniatura cuando no hay un fragmento */
.PopularPosts .item-thumbnail-only {text-align:center;}
/* esta es la miniatura en si misma */
.PopularPosts img {padding-right:0.4em;}
/* cada uno de los diez items */
.PopularPosts .widget-content ul li {padding:0.7em 0;}
/* el título de cada item */
.PopularPosts .item-title {padding-bottom:0.2em;}

Por ahora, tal como está, no creo que sea demasiado útil, más que nada por su tamaño. Los resultados que muestra, por lo menos en mi caso son ... extraños porque, como dije antes, los resultados que muestran las estadísticas de Blogger Draft también son extraños y esa es la fuente que se consulta. De todos modos, si pudiera configurarse un poco más, reducirse la cantidad, estabecer alguna forma de mostrar una imagen alternativa cuando la entrada no tenga, etc, etc, podría ser una alternativa sin importar esos resultados ya que es una forma de "refrescar" entradas viejas.

• Agregar un botón de Me Gusta para Facebook
• Wallpapers (animados e interactivos)
• Gickr: crear gifs animados online
• Un trueno en el cielo
• Insertar un SWF en Blogger
• Nada de nada
• Abbey Road
• Algo sobre colores
• Acordeones sólo con CSS
• Bitstrips: Un sitio para crear tiras cómicas

Un último dato curioso. Mirando la hoja de estilo (la voluminosa hoja de estilo) que incluye Blogger por defecto, se ven algunas reglas que hacen suponer que en algún momento se agregará algún gadget de entradas relacionadas ya que hay definiciones que parecen indicar eso.

Habrá que estar atentos ...

4Los relojes siempre hacen tic-tac.

Es el latido inexorable del tiempo que se acumula y nos arruga la piel, nos encanece el cabello y nos enlentece los pasos. Toda vida sigue ese camino y también un blog. Algunos lo llaman madurez, otros lo llaman envejecimiento; yo no sé cómo llamarlo pero se siente en los huesos.

Tal vez, cuando se cumplen cuatro años desde el primer dia en que este blog estuvo online, escribir no es otra cosa que seguir la tradición que uno se ha auto-impuesto; tal vez sea una forma de reafirmar compromisos personales, de mirar hacia atrás y preguntarse lo mismo que me preguntaba aquel primer día en que hice click y ya no hubo marcha atrás porque sabía cómo había llegado hasta aquí pero no tenía mucha idea de por qué había llegado hasta aquí y ¿para que demonios uno quiere tener un blog?

Luego de cuatro años, sigo escribiendo con dos dedos (y eventualmente tres), sigo sin creer en las cosas automáticas, sigo tratando de entender en lugar de tener, sigo sin mirar demasiadas estadísticas, me siguen sin importar los rankings, sigo acumulando desconocimiento, sigo riéndome de mi propia ignorancia y envidiando en secreto lo para otros parece tan sencillo.

Cuatro años significan millones de palabras ordenadas y desordenadas, palabras que a veces no significan nada y a veces sólo las entiende quien las escribe pero que, de todas maneras, están allí, dejando partecitas de uno mismo en el mundo digital.

Es que un blog siempre es uno mismo escribiendo un blog. No hay manera de evitarlo, las máscaras son demasiado transparentes y ese es un problema serio porque del otro lado siempre hay alguien que te irrita, que te mima, que te deja un sabor amargo, que te hace sonrojar, que te cubre de emociones que a veces son difíciles de soportar pero que siempre son mejores que la nada estéril del silencio.

Un blog puede ser impersonal, puede ser una simple suma de recortes tomados de aqui y allá pero ¿que sentido tendría?

Yo no sé qué maldita cosa es este blog pero duele demasiado y sonrie demasiado para que no merezca que de tanto en tanto le de las gracias y le pida que me siga alimentando el alma ... un rato más.

Tal vez, escribir estas cosas y seguir la tradición no sea más que una forma de enviarle ese deseo al futuro ...

Glossy Waxed Wood Social Media
	Contiene 108 íconos de 512x512, en formato PNG.descargar

Blue Jelly Social Media
	Contiene 108 íconos de 420x420, en formato PNG.descargar

Crumpled Paper Social Media
	Contiene 108 íconos de 512x512, en formato PNG.descargar

A mi juicio, las Google Font API son de lo mejor que ha intentado Google en los últimos tiempos; no sé si tendrá futuro o no porque dependerá mucho de si las librerías se amplian pero, por ahora son una alternativa viable y sencilla de utilizar fuentes de textos no convencionales.

Por lo que veo en Google Operating System, le han agregado una opción muy útil, la posibilidad de previsualizarlas de manera dinámica, estableciendo una serie de propiedades CSS: separación de letras, sombras, tamaños y estilos diversos cuyos detalles podemos copiar y utilzar directamente en nuesto sitio.

Para quien nunca lo haya intentado, basta agregar la fuente elegida antes de </head>:

<link  href="http://fonts.googleapis.com/css?family=Molengo:regular" rel="stylesheet" type="text/css" />

Y luego, en cualquier definición, establecemos la familia de la fuente como lo hacemos con cualquier otra:

font-family: 'Molengo', serif;

jqFancyTransitions es un plugin para jQuery que permite crear una galería de imágenes con diferente efectos de transición entre ellas.

Para utilizarla debemos tener jQuery en al plantilla así que, si no la tenemos, antes de </head> agregamos la librería directamenete desde Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

y debajo, el plugin, ya sea cargándolo desde un servidor donde previamente lo hayamos alojado:

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

o copiando y pegando el código y colocándolo entre etiquetas:

<script type="text/javascript">
//<![CDATA[
... aquí copiamos y pegamos el contenido del archivo ...
//]]>
</script>

No hace falta nada más; ahora, para utilizarla, tenemos varias alternativas que podemos ver explicadas en la página de los desarrolladores pero, lo más simple es colocar las imágenes en un DIV de este modo:

<div id="migaleria">
<img src="URL_imagen1" />
<img src="URL_imagen2" />
<img src="URL_imagen3" />
... y seguimos agregando tantas imágenes como se nos ocurra ...
</div>

Luego, llamamos a la función:

<script> $('#migaleria').jqFancyTransitions({ opciones }); </script>

Podemos tener varias galerías en la misma página, cada una, identificada por un atributo ID diferente (en este ejemplo migaleria) y las opciones son parámetros que se agregan separados por comas:

width y height establecen el tamaño
effect es el tipo de transición y puede ser wave, zipper o curtain
position es la posición desde donde se iniciará la transción y puede ser alternate, top, bottom, alternate o curtain
direction es la dirección de la transción y puede ser fountainAlternate, left, right, alternate, random o fountain
delay es el tiempo que permanece la imaegn visible (por defecto 5000 o sea 5 segundo)
strips es un número que indica la cantidad de "pedazos" en que se desompone la imagen (por defecto 20)
stripDelay es el tiempo que permanece visible cada "pedazo" (por defecto 50)

Otras opciones permiten controlar los textos que pueden agregarse a las imágenes, colocándolos en el atributo alt:

<img src="URL_imagen1" alt="texto a mostrar" />

titleOpacity indica la opacidad de ese texto
titleSpeed es el tiempo que tarda en ser mostrado

Como alternativa, en lugar de imágenes podemos utilizar enlaces

<a href="URL_imagen1" />

En ese caso, las opciones son dos:

navigation puede ser true o false y agrega botones de navegación
links puede ser true o false para establecer si las imágenes son enlaces o no

En este ejemplo, las opciones utilizadas son las más simples así que la función es llamada de este manera:

<script> $('#migaleria').jqFancyTransitions({ width: 640, height: 400,direction: 'random',delay: 2000, effect: 'wave' }); </script>

Esto no es para copiar, esto no es para aprender, esto no es para ... nada excepto soprenderse por lo que vendrá y pasarse un rato largo intentando meter tanta cosa en una entrada de Blogger.

Pure CSS Fail Whale by Steve Dennis es eso, un dibujo realizado enteramente con CSS cuyo autor debe haberse tomado unas merecidas vacaciones luego de escribir semejante cantidad de códigos.

Lo que veremos dependera del navegador que utilicemos; en Internet Explorer no será otra cosa que un dibujo torpe [ ver captura ]; en Firefox 3.6 y Opera, será un dibujo estático; en Chorme y Safari será una animación que es el preludio de lo que nos depara el futuro, cuando el resto de los navegadores incorporen las propiedades necesarias.

Click para ver el resultado.

REFERENCIAS:Mamanunes en Twitter

En general, los comentarios condicionales son un recurso extremo que ayuda a que nuestra página web se vea correctamente en algunos navegadores. Es algo que siempre deberíamos evitar y buscar alternativas que suelen estar ahí aunque no las veamos.

Sin embargo, esto se hace cada vez más complicado, sobre todo, a partir de la llegada de la versión 8 de Internet Explorer que funciona de manera mucho más razonable que sus antecesores pero que sigue insistiendo con la tan mentada compatibilidad, haciendo que, si no lo indicamos expresamente, nuestras páginas se vean como si usáramos una versión anterior. Para colmo, no falta demasiado para que salga la versión 9 y allí, todo cambiará radicalmente porque se insiste en que incluirá la mayoría de las opciones que hoy no tiene y los demos demuestran que esto parece ser cierto.

Los comentarios condicionales son un hack, un truco inventado por Microsoft que nos permite ejecutar determinadas cosas sólo en su navegador; por ejemplo:

<!--[if lt IE 8]>
  [esto sólo se ejecutará en versiones inferiores a Internet Explorer 8]
<![endif]-->

Dentro de esas etiquetas puede ponerse cualquier cosa, estilos, scripts, etiqueta HTML, no hay demasaidas restricciones al respecto y las podemos agregar tanto en el head de la página como en el body. En Blogger, incluso, podemos utilizarlos en las mismas entradas.

Más allá de las condiciones normales, en impressivewebs.com muestran algunas otras que amplian las posibilidades.

Esta es una condición inversa que permite detectar todos los navegadores excepto Internet Explorer:

<!--[if !IE]>-->
  [esto sólo se ejecutará en todos los navegadores excepto en Internet Explorer]
<!--<![endif]-->

Esta es una variante de lo anterior donde entre "todos los navegadores" se agrega IE8:

<!--[if IE 8]><!-->
  [esto se ejecutará en todos los navegadores excepto en versiones inferiores a Internet Explorer 8]
<!--<![endif]-->

Las condiciones admiten operadores lógicos (AND y OR) así que:

<!--[if (IE 6)|(IE 7)]>
  [esto se ejecutará en IE6 o en IE7]
<![endif]-->

<!--[if (IE 6)&amp;(IE 7)]>
  [esto se ejecutará en IE6 y en IE7]
<![endif]-->

Aunque hace ya tiempo, en El escaparate de Rosa se mostraba la forma en que Blogger pagina los comentarios, son muchas las plantillas que no contienen los códigos necesarios y el tema sigue siendo motivo de consultas.

Si no utilizamos el sistema de avatares que es un agregado relativamente reciente, la forma de agregar el código faltante es el que muestra Rosa. En cambio, si utilizamos los avatares, el código es el mismo pero, la ubicación es levemente diferente.

En todos los casos, debemos buscar el includable correspondiente, expandiendo la plantilla y allí, agregaremos las líneas marcadas que son dos bloques idénticos ya que uno se muestra en la parte superior, antes del primer comentario y el otro en la parte inferior, luego del último.

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

      <h4>
        ......................................
      </h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
          &#160;
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
        </span>
      </b:if>

      <div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        ......................................
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        ......................................
      </p>

    </b:if>

    <div id='backlinks-container'>
        ......................................
    </div>
  </div>
</b:includable>

Esta paginación es controlada pura y exclusivamente por Blogger mismo y se aplica sólo cuando hay más de 200 comentarios en una entrada.

Como todo lo que se agrega de modo automático, las posibilidades de personalización son pocas sin embargo, el código es editable y podemos modificarlo un poco. Para eso, debemos entender qué significa cada cosa y eso es bastante simple, sólo son cuatro enlaces de texto:

<data:post.oldestLinkText/> es el texto «El más antiguo
<data:post.olderLinkText/> es el texto ‹Más antiguo
<data:post.commentRangeText/> es el texto con la cantidad (por ejemplo 201 - 400 de 443)
<data:post.newerLinkText/> es el texto Más reciente›
<data:post.newestLinkText/> es el texto El más reciente»
&#160; es un caracter espacio

Como cualquier otro texto por defecto, podemos cambiarlos e incluso, colocar todo el SPAN dentro de un DIV para luego controlarlo con CSS:

<div class='paginacioncomentarios'>
  <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> texto al primer comentario </a>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> texto a la página anterior </a>
    <data:post.commentRangeText/>
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> texto a la página siguiente </a>
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> texto al último comentario </a>
  </span>
</div>

¿Podríamos usar una imagen? Sí, en lugar de poner el texto, colocamos una etiqueta IMG como lo haríamos con cualquier otro enlace.

Y por último, algo de CSS para modificar la parte gráfica:

.paginacioncomentarios { /* el div contenedor */
  text-align: center;
}
.paging-control-container {  /* sobrescribimos las propiedades por defecto de Blogger */
  float: none !important;
  font-family: Tahoma;
  font-size: 12px;
  margin: 0 !important;
}
.paging-control-container a { /* los enlaces */
  margin: 0;
  padding: 0 10px;
}
.paging-control-container a:hover {
  /* cualquier propiedad */
}
.unneeded-paging-control {
  /* si queremos que los enlaces que no se utilizan no se vean en absoluto, usamos display:none; */
}

Tweeties
	Contiene 12 íconos de 32x32, 48x48 y 80x80, en formato PNG.descargar

Twitter-Icons
	Contiene 8 íconos de 126x126 y 256x256, en formato PNG.descargar

TWcollagist
	Contiene 43 íconos de iferentes tamaños, en formato PNG.descargar

Twitter by Kamarashev
	Contiene 33 íconos de 32x32, 48x48, 128x128 y 256x256, en formato PNG.descargar

TweetMyWeb by LazyCrazy
	Contiene 10 en formato PNG.descargar

Twitter-Birds by SpoonGraphics
	Contiene 4 íconos en formato PNG.descargar

¿Qué puede decirse de PhotoFaceFun?

Que es eso, un sitio con muchos efectos para jugar, agergándolos a cualquier imagen de formato JPG.

Esta es otra variante de las Tablas de Contenido que, en lugar de mostrar las entradas ordenadas por categoría, lo hace ordenándolas por fecha.

Click para ver el ejemplo online.

Como la anterior, lo razonable es crear una página estática y agregar el código donde lo único que debemos modificar es la URL de nuestro sitio y si lo deseamos, el número de entradas a mostrar:

<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://miblog.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

La personalización no es tan sencilla ya que no utiliza clases y por lo tanto, para identificar las etiquetas deberemos encerrar toda nuestra entrada en alguna estiqueta con un ID, por ejemplo:

<div id="tablafechas">
  ... aquí ponemos todo ...
</div>

Con eso, podríamos agregar las propiedades para cada elemento:

<style>
#tablafechas { /* es el DIV contenedor /* }

/* las fechas /*
#tablafechas p { ... }
#tablafechas p a { ... }
#tablafechas p a:hover { ... }

/* el contenido de cada sector es una lista  /*
#tablafechas ul { ... }
#tablafechas li { ... }
#tablafechas li a { ... }
#tablafechas li a:hover { ... }
</style>

REFERENCIAS:abu-farhan.com/

Y seguimos jugando con esto del CSS3, viendo que las cosas se ponen muy interesantes porque no parece haber límites a la imaginación.

Esta vez, se trata de dos experimentos de W3avenue que crean acordeones desplegables sin necesitad de scripts de ninguna clase y que, para colmo, funcionan en todos los navegadores, incluyendo Internet Explorer. Uno de ellos genera un acordeón vertical y el otro un acordeón horizontal. En ambos casos, la página del autor nos facilita la descarga de los demos; un archivo CSS y un archivo HTML.

El HTML es la parte simple, sólo son listas de este tipo:

<ul>
  <li>
    <h3>Título 1</h3>
    <div> ... el contenido ...</div>
  </li>
  <li>
    <h3>Título 2</h3>
    <div> ... el contenido ...</div>
  </li>
  <li>
    <h3>Título 3</h3>
    <div> ... el contenido ...</div>
  </li>
</ul>

La única diferencia entre los dos modelos es que las colocamos dentro de DIVs que tienen una clase diferente:

<div class="verticalaccordion">
  ... aquí ponemos la lista y se generará un acordeón vertical ...
</div>

<div class="horizontalaccordion">
  ... aquí ponemos la lista y se generará un acordeón horizontal ...
</div>

Hasta acá, no debería haber problemas; puede haber tantas pestañas como se nos de la gana y el contenido de cada una es cualquier código HTML válido.

Lo que las diferencia es el CSS que es bastante sofisticado. El más simple y flexible es el del acordeón vertical:

<style>
.verticalaccordion>ul { /* este es el DIV contenedor que dimensionamos y en este caso lo centramos */
  margin: 0 auto;
  padding: 0;
  list-style: none;
  width: 500px;
}
.verticalaccordion>ul>li { /* definimos cada item de la lista  */
  display: block;
  height:40px; /* la altura de las pestañas */
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-align:center;
  width: 500px;
  /* la parte personalizable */
  background-color:#303941;
  transition: height 0.3s ease-in-out;
  -moz-transition: height 0.3s ease-in-out;
  -webkit-transition: height 0.3s ease-in-out;
  -o-transition: height 0.3s ease-in-out;
}
.verticalaccordion>ul>li>h3 { /* el titulo de cada pestaña   */
  display: block;
  margin: 0;
  padding: 10px;
  height: 19px;
  /* la parte personalizable */
  color: #000;
  border-top:1px solid #303941;
  font-family: Lucida Grande;
  font-size:20px;
  text-decoration:none;
  text-transform:uppercase;
  background: #CCC;
  background: -moz-linear-gradient( top, #999999, #cccccc);
  background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
}
.verticalaccordion>ul>li>div { /* el contenido oculto */
  margin: 0;
  overflow: auto;
  padding: 10px;
}
.verticalaccordion>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */
height: 100%;
}
.verticalaccordion:hover>ul>li:hover>h3 { /* efecto hover sobre los títulos */
  color: #FFF;
  background: #000;
  background: -moz-linear-gradient( top, #454545, #000000);
  background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
}
.verticalaccordion>ul>li>h3:hover {
  cursor:pointer;
}
</style>

Y este será el resultado:

• Mi primer ejemplo

  Suspendisse sed lacus eget urna tincidunt aliquet. Cras dignissim facilisis ligula non semper! Donec porta adipiscing bibendum. Integer sit amet sem at elit luctus faucibus. Sed sollicitudin sem sed velit euismod rutrum. Aliquam fringilla elit et enim dictum sodales. Fusce augue magna, vestibulum rhoncus vehicula vitae, interdum ac purus! Aenean tellus dolor, vulputate in congue sit amet, dignissim eu erat. Nam dapibus, mauris dictum auctor tempus, sem nunc volutpat nisl, at fermentum odio quam sit amet est. Aliquam et nisl eu elit bibendum malesuada.

• Una imagen

  

  café ... mucho café

• Buscador

  
  

El acordeón horizontal tiene diferencias importantes, una de ellas es que debemos establecer su altura como fija así que el resultado es menos flexible:

<style>
.horizontalaccordion>ul { /* este es el DIV contenedor que dimensionamos y en este caso lo centramos */
  margin: 0;
  padding: 0;
  list-style:none;
  height: 300px;
}
.horizontalaccordion>ul>li { /* definimos cada item de la lista */
  display: block;
  float: left;
  height: 300px;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 40px;
  /* la parte personalizable */
  background:#303941;
  transition: width 0.3s ease-in-out;
  -moz-transition: width 0.3s ease-in-out;
  -webkit-transition: width 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out;
}

.horizontalaccordion>ul>li>h3 { /* el titulo de cada pestaña */
  display: block;
  float: left;
  margin: 0;
  padding: 10px;
  height: 19px;
  width: 280px;
  /* la parte personalizable */
  border-left: 1px solid #303941;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  background:#CCC;
  white-space: nowrap;
  /* los efectos  para los diferentes navegadores */
  -moz-transform: rotate(90.0deg) translate(-40px,0px);
  -moz-transform-origin: 0 100%;
  -o-transform: rotate(90.0deg) translate(-40px,0px);
  -o-transform-origin: 0 100%;
  -webkit-transform: rotate(90.0deg) translate(-40px,0px);
  -webkit-transform-origin: 0 100%;
  transform: rotate(90.0deg) translate(-40px,0px);
  transform-origin: 0 100%;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)" "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
  background: -moz-linear-gradient( top, #999999, #cccccc);
  background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}
.horizontalaccordion>ul>li>div {  /* el contenido oculto */
  display: none;
  float: left;
  height: 280px;
  margin: 0;
  overflow: auto;
  padding: 10px;
  position: relative;
  width: 320px;
  left: 40px;
  top: -40px;
  *left:0px; *top:0px; /* esto es necesario para evitar problemas en IE7 */
}
.horizontalaccordion>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */
  overflow: hidden;
  width: 380px;
}
.horizontalaccordion:hover>ul>li:hover>div {
  display: block;
}
.horizontalaccordion:hover>ul>li:hover>h3 { /* efecto hover sobre los títulos */
  background: #000;
  color: #FFF;
  background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
  background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)" "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
}
.horizontalaccordion>ul>li>h3:hover {
  cursor: pointer;
}
</style>

Y esto es lo que veremos:

• Mi primer ejemplo

  Suspendisse sed lacus eget urna tincidunt aliquet. Cras dignissim facilisis ligula non semper! Donec porta adipiscing bibendum. Integer sit amet sem at elit luctus faucibus. Sed sollicitudin sem sed velit euismod rutrum. Aliquam fringilla elit et enim dictum sodales. Fusce augue magna, vestibulum rhoncus vehicula vitae, interdum ac purus! Aenean tellus dolor, vulputate in congue sit amet, dignissim eu erat.

• Una imagen

  

  café ... mucho café

• Buscador

  
  

Es usual que saquemos partido de las posibilidades que nos dan los códigos condicionales de Blogger y ocultemos determinados elementos para que, por ejemplo, sólo se muestren en las páginas individuales pero, en determinadas condiciones, eso hace que al entrar en Diseño | Elementos de la página, el elemento condicionado no se vea y por lo tanto, editarlo se hace complicadísimo.

Ese es el problema que plantea Malina y debo confesar que siempre lo vi como irresoluble pero, aparentemente, tiene una solución que habría que probar y que se puede aplicar en las las plantillas normales.

Las plantillas originales suelen tener un sector dentro de <b:skin> </b:skin> que es algo muy extraño y que se identifica con:

/** Page structure tweaks for layout editor wireframe */

Allí vemos reglas de estilo que son las que controlan la forma en que se verá la página de diseño donde podemos editar los elementos. En las plantilla Mínima sólo dice:

body#layout #header {margin-left: 0px; margin-right: 0px;}

Son definiciones complicadas de optimizar y no hay métodos generales; todo debe hacerse a ojo y utilizando el viejo sistema de prueba y error.

Es con eso que podríamos resolver el problema de los elementos ocultos. Por ejemplo, si tuviéramos esta condición que oculta la sidebar y sólo la muestra en las páginas individuales:

<b:if cond='data:blog.pageType != "item"'>
  <style>
    #sidebar-wrapper {display:none;}
</style>
</b:if>

Podríamos hacerla visible en nuestra página de diseño, cambiando la condición de este modo:

<b:if cond='data:blog.pageType != "item"'>
  <style>
    #sidebar-wrapper {display:none;}
    body#layout #sidebar-wrapper {display:block !important;}
  </style>
</b:if>

Lo que hemos hecho es agregar una nueva regla de estilo que afectará sólo esa parte interna de Blogger; la forma en que se verá el blog no cambiará en absoluto. En términos generales, la sintaxis sería:

body#layout #id_elemento {display:block !important;}

donde sólo deberemos cambiar el ID por el de la etiqueta que hayamos ocultado.

Cada vez que pretendo mostrar el nuevo botón de Twitter ... deja de funcionar y aparecen ventanas de advertencia. Obviamente, aún no parece funcionar bien pero bueno, tengamos esperanza en que alguna vez lo haga.

La idea es que este botón provisto por el mismo Twitter, reemplace otros servicios como Tweetmeme

Si vamos a la página oficial del Botón de Twittear, veremos las opciones disponibles que incluyendo el estilo gráfico, textos adicionales, idioma, etc:

El resultado final será un código que conviene colocarlo sólo en las entradas individuales, incluido dentro de alguna etiqueta que luego, nos permita ubicarlo con precisión; por ejemplo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='twittersharebutton'>
<a class='twitter-share-button' data-count='horizontal' data-lang='es' data-via='nombre' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</b:if>

De ese modo podremos agregar el estilo en el CSS de la plantilla con cualquier propiedad:

.twittersharebutton { float: right; height: 20px; width: 110px; }

Del mismo modo, si no queremos usar nuestras propias imágenes, en lugar de utilizar el script, podemos agregar un enlace simple (más información):

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='twittersharebutton'>
<a expr:href='&quot;http://twitter.com/share?text=&amp;&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;via=nombre&amp;related=miCuentaTwitter&quot;'>
<img src='URL_imagen' />
</a>
</div>
</b:if>

REFERENCIAS:El escaparate de Rosa