Y hacia allá vamos ...

PostRank es un servicio de estadísticas orientado a las redes sociales que fue adquirido por Google a mediados de este año y por lo tanto, está en pleno cambio. Entre esos cambios han incluido la posibilidad de agregar un gadget que muestra una lista con las entradas más populares de cualquier blog ... o lo que ellos han evaluado como más populares, claro.

Para quien le gusten estas cosas, basta entrar en la página correspondiente, configurar las opciones y luego, copiar y pegar el código que nos dan, allí donde queramos que se vea.

Quienes usen Wordpress, también disponen de un plugin que hace exactamente lo mismo.

Como el el gadget se adapta al ancho del contenedor donde será insertado, tal vez convenga que se incluya todo el código en un DIV que puede ser dimensionado y centrado; por ejemplo:

<div style="margin:0 auto;width:350px;">
  <!-- y acá pegamos el código que nos dan -->
</div>

Powered by Postrank

CSS3 Lightbox es una fantástica idea de codrops que hace uso de la pseudo-clase target por lo tanto, no funcionará en versiones anteriores a IE9 pero, de todos modos, vale la pena investigar porque permite crear algo así como una ventana modal para mostrar imágenes, son bastante sencillez.

Acá, me he limitado a "destruir" un poco el código de tal modo de hacerlo independiente pero, los demos originales pueden ser descargados del sitio del desarrollador y entendiéndolos, se puede jugar con diseños personales o estructuras diferentes.

cerrar

Básicamente, en este ejemplo, el HTML es el mismo que muestran en sus demos aunque le puse otros nombres a las clases para no confundirme; en lugar de usar una lista, como no quiero crear un álbum sino tener la posibilidad de mostrar esa ventana modal en cualquier circunstancia, uso un DIV:

<div class="vmcc3" id="ejemplo-1">
  <!-- la miniatura visible -->
  <a href="#image-1">
    <img src="URL_miniatura" />
  </a>
  <!-- la imagen completa oculta -->
  <div class="vmoverlay" id="image-1">
    <img src="URL_imagen" />
    <a href="#ejemplo-1" class="vmcerrar">cerrar</a>
  </div>
</div>

Alojando las imágenes en Picasa es bastante sencillo tener las dos direcciones URLs, la de la miniatura y la de la imagen completa.

El único detalle a tener en cuenta al crear el HTML es el ID que debe ser único (no repetido) y que se coloca en el DIV oculto y al que se debe hacer referencia en el enlace de la miniatura, anteponiéndole el carácter # ya que eso es l oque hará que funcione la pseudo-clase target.

A esto, le agregué otro ID al DIV contenedor que se utiliza en el enlace CERRAR para evitar que la página se desplazara demasiado; es algo que hay que perfeccionar y ver alternativas.

cerrar

Y ahora el CSS que incluye animaciones varias:

<style>
  /* el contenedor */
  .vmcc3 {
    display: inline-block;
    position: relative;
  }
  .vmcc3 > a, .vmcc3 > a img {display: block;}
  .vmcc3 > a {position: relative;}
  /* el div oculto donde se mostrará la imagen completa y ocupará toda la pantalla */
  .vmoverlay{
    background-color: rgba(0, 0, 0, 0.9);
    height: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    text-align: center;
    top: 0;
    width: 0;
    z-index: 99;
  }
  /* el enlace para cerrar la ventana modal es un texto pero puede ser una imagen */
  .vmoverlay a.vmcerrar {
    color: #FFF;
    font-size: 20px;
    left: 50%;
    line-height: 26px;
    margin-left: -25px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 70px;
    z-index: 1001;
    -moz-transition: opacity 0.3s linear 1.2s;
    -webkit-transition: opacity 0.3s linear 1.2s;
    -o-transition: opacity 0.3s linear 1.2s;
    -ms-transition: opacity 0.3s linear 1.2s;
    transition: opacity 0.3s linear 1.2s;
  }
  /* la imagen de tamaño completo */
  .vmoverlay img {
    max-height: 100%;
    position: relative;
  }
  /* la pseudo-clase es la que abrirá la ventana modal */
  .vmoverlay:target {
    bottom: 0;
    height: auto;
    padding-top: 100px;
    right: 0;
    width: auto;
  }
  /* las animaciones */
  .vmoverlay:target img {
    -moz-animation: fadeInScale 1.2s ease-in-out;
    -webkit-animation: fadeInScale 1.2s ease-in-out;
    -o-animation: fadeInScale 1.2s ease-in-out;
    -ms-animation: fadeInScale 1.2s ease-in-out;
    animation: fadeInScale 1.2s ease-in-out;
  }
  .vmoverlay:target a.vmcerrar { opacity: 1;}
  @-webkit-keyframes fadeInScale {
    0% { -webkit-transform: scale(0.6); opacity: 0; }
    100% { -webkit-transform: scale(1); opacity: 1; }
  }
  @-moz-keyframes fadeInScale {
    0% { -moz-transform: scale(0.6); opacity: 0; }
    100% { -moz-transform: scale(1); opacity: 1; }
  }
  @-o-keyframes fadeInScale {
    0% { -o-transform: scale(0.6); opacity: 0; }
    100% { -o-transform: scale(1); opacity: 1; }
  }
