Circus: Cinco íconos para divertirse

Circus by Joker
	Contiene 5 íconos de 256x256, en formato PNG. descargar

jCodeCollector es un pequeño programa que funciona tanto en Windows como en Mac y Linux y que nos permite almacenar y tener ordenados snippets, es decir, porciones de códigos de todo tipo que uno va acumulando a lo largo de los años y que suelen quedar desperdigados por toda nuestra PC, escondidos, perdidos en alguna carpeta cosa que no los encontremos cuando los necesitamos.

El programa no sólo permite agregarlos sino también ordenarlos en distintas secciones, agregarles etiquetas o comentarios y posee un buscador interno que nos facilita encontrarlos.

De modo automático, reconoce distintos lenguajes (CSS, HTML, SQL, PHP, JavaScript, etc) y muestra los códigos con la sintaxis resaltada en diferentes colores, lo que incluso, hace que sea fácil encontrar errores y solucionarlos.

liteAccordion es un pequeño plugin para JQuery que nos permite agregar acordeones donde se mostrarán imágenes, animándolas con distintos efecto que funcionarán en cualquier navegador, incluyendo Internet Explorer 8.

El demo completo podemos descargarlo desde github pero para agregarlo a un sitio, sólo necesitamos dos archivos: liteaccordion.jquery.js y liteaccordion.css. Entonces, primero agregamos jQuery antes de </head> si es que no la tenemos:

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

Luego, el script con el plugin:

<script src="URL_liteaccordion.jquery.js"></script>

o lo agregamos directamente en al plantilla, copiando y pegando el contenido de ese archivo:

<script type='text/javascript'>
//<![CDATA[
  ....... aquí pegamos el contenido del archivo liteaccordion.jquery.js .......

//]]>
</script>

Por último, el estilo, del mismo modo:

<style>
  ....... aquí pegamos el contenido del archivo liteaccordion.css .......
</style>

Eso es todo; ahora, hay que crear el HTML allí donde quisiéramos utilizarlo:

<div id="miejemplo" class="accordion">
  <ol>

    <!-- cada una de las pestaña -->
    <li>
      <h2><span>Pestaña UNO</span></h2>
        <div>
          <!-- el demo original usa etiquetas de HTML5 pero, el contenido puede ser cualquier otra -->
          <span class="figure">
            <img src="URL_imagen1" />
            <span class="figcaption">un texto optativo</span>
         </span>
      </div>
    </li>

  </ol>
</div>

Podemos activarlo colocando el llamado a la función debajo de eso o bien, con el resto de los scripts siempre y cuando nos aseguremos que se ejecute cuando la pagina se haya cargado, estableciendo en ese llamdo, las opciones :

<script>
$(document).ready(function(){ 
  $('#miejemplo').liteAccordion({
    onActivate : function() { this.find('span').fadeOut(); },
    slideCallback : function() { this.find('span').fadeIn(); },
    autoPlay : true, pauseOnHover : true, theme : 'dark', rounded : true, enumerateSlides : true     
  }).find('span:first').show();
});
</script>

Algunas de las opciones se agregan ahí y otras en el plugin mismo donde, por ejemplo, se define el ancho y alto:

containerWidth : 600 // ancho total
containerHeight : 350 // alto total
headerWidth : 48 // ancho delas pestañas cerradas
firstSlide : 1 // el número de la primer pestaña activa
slideSpeed : 800 y cycleSpeed : 6000 // velocidad de la animación
rounded : false // si no se quieren bordes redondeados
enumerateSlides : false // muestra u oculta un número en cada pestaña
theme : 'basic' // el tema CSS que puede ser 'basic', 'light', 'dark', o 'stitch'

Esto ultimo, también puede ser modificado ... con paciencia y si se usan textos, habría que agregarle propiedades extras como:

span.figure {
  display: block;
  height: 100%;
  margin: 0;
  width: 100%;
}
span.figcaption {
  background: #000;
  background: rgba(0,0,0,0.7);
  border-radius: 4px;
  bottom: 20px; 
  color: #FFF;
  padding: 10px 15px;
  position: absolute;
  right: 30px; 
  z-index: 3;
}

Partiendo de la idea de usar CSS para generar columnas auto-ajustables, podemos recrear cosas existentes aunque no funcionen en Internet Explorer y deberemos esperar que ese navegador incorpore estas propiedades que son unas de las más interesantes porque permiten pensar el diseño de un sitio web desde un ángulo totalmente diferente.

