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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTD_ud_W-K8X-k5EjeuI0ZYg1mW9q35sPChSlEIr3qSaoJL3a1WSs6PgTMbegDJbjE9LIP1bYmyivuvAV76YcaAfajrTjBZlK6wGjC-gJBuCNEVfRQXld3W6rlX7-_4P3SDcvOp0P1PlE/s100/hoja1.png",29,15);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_gjGeJ9nlfYB5LB6RYKHmBC2ccQlx4N5IxaPvJxjhWzIMOeYqwvf6BmqBXlHEN38FXvsg0294OeMwPNovTI4gTI8e5TqUfblTga3eRK7w5Xg-VCb1XIcWzNW1zhtK8tkJtKXT75JhHaY/s100/hoja2.png",27,23);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2M2l5LdkjFkCTZFGpbD8SzZhNTsdFJZVwr7ZHQ9goonIE2YXaqLStwnN2kCnhdECJchai-RfAC4bWaNy0olRsI47bew8NduvxSGXLFTsxVUvFynrPQ_LG5GUN11XEVckYu6TvUUC6mrM/s100/hoja3.png",46,15);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKZI76kL-B3Rs7Cz8aMbHbWBFVFbyYcQdRo2BH7B_TZaMHb7bgbePm6S2VrNhgYyoL2GHGzp80ZqSzxUmVra_mDEPH4bV4gF7is4j4ZDFkW4lqOkuX6fRr9cUbDeWjpto6kfOwW3tuhuU/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 dos 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. 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;
border-radius: 10px;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_hTpwevLs7dQnDGvTG7mVWQFjozI6QkINLrNp_muAs4jn164mVixxvhBDsZm8ObO-3wlbQK9VEqKF3JBSoAqJehmSd8sC97ky-iy4ZJu-Q_JqX6sGO8ZbB3ATRCDq37QE6Wlb9fENOeI/s0/grunge.png);
background-size: cover;
box-shadow: inset 0 0 50px rgba(0,0,0, 0.5), inset 0 0 50px rgba(0,0,0, 0.5), inset 0 0 50px rgba(0,0,0, 0.5);
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.vintage:hover:before {
background: none;
box-shadow:none;
}

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;
}

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