@-ms-keyframes fadeInScale {
    0% { -ms-transform: scale(0.6); opacity: 0; }
    100% { -ms-transform: scale(1); opacity: 1; }
  }
  @keyframes fadeInScale {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
</style>

En el demo original podrán ver muchas más alternativas tales como agregar títulos y textos así que parecería que todo se reduce a ir probando y viendo que sale:

cerrar

cerrar

En free-themes no hay muchas cosas pero son suficientes para divertirse un rato.

A Himsomnio le ha gustado la parte de cursores tipo mostacho ya que dice que serían perfectos para este blog pero, tengo mis dudas al respecto. De todos modos, acá están; son cinco modelos, cinco imágenes en formato PNG que puden ser utilizadas en la propiedad cursor de cualquier etiqueta aunque debe tenerse en cuenta que no serán visibles en Internet Explorer ya que en ese navegador, las imágenes de los cursores alternativos deben ser de formato CUR.

De todos modos, la sintaxis general de la propiedad es igual en todos los navegadores:

cursor:url(URL_imagen), auto;

Así que basta usar las imágenes que ellos nos proveen:

y agregar la propiedad a alguna clase CSS:

.bigote1 { cursor:url(http://free-themes.info/cursor/mustache/mustache2.png), auto }

Feliz Navidad para todos !!!Feliz Navidad

Esta es otra variante del uso que podemos darle a las propiedades :after y :before que funcionará sin demasiados problemas en cualquier navegador incluyendo IE8.

La idea de css-tricks es generar una especie de flecha o señalador de este estilo:

Pero, como la parte interesante es la forma en que está armada la parte de los títulos, me limitaré a mostrar sólo esa parte aunque el resto puede ser consultado en la página del autor que incluye una descarga con el ejemplo completo.

El HTML es muy sencillo y podría adaptarse perfectamente a los títulos de la sidebar de Blogger pero, ese es otro tema:

<div class="module blue">
  <h2>Título de este módulo <a href="#">Azul</a></h2>
</div>
<div class="module yellow">
  <h2>Otro título <a href="#">Amarillo</a></h2>
</div>
<div class="module green">
  <h2>Lo mismo para el verde <a href="#">Verde</a></h2>
</div>
<div class="module red">
  <h2>Y para cualquier color <a href="#">Rojo</a></h2>
</div>

Son DIVs con dos clases CSS, module es la clase genérica y la otra varía y en este caso tiene el nombre del color; estas últimas son lasque se usarán para diferenciar unos de otros.

Lo básico para este ejemplo,sería esto:

<style>
.module h2 { /* el rectágulo de la izquierda con el título */
  background-color: #BBB;
  border-radius: 20px 0 0 20px;
  color: #FFF;
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  text-shadow: 2px 1px 1px #222;
}

.module h2 a { /* el rectángulo de la derecha con el subtítulo */
    /* el color del fondo y el borde son iguales al color de fondo de la página */
    border-left: 5px solid #101921;
    color: #101921;
    float: right;
    /* la fuente del texto */
    font-size: 18px;
    text-decoration: none;
    text-shadow: none;
    /* efectos varios incluyendo una transición */
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover { /* se agranda al poner el cursor encima */
  padding: 0 32px;
}

/* las reglas genéricas de after y before */
.module h2 a:before, .module h2 a:after {
    content: "";
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #101921; /* el color es igual al fondo de la página */
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}

/* y los colores de cada uno de los enlaces */
.module.blue h2 a {background-color: #A2D6EB;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D6EB;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.green h2 a {background-color: #9CF1A4;}
.module.green h2 a:hover {background: #BBFFCF;}
.module.green h2 a:after {border-right: 6px solid #9CF1A4;}
.module.green h2 a:hover:after {border-right-color: #BBFFCF;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}
</style>

Título de este módulo Azul

Otro título Amarillo

Lo mismo para el verde Verde

Y para cualquier color Rojo

Agregar scripts es cosa de todos los días, hay que copiar, pegar y rogar que funcionen. En general, no hay problemas con eso pero, nunca está de más entender la sintaxis y, si es posible, mejorarla.

Es esto lo que nos recuerda un artículo de CSS Tricks y muestra las variantes que solemos encontrar en los distintos ejemplos que pululan en la web.

¿Cuál debemos usar? En realidad, casi cualquiera de ellos porque los navegadores las entienden todas y no se hacen problemas por los detalles que sólo quedan para ser discutidos por los puristas.

Lo cierto es que para agregar un script, basta poner la etiqueta y no es necesario ningún atributo extra aunque para la w3.org sigue siendo obligatorio excepto si se utiliza un documento de tipo HTML5:

<script>
  ....... el código .......
</script>

Si queremos ser prolijos, podemos agregar el atributo type aunque en realidad, este sólo es necesario cuando el código no es JavaScript cosa bastante inusual:

<script type="text/javascript">
  ....... el código .......
</script>

Lo que no deberíamos usar más es el atributo language; es totalmente innecesario y es considerado obsoleto:

<script language="javascript">
  ....... el código .......
</script>

<script type="text/javascript" language="javascript">
  ....... el código .......
</script>

En las plantillas de Blogger, tenemos una restricción extra, como se trata de un documento de tipo XHTML, ciertos caracteres como < > y & están "prohibidos" cuando se utilizan fuera de ciertos contextos y por eso, debemos agregar CDATA, para evitar que el sistema nos marque un error o cambie las comillas por entities como &quot;. Hacerlo de este modo, evitará que el código se "ensucie" o que, simplemente, no funcione:

<script type="text/javascript">
  //<![CDATA[
    ....... el código .......
  //]]>
</script>

Pero ... en Blogger siempre hay peros; esto sólo es válido en la plantilla misma, no lo es cuando se trata de elementos de tipo HTML o si agregamos scripts en las entradas.

Lo que lleva a recordar que no siempre es necesario que los scripts a utilizar estén en la plantilla; por el contrario, cuando se trata de cosas eventuales, efectos que usamos de tanto en tanto, podemos intentar agregarlas directamente en la entrada y de ese modo, ayudaremos a que nuestro sitio se abra con mayor velocidad ya que no se cargarán cosas innecesarias.

En un tiempo, esto era complicado porque había que escribir todo el script en una sola línea pero, en los nuevos editores de Blogger ese problema ya no existe y el script puede ser escrito de modo normal. Sin embargo, hay que ver caso por caso ya que hay ocasiones en que determinados caracteres como < siguen limitándonos ya que las reglas de Blogger son poco claras y las cambian cuando quieren.

A partir de enero, Microsoft comenzará a implementar una actualización automática para tratar de terminar de una buena vez con Internet Explorer 6 aunque eso tendrá un efecto relativo ya que afectará solamente a los usuarios que tengan activadas las actualizaciones automáticas de Windows y además, como cualquier otra, podrá ser cancelada.

De todos modos, Microsoft espera que de este modo, el uso de ese navegador se reduzca del 8% actual a menos del 1% lo cual lo relegaría a ser una pieza arqueológica; algo que ya es pero, aún no termina de ser asimilado por muchos usuarios.

Quienes usen XP serán actualizados a Internet Explorer 8 y quienes usen Vista o Windows 7 a la versión 9. De ahí en adelante, el navegador tendrá la opción de actualizarse automáticamente.

Muchos dicen ... yo no lo uso ... da igual, es parte de Windows así que, de todos modos, actualicen sí o sí.

Christmas icons by gakuseisean

descargar

The Real Christmas RSS Icons

descargar

Christmas Icon Set by IconEden

descargar

Christmas icons

descargar

More Christmas icons

descargar

Craftyslide es un pequeño plugin para jQuery que nos permite crear galerías de imágenes con mucha sencillez ya que basta agregarlas en una lista y llamar a la función, sin importar su tamaño original.

Para utilizarlo, basta descargar el ZIP que contiene el ejemplo básico, tener jQuery en nuestra plantilla y agregar el plugin y el CSS antes de </head> ya sea copiando y pegando directamente el código o utilizando archivos externos:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<link rel='stylesheet' href='URL_craftyslide.css' />

<script src='URL_craftyslide.min'></script>

El CSS sólo requiere que cambiemos una línea que es la que contiene la imagen que se utiliza para paginar la galería, subiendo esa imagen a cualquier servidor y colocando la nueva URL en esta regla de estilo:

#pagination li a {
  .......
  background: transparent url(URL_pagination.png) repeat 0 0;
}

Obviamente, cualquier otra parte del CSS puede ser personalizada, y en este ejemplo, he hecho eso con la paginación de tal modo que pueda verse correctamente, sin importar la cantidad de imágenes que tenga la galería.

#slideshow { /* es el DIV que contiene la galería */
  border: 15px solid #FFF;
  box-shadow: 0 3px 5px #999;
  margin: 0;
  padding: 0;
  position: relative;
}
#slideshow ul { /* la lista que contendrá las imágenes */
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
#slideshow ul li { /* cada item de la lista */
  left:0;
  list-style-type:none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
}
#pagination { /* la paginación inferior optativa */
  clear: both;
  margin: 25px auto 0;
  padding: 0;
  text-align: center;
}
#pagination li { /* cada item de la paginación */
  display: inline;
  list-style-type: none;
  margin: 0 2px;
}
#pagination li a { /* cada imagen de la paginación es un enlace */
  background: transparent url(URL_pagination.png) repeat 0 0;
  display: inline-block;
  height: 10px;
  text-indent: -10000px;
  width: 10px;
}
#pagination li a.active { /* la imagen cambia cuando se activa */
  background-position:0 10px;
}
.caption { /* el texto optativo que se coloca en el atributo title */
  background: rgba(0,0,0,0.6);
  border-top: 1px solid #000;
  color: #FFF;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: lighter;
  left: 0;
  margin: 0;
  padding: 10px;
  position: absolute;
  width: 100%;
  z-index: 1;
}

Lo utilizamos colocando la lista allí donde se nos ocurra mostrar la galería:

<div id="slideshow">
  <ul>
    <li><img src="URL_IMAGEN_1" title="text imagen 1" /></li>
    <li><img src="URL_IMAGEN_1" title="text imagen 1" /></li>
    <!-- y seguimos agregando tantas etiquetas LI como querra,os -->
  </ul>
</div>

Y al final, llamamos a la función de este modo:

<script> $("#slideshow").craftyslide(); </script>

o establecemos parámetros:

<script>
 $("#slideshow").craftyslide({
    'width': 550,
    'height': 350,
    'pagination': true,
    'fadetime': 500,
    'delay': 2500
  });
</script>

donde:
width y height serán el tamaño total (por defecto 640x400)
pagination puede ser false en cuyo caso, funcionará como un slideshow
fadetime es el tiempo de demora entre dos imágenes
delay es el tiempo del slideshow si elegimos esa opción

Esta es una forma sencilla de agregar un efecto de reflejo en las imágenes, desarrollada por xhtml-lab.com. Está basada en algo simple, repetir las imágenes e invertir la de abajo usando para eso, la propiedad transform y, eventualmente, el filtro flipv en las versiones anteriores a IE9.

Si a esa imagen inferior, se le aplica opacidad, el resultado es algo similar a un reflejo.

Este sería el HTML básico:

<div class="image-block">
  <img src="URL_IMAGEN"/>
  <div class="reflection">
    <img src="URL_IMAGEN"/>
  </div>
</div>

Y estas las reglas de estilo:

<style>
  .image-block {
    height: 230px;
    overflow: hidden;
    width: 200px;
  }
  .reflection {
    position: relative;
  }
  .reflection img {
    opacity: 0.2;
    -moz-transform: scaleY(-1); /* Firefox */
    -webkit-transform: scaleY(-1); /* Chrome/Safari */
    -o-transform: scaleY(-1); /* Opera */
    -ms-transform: scaleY(-1); /* IE9 */
    transform: scaleY(-1); /* w3c */
    filter: flipv alpha(opacity='20'); /* IE8 */
  }
</style>

En la clase image-block defino width con el ancho de la imagen y height con un valor un poco superior al alto de la imagen para que, aplicando overflow: hidden; este DIV se corte.

En el artículo original, a todo esto se le agrega un DIV extra que se posiciona de modo absoluto sobre la imagen inferior y sobre la que se aplican ciertos filtros extras como gradientes. Esto puede dar cierto trabjo si el fondo no es oscuro pero, puede intentarse y ver qué sale:

<div class="image-block">
  <img src="URL_IMAGEN"/>
  <div class="reflection">
    <img src="URL_IMAGEN"/>
    <div class="reflection-over"></div>
  </div>
</div>

</style>
 reflection-over {
    position:absolute;
    top: 0;
    left: 0;
    height: 120px;
    width:200px;
    background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);
    background-image:   -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);
    background-image:     -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));
    filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);
}
</style>