Vamos a jugar y usar un ejemplo previo, crear una página con un resumen de entradas que incluya paginación y simplemente, vamos a dejar todo como está pero cambiaremos algunas de las reglas de estilo. El modelo original es el que podía verse acá.

En ese ejemplo, el DIV cuyo ID es resultados es el rectángulo donde se muestran las entradas y, cada una de ellas es otro DIV cuya clase es paginaposts. El script, simplemente lee una cantidad determinada de entradas, extrae una imagen y la muestra junto al título que es una etiqueta H6. Nada de eso cambiará, sólo lo mostraremos de manera distinta, simulando el estilo mosaico de las Vistas Dinámicas de Blogger.

Y estas serán las reglas de estilo diferentes:

<style>
  #resultados { /* se mostrará todo en cuatro columnas */
    -moz-column-count: 4;
    -moz-column-gap: 0;
    -webkit-column-count: 4;
    -webkit-column-gap: 0;
    column-count: 4;
    column-gap: 0;
    margin-left: 0;
  }
  .paginaposts { /* cada entrada */
    background-color: #EEE;
    border-bottom: 4px solid #101921;
    display: inline-block;
    margin: 0;
    opacity: 0.8;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 205px;
  }
  .paginaposts:hover { opacity: 0.8; }
  .paginaposts a { vertical-align:top; }
  .paginaposts img { width: 205px; }
  .paginaposts h6 { /* el título permanece invisible hasta que ponemos el cursor encima */
    background-color: #AAA;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 10px;
    position: absolute;
    top: 0;
    width: 204px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;transition: all 1s;
  }
  .paginaposts h6 a {
    color: #000;
    font-size: 18px;
    text-shadow: 1px 1px 1px #FFF;
  }
  .paginaposts:hover h6 { opacity: .8; }
</style>

Mosaico

Cuando las entradas que escribimos tienen algún tipo de código repetitivo, a veces, solemos adornar eso con alguna imagen. Es algo bastante común, indica una descarga, una referencia externa, una firma de alguna clase, un tipo de archivo, cualquier cosa.

Esto, que es algo habitual, se puede tranformar en un trastorno cuando, por casualidad, cambiamos el diseño o deseamos modificar esa imagen.

Muchas veces hay consultas sobre cosas similares ¿es posible modificar todas las entradas del blog sin tener que editarlas una por una? Y, la verdad es que no, que no hay forma de hacer eso.

Es cierto que podemos usar JavaScript para modificar ciertas cosas onfly, es decir que el codigo que hayamos escrito, se modifique cada vez que cargamos una página pero, para que esto funcione, debemos tener identificado claramente eso que deseamos modificar y, debe ser algo relativamente pequeño, que no exija un tiempo importante de ejecución.

Si, por ejemplo, yo tuviera algo así en varias entradas:

<a href="URL_archivo"> <img src="URL_mi_imagen" style="......." /> DESCARGAR ARCHIVO </a>

podría crear una función que cambiara automáticamente esa imagen por otra, llamando a la función y enviándole el contenido HTML de la entrada para que busque allí dentro:

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
  <p><data:post.body/></p>
  <div style='clear: both;'/>
</div>
<script type='text/javascript'>cambiaralgo(&#39;<data:post.id/>&#39;);</script>

<script type='text/javascript'>
//<![CDATA[
function cambiaralgo(id) {
  var imagen; 
  var contenido = document.getElementById("post-" + id);
  if(contenido!=null) {
    var listaimagenes = contenido.getElementsByTagName("img");
    if(listaimagenes.length>0){
      for(var i=0; i<listaimagenes.length; ++i) {
        imagen = listaimagenes[i].src;
        if(imagen=="URL_mi_imagen"){
          listaimagenes[i].src = "URL_NUEVA_imagen";
        }
      }
    }
  }
}
//]]>
</script>

DESCARGAR ARCHIVO

ejemplo cambiar imagen | [restaurar]

La función leería el contenido de la entrada, buscaría las etiquetas IMG y, si una de ellas tuviera la imagen buscada, la cambiaría por la nueva y el cambio, sería prácticamnetre imperceptible para el visitante.

Es una solución que puede ser aplicada a casi cualquier otra cosa pero, no es lo ideal.

Lo lógico, cuando se quieren usar este tipo de códigos repetitivos, es usar CSS, crear clases y ahí, establecer las propiedades; puedo hacerlo de manera sencilla o puedo complicarlo hasta cualquier extremo. El uso de una clase para este tipo de cosas, me permitirá modificar todas las entradas, cambiando las reglas una sola vez.

En el ejemplo anterior:

<a class="descargar" href="URL_archivo"> <img src="URL_mi_imagen" style="......." /> DESCARGAR ARCHIVO </a>

usaríamos una regla de estilo como esta:

.descargar {
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqXVri7_3_zpgtUXJpkz6SzhQmcAEoD5Rc7qyvHrH5A3kH50_6TFIK5UEQmD7hWx-WwfFP2FnDAEJnmQPvqsQebPm9H350hxy6hekO73_sLBmxQbeUKr_CfsNy_yB8fk2BBuLVsQ/s0/downloadfile.gif) no-repeat left top;
    color: #4B9043 !important;
    font-family: Verdana !important;
    font-size: 14px !important;
    padding-left: 35px;
    vertical-align: middle;
}

