Hojas de otoño cayendo en el blog

Para los que vivimos en el hemisferio norte ya es otoño desde hace algunos días, y algunos me han preguntado por algún truquillo que haga caer hojas en el blog. Este script de MaxxBlade que aunque originalmente tiene otro fin, puede usarse para hacer que caigan imágenes de hojas en el blog, sin embargo, aunque en todos los navegadores que probé funcionó bien, es posible que en Internet Explorer no funcione, pero eso ya no nos extraña ¿verdad?

Un ejemplo se puede ver en este blog de pruebas.

Para poner estas hojas cayendo en el blog entra en la Edición HTML de la plantilla y antes de </head> pega lo siguiente:

<script>
//<![CDATA[
// Fall v2.0 By MaxxBlade - http://www.maxxblade.co.uk/fall
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}
var numObjs=15, waft=100, fallSpeed=5, wind=-1;

newObject("http://lh5.googleusercontent.com/--jcOdbfXsBs/UGS2U_spSLI/AAAAAAAADCU/G-4XZ0mSEHg/s100/hoja1.png",29,15);
newObject("http://lh5.googleusercontent.com/-aE24R5QmbE4/UGS2U_hZj0I/AAAAAAAADCM/7Hb18sy3qfo/s100/hoja2.png",27,23);
newObject("http://lh6.googleusercontent.com/-9H8JyoZ6j3g/UGS2U2aOamI/AAAAAAAADCQ/6zY7uKgyV2A/s100/hoja3.png",46,15);
newObject("https://lh3.googleusercontent.com/-OhuXMSqpELQ/UGS2Vq8Qf0I/AAAAAAAADCg/UTCK1YQUZqA/s100/hoja4.png",36,33);
function winSize(){winWidth=(moz)?window.innerWidth:document.body.clientWidth;winHeight=(moz)?window.innerHeight:document.body.clientHeight;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:absolute;z-index:9;background:none;border:0;padding:0;box-shadow:none;" src="'+fallObjects[vari][0]+'">'); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+"px";left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+"px";}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
window.onresize=winSize;fall();
//]]>
</script>

En la parte marcada con color amarillo verás unas opciones:
var numObjs=15, es la cantidad de hojas que aparecerán.
waft=100, es qué tantos pixeles se mueven a los lados cuando caen
fallSpeed=5, es la velocidad, y
wind=-1; es la dirección del viento, puede ser un valor negativo como está, 0 para que no tengan dirección, o un valor positivo (por ejemplo 1). Si es un valor negativo caerán a la izquierda, si es un valor positivo caerán a la derecha.

Con tan sólo eso tu blog tendrá una decoración muy acorde a esta temporada.

Autor | MaxxBlade

Descargar las plantillas de diseño de Blogger (Mínima, Rounders, Thisaway, etc.)

Desde que la nueva interfaz se lanzó primeramente a modo de prueba me fijé que no incluían las plantillas de diseño del 2006, ya saben, la plantilla Mínima, Rounders, Thisaway, Son of Moto, etc. Pensé que como la interfaz estaba en desarrollo sería cuestión de tiempo para que las agregaran, sin embargo ahora que la nueva interfaz ya es por defecto (y obligación) para todos los usuarios de Blogger veo que siguen sin incluirse esas plantillas.

En su momento hice un respaldo de todas esas plantilla temiendo que justamente no las fueran a incluir más y nos tuviéramos que privar de ellas. Ignoro si más adelante vayan a agregarlas a esa interfaz, pero entre si eso sucede o no, les dejo la descarga de cada una de estas plantillas por si alguien las necesita.

Estas plantillas las guardé desde octubre del 2011 así que seguro no tienen todos los códigos que Blogger continuamente va añadiendo, pero al instalarlas deberán agregarse esos datos de forma automática.

Para descargar cada una de ellas sólo selecciona el nombre de la plantilla que deseas.

Mínima Mínima Dark Mínima Blue Mínima Ochre	Denim Stretch Denim Washed Denim Stretch Denim Light	Rounders Rounders 2 Rounders 3 Rounders 4
Mínima Lefty Mínima Stretch Mínima Lefty Stretch	Herbert JellyFish	Harbor
Scribe	Dots Dots Dark	No. 897 No. 565
Thisaway Thisaway Blue Thisaway Green Thisaway Rose	Son of Moto Mr. Moto Ms. Moto	Snapshot Snapshot Sable Snapshot Tequila
TicTac TicTac Blue	Tekka	Sand Dollar
Simple II

Recuerda que, para subir una plantilla en la nueva interfaz debes ir a la sección Plantilla, y en la parte superior derecha verás un botón que dice Crear copia de seguridad/Restablecer. Dando click ahí podrás subir tu plantilla en formato XML.

Adiós a la antigua interfaz de Blogger

Desde marzo Blogger había advertido que la nueva interfaz desplazaría de forma definitiva a la interfaz antigua, aquella a la que tantos nos habíamos acostumbrado por muchos años. Parece que no se decidían, supongo que porque había (y hay) problemas por resolver en ella, el caso es que nos cambiaban la fecha del tan poco anhelado día. 

Pero al fin desde la noche del 19 de septiembre se hizo el gran cambio que Blogger había anunciado y del que no todos estábamos de acuerdo. La nueva interfaz está por defecto para todos los usuarios de Blogger sin la opción a regresar a la antigua interfaz.

Lo cierto es que, independientemente del aspecto que pueda tener, es una interfaz que aun tiene varios problemas que el equipo de Blogger debe solucionar. La antigua interfaz funcionaba mejor en muchos aspectos, y no es sólo por cuestiones de costumbre, sino de su funcionalidad en sí.

Actualización 21/09/2012 Los enlaces a la interfaz antigua han dejado de funcionar.

Sin embargo, y aunque no se puede usar la opción de regresar a la interfaz antigua de Blogger, he visto que los enlaces a sus diferentes secciones de la interfaz antigua aun están activos, así que no sé por cuánto tiempo pero aun los podemos usar.

La idea básica sería poner un panel de acceso, el primero, el que dice "únicamente si usas la interfaz antigua". De esa forma tendrías acceso a las distintas áreas de Blogger usando la interfaz antigua.

No sabemos cuánto tiempo puedan seguir vigentes esos enlaces, así que de cualquier forma habrá que acostumbrarse a la nueva interfaz, pues al parecer, es inevitable el cambio.

Imágenes estilo vintage en el blog, sólo con CSS

Instagram ha hecho que muchos tomen el gusto por las fotos estilo vintage, así que es muy común ver por todas partes este tipo de fotos que dan un aspecto de ser algo viejas.

Si no quieres usar un programa para tener tus fotos tipo vintage, puedes usar CSS y obtener un resultado similar. En sí lo que haremos será aplicarle una sombra difuminada al interior de la imagen, le añadiremos un borde, le pondremos un color encima (que será la que le dará ese efecto tipo Instagram), y encima de la imagen otra imagen semitransparente estilo grunge que le dará el toque viejo.

Puedes ver el ejemplo en esta imagen de abajo, al pasar el cursor cambia a su estado normal aunque conserva el borde.

Obviamente habrá imágenes a las que les quede mejor este tipo de efectos que a otras, pero independientemente de eso sí hay que hacer unas observaciones:

1. Está hecho con estilos CSS así que como ya sabemos habrá navegadores que no los reconocerá, específicamente Internet Explorer, así que en ese navegador no se verá ningún efecto.
2. Al pasar el cursor por la imagen cambia con un efecto de transición, pero éste sólo se ve en Firefox.
3. Las imágenes no estarán centradas, podrás alinearlas a la izquierda (por defecto), o a la derecha.

Habiendo aclarado lo anterior empecemos. Lo primero es entrar en la Edición de HTML y pegar antes de ]]></b:skin> los estilos:

/* Imágenes Vintage
----------------------------------------------- */
.vintage img {
padding:0;
float:left;
}
.vintage {
border:10px solid #000;
position: relative;
float: left; /* Cambiar por right si quieres que las imágenes se alineen a la derecha */
margin-right: 20px;
margin-bottom: 20px;
}
.vintage:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255,0,0, 0.5); /* rojo */
background-image:url(http://lh4.googleusercontent.com/-Qva8IVtO25k/UFejhDww-zI/AAAAAAAADAY/RnlCb7JO0xs/s000/grunge.png);
background-size: cover;
box-shadow: inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}
.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}

Por último usa este código en tus entradas o donde quieras mostrar la imagen:

<div class="vintage">
<img border="0" src="URL de la imagen" /></div>
<div style="clear: both;"/>

Agrega la URL de la imagen donde se indica y listo.
Si quisieras que el texto de la entrada rodee la imagen entonces elimina la etiqueta en color azul.
En el primer código verás en negrita la línea que corresponde al color de la imagen, puedes modificarla por algún otro color, estos son algunos ejemplos de lo tradicional en vintage:

background-color: rgba(0,0,255, 0.5); /* azul */
background-color: rgba(0,255,255, 0.5); /* aqua */
background-color: rgba(0,255,0, 0.5); /* verde */
background-color: rgba(255,0,240, 0.5); /* violeta */
background-color: rgba(255,102,0, 0.6); /* sepia */
background-color: rgba(0,0,0, 0.6); /* colores más oscuros */

Si quisieras que la imagen permanezca siempre así sin que regrese a su estado original al pasar el cursor entonces elimina esta perte del primer código:

.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}

Y eso es todo, con este pequeño experimento podrás tener tus imágenes al estilo vintage usando sólo CSS.