Las transiciones en CSS son la forma de cambiar una o varias propiedades de una etiqueta de tal modo de pasar de un valor original a otro diferente, con un efecto tal que ese cambio no se realiza de manera instantánea sino que demora un cierto tiempo y por lo tanto, parece estar animado.

Lo más simple para ver esto es un ejemplo donde cambiamos el ancho: de un rectángulo; normalmente, podríamos hacer algo así:

<style>
.rectangulo { border: 1px solid #444; margin: 0 auto; height: 100px; }
.rectangulo :hover {width: 450px;}
</style>

<div class="rectangulo"> </div>

Al poner el cursor encima del rectángulo, este se amplia porque cambiamos el valor de width.

Para animarlo con una transición, hacemos lo mismo y agregamos la propiedad transition con los prefijos que por ahora, sigue necesitando para que sea comprendida por los distintos navegadores:

.rectangulo {
  .......
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}

El resultado, será el mismo excepto que el cambio, se realizará "lentamente" provocando ese efecto de animación.

Facebook ha ampliado su interacción con los sitios webs externos, permitiendo que se agregue un nuevo botón denominado Subscribe que permite que los usuarios, puedan suscribirse a las actualizaciones públicas de cualquier perfil, del mismo modo que se peude hacer en la misma red social (más información)

Puede ser agregado usando un IFRAME:

<iframe src="//www.facebook.com/plugins/subscribe.php?href=https%3A%2F%2Fwww.facebook.com%2Fminombre&layout=standard&show_faces=true&colorscheme=light&font=tahoma&width=450&appId=APP_ID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe>

o, si ya tenemos el script del API incorporado, podemos usar el código XFBML:

<fb:subscribe href="https://www.facebook.com/minombre" show_faces="true" font="tahoma" width="450"></fb:subscribe>

En cualquiera de los casos, hay que recordar que la URL a colocar es la de nuestro perfil ya que este botón no es para pages y que layout es el tipo de botón y puede ser standard (mínimo 225x35 pixeles), button_count (mínimo 90x20 pixeles) o box_count (mínimo 55x65 pixeles)

Asimismo, ya hace un tiempo, Twitter ha incorporado la posibilidad de agregar un botón extra llamado Follow Button que, a diferencia del común que permite compartir enlaces, es un botón pensado para ayudar a que los visitantes, se hagan seguidores de una determinada cuenta.

Las opciones son sencillas ya que casi no tiene, basta seleccionar la cuenta, si se va a visualizar sobre fondos claros u oscuros, definir si se mostrará la cantidad de seguidores y nada más.

Luego, hay que copiar el código que ellos nos indican y pegarlo allí donde se quiera verlo:

<a href="http://twitter.com/vagabundia" class="twitter-follow-button" data-lang="es">Follow @vagabundia</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

Follow @vagabundia

CSS3 Walking Man es un experimento de Andrew Hoyer sobre el que no se puede decir mucho, simplemente, hay que verlo en acción y, quien quiera más detalles, en el sitio del desarrollador está explicado paso a paso.

Funciona en Firefox, Safari, Chrome pero no en Internet Explorer. Simplemente, es increíble que todo sea hecho usando CSS: VER EXPERIMENTO.

Y para quien no pueda apreciarlo, este es el video:

Hacer una página web lleva su tiempo. Destruirla es rápido. Bueno, tampoco exageremos, podemos simular esa destrucción, sacarnos las ganas de ser un poco perversos y listo. Basta usar algunos de los tantos scripts que hay para eso y en este caso, los que vienen a ayudarnos son esos pajaritos de ceño fruncido que parece que están de moda.

A las múltiples versiones de los Angry Birds, ahora se le agrega esta posibilidad que ofrece Nokia Argentina. Mediante un bookmarklet que podemos agregar a los marcadores, haremos que los tan mentados pajaritos comiencen su tarea destructiva en cualquier página web a la que accedamos. Una vez que lo tenemos, hacemos click en él y esperamos un poco porque suele tardar un rato en cargarse. Luego, simplemente usamos el ratón para apuntar y lanzalos.

Quien quiera probarlo acá mismo, sólo debe hacer click en este enlace ... pero no abusen.

<a href="javascript:var%20s%20=%20document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src='http://www.nokia.com.ar/NOKIA_ARGENTINA_78/Campaigns/PotenciaTuExperiencia/games/angryBirds/angrybirds.js?201111021138';void(0);"> jugar </a>

REFERENCIAS:labnol.org

Los selectores condicionales permiten detectar casi cualquier cosa y de ese modo, mostrar las etiquetas con ciertos efectos gráficos diferenciados en función de alguna regla sin tener que editar las etiquetas HTML. Si a eso le sumamos la posibilidad de agregar contenido mediante CSS, las opciones disponibles se multiplican.

Para agregar contenido usamos la propiedad content que sólo requiere de un valor:

content: "algo";

donde ese algo> puede ser un texto:

content: "un texto cualquiera";

una imagen:

content: url(UNA_IMAGEN);

el contenido de alguno de los atributos de la etiqueta (href, title, rel):

content: attr(rel);

o una combinación de ellos, separados por un espacio:

content: url(UNA_IMAGEN) " un texto";

De este modo, sería sencillo detectar los enlaces que se abren en una ventana separada (target="_blank") y diferenciarlos gráficamente de aquellos que no lo hacen. Para hacer algo así, nos valemos de los pseudo-elementos :after y :before que son los que nos facilitarán la tarea de agregar ese contenido adelante o atrás de nuestros enlaces.

Vamos a un ejemplo. Tenemos dos enlaces de este tipo:

<a href="#">enlace normal</a>
<a href="#" target="_blank">enlace a nueva página</a>

Crearemos una regla que los diferencie y agregue una imagen al que tiene un atributo target _blank y la pondremos a la izquierda, separada unos pixeles del texto:

a[target="_blank"]:before {
    content: url(UNA_IMAGEN);
    margin-right: 3px;
}

enlace normal
enlace a nueva página

Lo mismo podemos hacer usando textos con caracteres "raros"; para eso, debemos usar su valor hexadecimal antecediéndolo con una barra inclinada \ (ver tabla de caracteres):

content: "\3E";
content: "\203A";

Otro ejemplo:

enlace normal
enlace a nueva página

Acá usamos muchas propiedades extras, establecemos fuentes, fondos, colores y cualquier otro detalle que se nos ocurra para que ese carácter agregado se vea "distinto" y le adosamos efectos hover:

a.[target="_blank"]:before {
  background-color: #FFF;
  border-radius: 6px;
  color: #000;
  content: "\203A";
  display: inline-block;
  font-family: Verdana;
  font-size: 18px;
  font-weight: bold;
  line-height: 12px;
  margin: 0 5px 0 0;
  padding: 0 2px 3px;
  text-align: center;
  vertical-align: baseline;
}
a.ejemplo2:hover {
  color: #ABC;
}
a.ejemplo2:hover[target="_blank"]:before {
  background-color: #68A;
  color: #FFF;
}

¿Y qué pasa si queremos que se muestre a la derecha en lugar de a la izquierda? En lugar de :before, usamos :after:

a.[target="_blank"]:after {
    content: url(UNA_IMAGEN);
    margin-left: 3px;
}

enlace normal
enlace a nueva página

La numeración con estilo que publican en 456 Berea Street es interesante y muy simple de aplicar. Utiliza el pseudo-elemento :before y dos propiedades de las listas que usualmente no incluimos: counter-reset y counter-increment que nos permiten generar contenido de modo automático es decir, en este caso, numerar una lista.

Vamos al ejemplo que es una variante del mostrado en CSS Tricks.

El HTML:

<dl class="numeros">
  <dt>Morbi porta facilisis leo, ut pretium elit gravida sed.</dt>
    <dd>consectetur felis</dd>
  <dt>Pellentesque malesuada sapien quis quam tincidunt.</dt>
    <dd>fringilla sed risus</dd>
  <dt>Donec scelerisque nisi ultricies felis varius luctus.</dt>
    <dd>lectus ipsum</dd>
</dl>

Y el CSS:

<style>
  .numeros { /* el contenedor es la etiqueta DL */
    background-color: #000;
    border: 1px solid #444;
    counter-reset: nombre_contador; /* ponemos el contador a cero */
    margin: 0 auto;
    padding: 20px 20px 0;
    width: 500px;
  }
  .numeros dt {
    font-size: 18px;
    position: relative;
  }
  .numeros dt:before { /* este es el número */
    content: counter(nombre_contador, decimal);
    counter-increment: nombre_contador;
    left: 0;
    position: absolute;
    top: -8px;
    /* los detalles de la fuente son a gusto de cada uno */
    background-color: #444;
    border-radius: 4px;
    color: #FFF;
    font-family: Arial;
    font-size: 48px;
    padding: 0 10px;
  }
  .numeros dd {
    color: #FFF;
    margin: 0 0 30px;
  }
  .numeros dt, .numeros dd {
    padding-left: 55px;
}
</style>

Morbi porta facilisis leo, ut pretium elit gravida sed.

consectetur felis

Pellentesque malesuada sapien quis quam tincidunt.

fringilla sed risus

Donec scelerisque nisi ultricies felis varius luctus.

lectus ipsum

¿Y para qué podría servir?

Justamente, elijo este demo porque usa las etiquetas DL DT y DD en lugar de las tradicionales etiquetas de lista (UL LI) ya que los comentarios de Blogger están armados con estas etiquetas así que, si quiseramos numerar los comentarios, podríamos utilizar este mismo esquema ya que todas estas propiedades funcionan en cualquier navegador, incluyendo IE8.

Si esa parte de nuestra plantilla tiene el código original y no hemos cambaido demasiadas cosas, bastaría agregar estas reglas antes de </b:skin>:

#comments-block {
  counter-reset: contadorcomentarios;
}
#comments-block dt {
  position: relative;
}
#comments-block dt:before {
  content: counter(contadorcomentarios, decimal);
  counter-increment: contadorcomentarios;
  position: absolute;
  right: 0;
  top: 0;
   /* las propiedades de la fuente del número */
  color: #888;
  font-family: Arial;
  font-size: 30px;
}