DESCARGAR ARCHIVO

Más aún, también podríamos generar el texto con CSS:

.descargar:after {
    content: "DESCARGAR ARCHIVO";
}

Con este tipo de sistemas, bastará cambiar el CSS y no hará falta editar las entradas.

c64 YOURSELF es un sitio donde podemos subir una imagen y convertirla, reduciendo sus colores a 16 lo que las asemeja a aquellas que podíamos ver en los viejos sistemas como la Commodore-64.

La página, que funciona en Firefox, Chrome y cualquier navegador que permita el uso de canvas, simula ese sistema operativo y es muy sencilla, sólo hay que arrastra la imagen desde nuestra PC a la ventana, esperar que sea convertida y luego, usar algunos de los enlaces inferiores para descargarla en formato PNG en tres tamaños distintos o bien compartirla en servicios como Flickr o Facebook.

El traductor de Google no es perfecto pero, suele sacarnos de apuro y además, posee un API que nos permite integrarlo en cualquier sitio. Generalmente, lo utilizamos para dar la opción de traducir la página completa pero también es posible hacerlo parcialmente, es decir, colocar algún texto y dar la opción de traducirlo sin tener que salir de la página.

Para esto, necesitamos agregar el script si es que no lo tenemos ya que en un blog de Blogger, suele estar agregado para multiples tareas.

Como cualquier otro, lo ponemos antes de </head>;

<script src='http://www.google.com/jsapi' type='text/javascript'></script>

Ahora, donde se nos ocurra, vamos a colocar dos DIVs, en uno, agregaremos los enlaces a los idiomas y en el otro, el texto a traducir; en este ejemplo, sería algo así:

<div id="idiomas">
  <a id="L_es" class="lenguajeactual" href="javascript:void(0);" onclick="traduce('es');">Español</a>
  <a id="L_en" class="" href="javascript:void(0);" onclick="traduce('en');">Inglés</a>
  <a id="L_it" class="" href="javascript:void(0);" onclick="traduce('it');">Italiano</a>
  <a id="L_fr" class="" href="javascript:void(0);" onclick="traduce('fr');">Francés</a>
  <a id="L_pt" class="" href="javascript:void(0);" onclick="traduce('pt');">Portugués</a>
</div>

<div id="miejemplo">
  ....... el texto .......
</div>

Un poco de CSS para darle forma:

<style>
  #idiomas {
    background-color: #000;
    border: 1px solid #444;
    margin: 0 auto;
    padding: 5px 10px;
    width: 500px;
  }
  #idiomas a {
    border-radius: 5px;
    color: #DDD;
    display: inline-block;
    font-size: 17px;
    padding: 5px 15px;
  }
  #idiomas a:hover { color: #FFF; }
  .lenguajeactual { background-color: #444; }
  #miejemplo {
    border: 1px solid #444;
    border-top:none;
    color: #EEE;
    font-size: 16px;
    padding: 10px 20px;
    margin: 0 auto;
    width: 480px;
  }
</style>

Y por último, el script con la función:

<script>
  var lenguaje = "es"; // es el lenguaje por defecto
  google.load("language",1); // cargamos el API
  // definimos la función que ejecutará el API
  var callback = function(result) {
    if(result.translation) {
      var translateDiv = document.getElementById("miejemplo");
      translateDiv.innerHTML=result.translation;
    }
  }
  // ejecutamos la función
  function traduce(traducir) {
    document.getElementById("L_" + lenguaje).className = ""; // cambiamos al clase del enlace anterior
    var translateDiv = document.getElementById("miejemplo"); // es el DIV donde está el texto
    google.language.translate(translateDiv.innerHTML,lenguaje,traducir,callback); // ejecutamos la función del API
    lenguaje = traducir;  // preservamos el lenguaje actual
    document.getElementById("L_" + traducir).className = "lenguajeactual";  // cambiamos la clase del actual
  }
</script>

EspañolInglésItalianoFrancésPortugués

Este es un párrafo en español.

Puede ser traducido haciendo un click en el enlace anterior.

Utilizando el API de Google y es relativamente fácil de implementar.

El uso de columnas para organizar el contenido de un página web, es una de las nuevas posibilidades que nos da el CSS3 aunque, como en la mayoría de estos casos, no es aplicable a Internet Explore excepto en su versión 10; el resto de los navegadores (Firefox, Chrome, Safari y Opera) las incorpora sin problemas aunque requiere el uso de prefijos para cada uno de ellos.

Para entender qué significa esto de las columnas, lo mejor es comenzar a entender cómo se ven las cosas de manera normal.

Supongamos que tengo un contenedor (un DIV) con un cierto ancho (width) y dentro de él, coloco seis imágenes cuyos anchos son iguales pero varían su altura:

<style>
  .demo {
    background-color:#000;
    line-height:0;
    margin:0 auto;
    width: 600px;
  .demo img {
    outline: 1px solid Turquoise;
    width: 200px;
  }
</style>

<div class="demo">
  <img src="URL_IMAGEN_1"/>
  .......
  <img src="URL_IMAGEN_7"/>
</div>

Lo que veré es esto:

normal | vertical-align: top | vertical-align: middle | float:left | float:right

Como miden 200 pixeles de ancho, tres se muestran arriba y las otras tres, debajo; Si quisiera que se vieran filas de cuatro columnas, debería aumentar el ancho del contenedor 200 pixeles más y se acomodarían solas.

Sin otro tipo de propiedad, las imágenes se mostrarán una al lado de la otra, alineadas por su base. Si quisiera, podría alinearlas por su parte superior o centrarlas verticalmente, estableciendo la propiedad vertical-align en las etiquetas IMG; en el demo, sería:

.demo img { vertical-align: top; } o bien .demo img { vertical-align: middle; }

Otra alternativa es hacer que floten en cuyo caso, como el contenedor tiene un color de fondo, también debería dimensionar su altura caso contrario, no se vería:

.demo { height:398px; }
.demo img { float: left; } o bien .demo img { float: right; }

Las distintas variantes pueden ser probadas haciendo click en los enlaces debajo del demo.

Sea como sea y haga lo que haga, las imágenes dejarán espacios en blanco (en negro en este caso) entre ellas ya que todas tienen alturas diferentes y justamente esa es la primera característica sobresaliente de las nuevas propiedades; las columnas ajustan el contenido de tal modo de no dejar espacios entre ellos.

En el mismo ejemplo inicial, agrego esto:

.demo {
  .......
  -moz-column-count:3;
  -moz-column-gap:0;
  -webkit-column-count:3;
  -webkit-column-gap:0;
  column-count:3;
  column-gap:0;
}

Y el resultado será esto:

Sólo requerimos dos propiedades:

column-count indica la cantidad de columnas a ser mostradas; si el ancho del contenedor es escaso, se solaparán; si el ancho del contenedor es demasiado grande, quedrán espacios entre ellas
column-gap es el espacio entre los contenidos, la separación entre ellos y depende del navegador (generalmente es 1em) así que ponemos cero para controlarlo nosotros msimos

Hay propiedades extras que pueden ser agregadas:

column-width establece el ancho de esas columnas
column-rule se utiliza para establecer el tipo de borde y tiene la misma sintaxis que la propiedad border
column-rule-color es el color del borde, similar a border-color
column-rule-style es el estilo del borde, similar a border-style
column-rule-width es el tamaño del borde, similar a border-width

Más ejemplos; cinco columnas con contenidos de 100 pixeles de ancho:

123456789

Y muchas imágenes todas juntitas:

Blogger anuncia que en alrededor de dos semanas, todas las cuentas serán actualizadas a la nueva interfaz así que, quien aún no lo haya hecho, se verá obligado a lidiar con ella.

De todos modos, por suerte, durante algún tiempo más, también habrá una opción de “Switch back” para volver al estilo normal aunque anuncian que en algún momento, esa opción desaparecerá.

Conociendo que los tiempos de esta gente son indefinidos y que hace años y años que siguen funcionando las plantillas clásicas pese a haber anunciado que también desaparecerían, imagino que, quienes no gustamos de ese nuevo escritorio, tendremos algún tiempo de alivio.

El nuevo Blogger

Video explicativo del nuevo escritorio.

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

REFERENCIAS:Blogger Buzz

Una imagen normal:

<img src="URL_IMAGEN"/>

Le redondeamos los bordes en Firefox, Chrome Opera e IE9:

<img style="border-radius:20px" src="URL_IMAGEN"/>

Le agregamos un borde:

<img style="border-radius: 20px;border: 5px solid #FFF;" src="URL_IMAGEN"/>

en Firefox y Chorme/Opera se verán diferentes:

Le agregamos un padding que es la separación entre el borde y la imagen en si misma:

<img style="border-radius: 20px;border: 5px solid #FFF;padding: 10px;" src="URL_IMAGEN"/>

Nuevamene, en Firefox y Chorme/Opera se verán diferentes:

Empezamos otra vez pero usando valores extremos

<img style="border-radius:100px;padding: 0 50px;" src="URL_IMAGEN"/>

la confusión de los navegadores aumenta ¿cómo era eso del respeto a los estándares?:

Me olvido de las dudas existenciales y sigo agregándole propiedades; esta vez, un color de fondo:

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;" src="URL_IMAGEN"/>

Y un poco de sombra exterior:

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 10px #DEF;" src="URL_IMAGEN"/>

Y una poco de sombra en el interior:

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 15px #000000 inset,0 0 10px #DEF;" src="URL_IMAGEN"/>

Y así podríamos seguir hasta el infinito.

Cada vez que abrimos una página web, el navegador descarga los archivos que la componen y los guarda en una carpeta de la PC; allí se van acumulando datos que incluyen imágenes, videos, audio, scripts, css, etc. Esto es algo que hace para ahorrarnos tiempo; es decir, si ingresamos de manera repetitiva al mismo sitio, simplemente lee lo que ya descargó y como el acceso al disco duro es ágil, se evita el trabajo de conectarse y la navegación es mucho más rápida.

El problema con esto es que, en ciertas ocasiones, ese proceso nos juega una mala pasada ya que, si el sitio o página que estamos mirando posee un error, ese error también será descargado y, aunque sea eventual, es posible que nosotros no nos demos por enterados ya que seguiremos viendo la copia equivocada. Lo mismo ocurre cuando hacemos cambios en algún archivo y ese cambio no parece funcionar; es más, si vemos el código fuente, no veremos el cambio.

Hay ciertas etiquetas META que pueden agregarse a cualquier sitio y establecen la forma en que el navegador debería manejar la cache de cada página en particular pero, al margen de todo eso, en Blogger, el asunto se nos complica, sobre todo cuando surgen esos extraños errores con números y letras que no parecen significar nada y que en realidad nada significan porque se generan aleatoriamente.

En la gran mayoría de los casos, ese error es sólo temporal, alguna falla en el servicio o en la conexión, cualquier byte que llega torcido o con mal humor; da lo mismo y poco puede hacerse al respecto; lo primero es tratar de forzar la carga usando la combinación de teclas Ctrl+F5 que le ordena al navegador que no sea perezoso, que ignore lo que guardó en la caché y cargue todo otra vez.

Si el error persiste y no parece tener explicación, lo que nos sugieren siempre es "borren la caché del navegador" y esto es algo sencillo de hacer.

Para asegurarnos de no dejar rastros, cerramos todas las pestañas y lo dejamos abierto en una página en blanco (about:blank); luego, tanto en Firefox, Internet Explorer como en Chrome, podemos usar la combinación de teclas Ctrl+Mayús+Supr para que se abra la ventana con las opciones. Sino, dependiendo de cuál usamos, haremos esto:

• en Firefox menú Herramientas y seleccionamos Limpiar el Historial reciente o bien Herramientas | Opciones y en la pestaña Privacidad veremos el mismo enlace.
• en Internet Explorer menú Herramientas y seleccionamos Eliminar el Historial de Exploración o bien Herramientas | Opciones de Internet y allí veremos Historial de Exploración
• en Chrome haremos click en el ícono de Personalizar y seleccionamos Eliminar datos de navegación
• en Opera: menú Configuración y seleccionamos Eliminar información privada

En todos los casos, la ventana nos mostrará las distintas posibilidades y es fundamental que siempre se marquen las cookies.

Circle Navigation Effect with CSS3 es una idea que muestran en tympanus.net, aplicado a un slider de imágenes pero, para no complicar mucho las cosas, vamos a ver como generar ese mismo efecto en enlaces comunes y corrientes. Si se entiende la idea, luego pude ser trasladada a otras aplicaciones.

El truco se basa en anidar etiquetas dentro del enlace y de esa manera, poder controlarlas de manera individual:

<a class="circulo" href="javascpit:void(0);">
  <span style="background-image: url(IMAGEN_VISIBLE);"></span>
  <div style="background-image:url(URL_IMAGEN_OCULTA);"></div>
</a>

Los enlaces se muestran como pequeños círculos y, al colocar el cursor encima, se agrandan y muestran una segunda imagen:

Y claro, todo depende del CSS:

<style>
  /* los enlaces pueden tener cualquier dimensión */
  a.circulo {
    display: inline-block;
    height: 46px;
    position: relative;
    width: 75px;
  }
  /* la etiqueta SPAN contiene la imagen visible */
  a.circulo span {
    background: #00BE98 url() no-repeat 50% 50%; /* la imagen es un fondo */
    display: block;
    cursor: pointer;
    /* la dimensión de la imagen */
    height: 46px;
    width: 46px;
    border-radius: 23px; /* se ve como círculo con un radio que es la mitad de su tamaño */
    /* la posicionamos de manera absoluta en el centro */
    position: absolute;
    top: 50%;
    left: 50%;
    /* le ponemos márgenes negativos arriba y a la izquierda para centrarla */
    margin: -23px 0 0 -23px;
    /* la animación */
    -moz-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  /* la imagen oculta */
  a.circulo div {
    background: transparent url() no-repeat center center;
    height: 0;
    left: 50%;
    margin: 0;
    overflow: hidden;
    position: absolute;
    top: 50%;
    width: 0;
     z-index: 100;
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }
  /* al poner el cursor encima del enlace */
  /* la etiqueta SPAN se "agranda" */
  a.circulo:hover span {
    border-radius: 75px;
    height: 150px;
    margin: -75px 0 0 -75px;
    opacity: 0.6;
    width: 150px;
  }
  /* la etiqueta DIV se hace visible */
  a.circulo:hover div {
    border-radius: 75px;
    height: 150px;
    margin: -75px 0 0 -75px;
    width: 150px;
  }
</style>

Atención que Google Buzz ha anunciado que han relanzado su LightBox que tantos dramas causó hace unos días pero, esta vez, han tenido la semi-prudencia de permitirnos deshabilitarlo; digo semi porque por defecto, está habilitado en todos los blogs.

Para modificar esa oción debe irse a Configuración | Formato, seleccionar NO en al casilla correspondiente y guardar:

Open images in Lightbox SíNo

If Yes is selected, when a reader clicks on an image in a post, it will be displayed in a slideshow-like overlay instead of leaving your page and navigating to the image.

Esta es una opción individual de cada blog y por lo tanto, si tenemos varios, hay que hacer lo mismo en cada uno de ellos.

¿Es posible automatizar el ancho de los videos para que se vean lo más grande posibles sin tener que usar jQuery como se mostraba en esta entrada?

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

leer artículo actualizado

IS Google 1
	Contiene 10 íconos de 256x256, en formato PNG. descargar

Google Plus
	Contiene 80 íconos de 16x16, 24x24, 32x32, 48x48, 64x64 y 128x128, en formato PNG. descargar

Google Plus
	Contiene 10 íconos de diferentes tamaños y en varios formatos. descargar

REFERENCIAS:shockblast.net

Una ventana modal no es otra cosa que un contenedor HTML como cualquier otro que tiene una característica básica, permanecer oculta hasta que se hace click en algún botón. En principio, nada en particular y podrían diseñarse cientos de modelos gráficos pero digamos que lo más usual es que al abrirse, la pantalla se oscurece y sobre la página se muestra un elemento con cierto contenido que luego, podemos cerrar.

leer artículo actualizado