Y si hemos "manoseado" mucho esa parte de la plantilla, no hay problema, podemos hacer lo mismo e ir viendo qué otras propiedades debemos agregar o cambiar; en mi caso, funcionó perfectamente sin otro agregado y ahora, está aplicado a los comentarios del blog así que la numeración no depende ya de un script sino que es puro CSS.

El CSS3 nos permite agregar varios fondos en una misma etiqueta,; esto lo hacemos separándolos por comas; por ejemplo:

.demo {
  background-color: #FFF;
  background-image: url(IMAGEN1),url(IMAGEN2);
  background-repeat: no-repeat;
  background-position: left top, right bottom;
}

Como las gradientes son fondos, nada impide que las combinemos con otras imágenes:

.demo {
  background-color: #FFF;
  background-image: url(IMAGEN), -moz-linear-gradient(#FFF, #000);
  background-image: url(IMAGEN), -webkit-linear-gradient(#FFF, #000);
  background-image: url(IMAGEN), -o-linear-gradient(#FFF, #000);
  background-image: url(IMAGEN), -ms-linear-gradient(#FFF, #000);
  background-repeat: no-repeat;
  background-position: right bottom, left top;
}

Del mismo modo, podemos combinar varios tipos de gradientes, separándolas con comas:

background-image: linear-gradient(#000,#ABC,transparent), linear-gradient(right,#880, #234);

background-image: linear-gradient(#000000, #CBA, transparent), radial-gradient(#FF0, #F00,transparent);

background-image: linear-gradient(transparent, #000000, #ACA), linear-gradient(right, #DFD, #080)

Un slider es un control que permite "mover" cosas. Lo hemos visto muchas veces, por ejemplo, son lo que manejan el volumen de un video o audio y agregarlos a una web no es sencillo así que las librerías de JavaScript suelen incluir funciones especiales para que, manipularlos, se algo un poco menos dramático.

En script.aculo.us Slider Demos hay varios ejemplos de su uso que no es mucho y, tal vez, los más interesantes son aquellos que utilizan imágenes que sirven como botones para desplazarse.

<style>
  #track1-left { /* el límite izquierdo */
    background-color: #BDB76B;
    height:  12px;
    position:absolute;
    top:- 5px;
    left: 0;
    width: 1px;
  }
  #track1-right { /* el límite derecho */
    background-color: #BDB76B;
    height: 12px;
    position: absolute;
    top: -5px;
    left: 199px;
    width: 1px;
  }
  #track1 { /* el área de desplazamiento */
    background-color: #BDB76B;
  }
</style>

<div style="position:relative;">
  <!-- el slider -->
  <div id="track1" style="width:200px; height:2px;">
    <div id="track1-left"></div> <!-- el limite izquierdo -->
    <div id="track1-right"></div> <!-- el limite derecho -->
    <!-- el botón con la imagen -->
    <div id="handle1" style="width:15px; height:20px;">
      <img src="URL_slider" style="float: left;" />
    </div>
  </div>
</div>

<script>
  new Control.Slider('handle1', 'track1', { 
    onSlide: function(v) {
      // se detecta que se desplaza
    }, 
    onChange: function(v) {
      // se detecta que cambió de posición
    } 
  });
</script>

<style>
  #track2-top { /* el límite superior */
    background-color: #BDB76B;
    height: 1px;
    left: -5px;
    position: absolute;
    top: 0;
    width: 12px;
  }
  #track2-bottom { /* el límite inferior */
    background-color: #BDB76B;
    height: 1px;
    left: -5px;
    position: absolute;
    top: 199px;
    width: 12px;
  }
  #track2 { /* el área de desplazamiento */
    background-color: #BDB76B;
  }
</style>

<div style="position:relative;">
  <!-- el slider -->
  <div id="track2" style="width:2px; height:200px;">
    <div id="track2-top"></div> <!-- el limite superior -->
    <div id="track2-bottom"></div> <!-- el limite inferior -->
    <!-- el botón con la imagen -->
    <div id="handle2" style="width:19px; height:15px;">
      <img src="URL_slider.gif" style="float: left;" />
    </div>
  </div>
</div>

<script>
  new Control.Slider('handle2', 'track2', {
    axis: 'vertical',
    onSlide: function(v) {
      // se detecta que se desplaza
    }, 
    onChange: function(v) {
      // se detecta que cambió de posición
    } 
  });
</script>

Complicadito ... en fin, no es algo que tenga mucho uso; tal vez, una posibilidad interesante es la de poder cambiar las barras de desplazamiento que se ven en en cualquier elemento al que hemos dimensionado y cuyo contenido es muy grande. En Internet Explorer, las barras de desplazamiento pueden ser personalizadas utilizando CSS pero, lamentablemente, no pasa lo mismo en otros navegadores.

1. Phasellus nec urna nulla, quis cursus ante. Nullam luctus dapibus auctor!
2. Aliquam odio purus, tempus eu gravida vel, scelerisque quis mauris.
3. Vivamus viverra convallis lectus ut porttitor.
4. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
5. Pellentesque hendrerit sollicitudin elit, vitae venenatis arcu imperdiet nec.
6. Suspendisse sit amet lorem tortor.
7. Nulla congue porttitor leo, ac porttitor purus ultricies id?
8. Aliquam erat volutpat.
9. Sed ut magna sed tellus euismod lacinia eu at turpis.
10. Quisque risus arcu, sodales vitae sodales vitae, venenatis vitae diam.
11. Aliquam sagittis, quam ultrices interdum pulvinar, arcu purus ullamcorper erat, et aliquet sapien magna a velit!
12. Praesent vehicula risus eu est congue et vulputate ante egestas.
13. Aliquam posuere.

Usando Prototype + Scriptaculous y su plugin Slider que ya se carga de modo predeterminado si es que utilizamos las librerías de Google, es posible generar ese tipo de barra personalizada ... aunque no se si valdrá la pena.

De todos modos, acá hay un ejemplo:

<style>
  #scrollable2 {
    border-top: 2px solid #BDB76B;
    border-left: 2px solid #BDB76B;
    height: 120px;
    overflow: hidden;
    white-space: nowrap;
    width: 260px;
  }
  #wrap3 {
    border-left: 2px solid #BDB76B;
    height: 122px;
    left: 262px;
    position: absolute;
    top: 0;
    width: 10px;
  }
  #track3 { height: 120px; position: absolute; width: 15px; }
  #handle3 { height: 15px; width: 19px; }
  #wrap4 {
    border-top: 2px solid #BDB76B;
    height: 15px;
    left: 0;
    position: absolute;
    top: 120px;
    width: 262px;
  }
  #track4 { height: 10px; position: absolute; width:260px; }
  #handle4 { height:20px; width:15px; }
</style>

<div style="position:relative;">
  <div id="scrollable2">
    ....... acá colocaremos el contenido a mostrar  .......
    <div id="wrap3">
      <div id="track3">
        <div id="handle3"><img src="URL_imagen_slider_vertical" /></div>
      </div>
    </div>
    <div id="wrap4">
      <div id="track4">
        <div id="handle4"><img src="URL_imagen_slider_horizontal" /></div>
      </div>
    </div>
  </div>
</div>

<script>
  var slider3 = new Control.Slider('handle3', 'track3', {
    axis: 'vertical',
    onSlide: function(v) { scrollVertical(v, $('scrollable2'), slider3); }, 
    onChange: function(v) { scrollVertical(v, $('scrollable2'), slider3); }
  });
  var slider4 = new Control.Slider('handle4', 'track4', {
    onSlide: function(v) { scrollHorizontal(v, $('scrollable2'), slider4); },
    onChange: function(v) { scrollHorizontal(v, $('scrollable2'), slider4); }
  });
  function scrollVertical(value, element, slider) {
    element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));
  }
  function scrollHorizontal(value, element, slider) {
    element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
  }
  if ($('scrollable2').scrollHeight <= $('scrollable2').offsetHeight) {
    slider3.setDisabled();
    $('wrap3').hide();
  }
  if ($('scrollable2').scrollWidth <= $('scrollable2').offsetWidth) {
    slider4.setDisabled();
    $('wrap4').hide();
  }
</script>

Este es otro método sencillo para hacer que el home de un blog de Blogger no muestre las entradas sino algún tipo de presentación y, como cualquier otro, tiene sus pros y contras ya que todos ellos sólo son simulaciones incompletas (más información)

En este caso, vamos a usar la Configuración de Blogger para indicar, en la pestaña Formato, que la cantidad de entradas a mostrar en el home de nuestro sitio es cero:

Si hacemos esto, obviamente, no veremos nada de nada aunque las entradas seguirán mostrándose normalmente lo mismo que las páginas estáticas.

Lo que necesitamos ahora es aprovechar que Blogger nos permite agregar datos a las URLs sin que eso provoque errores; por lo tanto, si queremos ver completo ese blog con cero entradas en el home, podríamos usar una URL de este tipo:

miblog.blogspot.com/search?inicio

Con esas dos cosas en mente, trato de armar la plantilla.

Por ejemplo, voy a usar un blog "normal" y, justo antes de <div id='content-wrapper'> voy a poner esto que no es otra cosa que un simple enlace al blog completo:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div id='homepage'>
    <a href='miblog.blogspot.com/search?inicio'> ENTRAR </a>
  </div>
</b:if>

Los detalles del CSS dependerán de muchas cosas, sobre todo, de la idea que se quiera llevar a cabo. En este demo online también ocultaré la sidebar y todo contenedor, excepto el header. Para eso, condiciono el estilo agregando algo así:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <style>
    #content-wrapper {
      display:none;
    }
    #homepage { /* es el DIV contenedor */ }
    #homepage a { /* es el enlace */ }
  </style>
</b:if>

Como estoy ocultando todo, no debo olvidarme de hacerlo visible en la página de diseño, sino, no podré acceder a los gadgets así que entre <b:skin> y </b:skin> coloco esto:

body#layout #content-wrapper {display:block;}
body#layout #homepage {display:none;}