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.

Slideshow de im?genes como fondo del blog

En la entrada anterior vimos c?mo hacer que la imagen de fondo del blog cubra toda la pantalla sin importar la resoluci?n del monitor. El m�todo que usamos con jQuery es un plugin llamado BackStretch el cual tambi�n tiene la opci?n de crear un slideshow de im?genes como fondo del blog sin perder la cualidad de ajustarse al ancho y alto de la pantalla.

Lo que haremos en esta en estrada es justamente eso, que el fondo del blog tenga im?genes que vayan cambiando, todas con un efecto de desvanecimiento entre cada transici?n.

Puedes ver un ejemplo en este blog de pruebas.

Para poner este slideshow de im?genes en el fondo del blog entra en la Edici?n HTML de la plantilla y antes de </head> agrega el siguiente c?digo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>

<script>
//<![CDATA[
var images = [
 "URL de la imagen",
 "URL de la imagen",
 "URL de la imagen",
 "URL de la imagen",
 "URL de la imagen",
  ];

  $(images).each(function(){
 $('<img/>')[0].src = this;
  });
  var index = 0;
$.backstretch(images[index], {speed: 1000});
  var slideshow = setInterval(function() {
  index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);
//]]>
</script>

Ah? agrega las URLs de las im?genes que estar?n como fondo del blog.

Si quisieras a?adir m?s im?genes s?lo agrega despu�s de var images = [ otra l?nea como esta:

 "URL de la imagen",

Las im?genes ir?n pasando seg?n el orden que las hayas puesto, si quisieras que �stas fueran al azar entonces cambia la segunda parte del c?digo por este:

<script>
//<![CDATA[
var images=new Array();
images[ 1 ]="URL de la imagen";
images[ 2 ]="URL de la imagen";
images[ 3 ]="URL de la imagen";
images[ 4 ]="URL de la imagen";
images[ 5 ]="URL de la imagen";

  Array.prototype.shuffle = function() {
  var len = this.length;
  var i = len;
  while (i--) {
  var p = parseInt(Math.random()*len);
  var t = this[i];
  this[i] = this[p];
  this[p] = t;
  }
};

  images.shuffle();
  $(images).each(function(){
 $('<img/>')[0].src = this;
  });
  var index = 0;
$.backstretch(images[index], {speed: 1000});
  var slideshow = setInterval(function() {
  index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);
//]]>
</script>

Tambi�n puedes a?adir m?s im?genes agregando una l?nea como esta:

images[ 6 ]="URL de la imagen";

Sin embargo ver?s que en este caso hay unos n?meros consecutivos en color azul, por lo que si agregas otra ser? la 6, luego la 7, etc.

En ambos casos puedes modificar el tiempo que dura cada imagen en el 5000 que est? al final del script.

La ventaja de este slideshow en el fondo del blog es que las im?genes se redimensionar?n autom?ticamente al tama?o del monitor, as? que en cualquier resoluci?n se deber? ver bien.

No est? de m?s recordar que si usas Scriptaculous deber?s hacer unos cambios, y si ya usas jQuery deber?s dejar s?lo una versi?n.


P?gina del autor | BackStretch

C?mo hacer que la imagen de fondo del blog cubra toda la pantalla

Una constante pregunta es c?mo hacer para que la imagen de fondo del blog siempre ocupe toda la pantalla sin importar la resoluci?n del monitor. Y es que a veces ponemos una imagen de fondo seg?n las medidas de nuestro monitor, y no consideramos que en la actualidad los monitores los hay de todas las resoluciones, muy peque?os y muy grandes. As? que si ponemos una imagen de acuerdo a nuestra pantalla habr? alguien con un monitor mayor que seguramente no ver? toda la imagen o la ver? repetida, y en el caso de los que usan monitores muy peque?os ver?n la imagen incompleta.

Aqu? veremos dos soluciones a ello, una usando CSS3, y otra con jQuery. Con cualquiera de las dos haremos que la imagen de fondo de la p?gina ocupe toda la pantalla del monitor sin importar la resoluci?n del mismo.

CSS3

La primera opci?n es usando CSS3, la ventaja con este m�todo es que no sobrecargamos el blog con scripts, usaremos ?nicamente la propiedad background-size que se encargar? de realizar lo que queremos.

La desventaja es que esta propiedad s?lo es soportada por los navegadores modernos, as? que en el caso de Internet Explorer s?lo se ver? de la versi?n 9 en adelante, en los dem?s navegadores no deber? haber problema.

El m�todo es muy simple, s?lo tenemos que ingresar a la Edici?n HTML de la plantilla, localizar el background que est? dentro de body { y reemplazarlo por esto:

background: url(URL de la imagen) no-repeat center center fixed;
background-size: cover;

Se ver?a m?s o menos as?:

body {
background: url(URL de la imagen) no-repeat center center fixed;
background-size: cover;
margin:0;
color:#000;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

S?lo pon la URL de la imagen y listo.

jQuery

Con este m�todo usaremos jQuery con el plugin BackStretch, la ventaja es que funciona en todos los navegadores, incluyendo IE7 en adelante. La desventaja no es mayor si ya usas jQuery, ya que el plugin en realidad es peque?o. Para usar este m�todo en tu blog entra en la Edici?n HTML y antes de </head> pega este script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>
<script>
$.backstretch("URL de la imagen");
</script>

Pon la URL de la imagen donde se indica y listo.

Con este m�todo la carga de la imagen del fondo se hace hasta el final, esto es para que el usuario no tenga que estar esperando a que cargue la imagen para que empiece cargar el blog, as? que si en el body { ya utilizas una imagen de fondo se ver? primero e instantes despu�s se cargar? la del script, por lo que si lo deseas puedes eliminar la imagen que tengas en el body y as? dejar que s?lo cargue la imagen del script.

Como puedes ver ambos sistemas son f?ciles de aplicar, cada uno con sus pros y contras, pero el resultado es el mismo, extender la imagen de fondo para que se ajuste a la pantalla de cualquier monitor sin importar la resoluci?n del mismo.

Recuerda que en el caso del m�todo con jQuery, deber?s verificar que no uses Scriptaculous o Mootools, de ser as? tendr?s que aplicar unos cambios en el script para hacerlos compatibles.
Y si ya usas jQuery recuerda tener s?lo una versi?n, la ?ltima.

5 opciones para poner un chat en el blog

Un chat es una buena forma de hacer que tus lectores interact?en entre ellos, compartan opiniones, formen una comunidad, y pasen un buen rato. Est? claro que no en todos los blogs es necesario tener uno, pero para los que s?, aqu? veremos algunos de ellos. Si bien hay muchos sitios que ofrecen este servicio, hoy hablaremos de quiz? los chats m?s populares entre los blogueros.

Cbox

Cbox es un chat con una interfaz minimalista, limpia, y discreta. Permite a los usuarios elegir un nick personalizado y una URL, usar emoticones, usar negritas, colores, etc. Funciones b?sicas, y claro que tambi�n ofrece opciones m?s avanzadas como el registro de usuarios pero s?lo en la versi?n de pago.

Para conseguir este chat s?lo tienes que registrarte y listo. Una vez que te registres puedes ir a Publish para conseguir el c?digo. Y en Look & Feel puedes elegir uno de los temas que tienen o escoger los colores que t? quieras.

Enlace | Agregar Cbox en tu blog

Chatango

Chatango es similar al anterior en cuanto al aspecto, es un chat con una interfaz sencilla, y con opciones b?sicas aunque tiene la ventaja de ser gratuito por completo y mostrar avatares.

A diferencia del otro, con Chatango primero eliges el dise?o de tu chat y despu�s te registras, una vez que lo hayas hecho tendr?s el c?digo listo para pegarlo en tu blog.

Enlace | Agregar Chatango en tu blog

Xat

Xat es un chat muy popular entre los adolescentes, a m? me recuerda mucho a los chats de finales de los 90s donde hab?a colores por doquier, emoticones y un sin fin de cosas. Bueno, pues Xat es as?, ya que adem?s de que puedes elegir la imagen de fondo de tu chat, los emoticones que tiene son bastantes, la mayor?a de ellos son animados e incluso puedes ponerlos en tu nick, por lo que si est?s buscando un chat de interfaz discreta esto no es lo tuyo.

Para crearlo debes registrarte, aunque ellos s? te pedir?n confirmar tu cuenta, despu�s de que la hayas confirmado puedes empezar a personalizarlo. Ojo, al momento de registrarte usa una cuenta de Gmail ya que con Hotmail (Outlook) casi nunca llegan los correos de confirmaci?n.
Una vez que lo confirmes ver?s tu chat y un bot?n para personalizarlo. Si das click en la direcci?n de tu chat podr?s ver debajo que dice Embed, ah? podr?s obtener el c?digo para insertarlo en tu blog.

Enlace | Agregar Xat en tu blog

Chatwee

Chatwee es un servicio de chat nuevo, a diferencia de los otros Chatwee se agrega como una barra de herramientas y con el chat desplegado del lado derecho (se puede cambiar al izquierdo), mostrando la bandera al lado del usuario seg?n el pa?s de donde se conecte. Su dise?o resulta atractivo, sin embargo sus funciones son muy limitadas, ya que no puedes elegir un nick a menos que te registres, y hasta ahora sigo sin saber c?mo cambiar el avatar una vez que est?s registrado. Aunque eso s?, tiene la ventaja de permitir a los usuarios compartir archivos como PDF, m?sica y fotos.

Una vez que te registres tendr?s el c?digo que puedes usar en tu blog, tambi�n podr?s personalizar los colores del mismo.

Se recomienda tener un script que evite la redirecci?n de pa?ses, ya que el chat s?lo se muestra en la URL que hayamos registrado, as? que si alguien de otro pa?s entra y se agrega otra extensi?n no se ver?.
Chatwee como todos los servicios nuevos, necesita mejorar en muchos aspectos, aun as? para lo b?sico funciona bien, pero s? es una pena que no permita a los invitados usar un nick personalizado.

Enlace | Agregar Chatwee en tu blog

Envolve

Envolve tiene una interfaz similar a la de Chatwee, pero con m?s opciones. Envolve es un chat en una barra que se despliega del lado derecho, pero que adem?s permite que los usuarios se registren usando su cuenta de Twitter, Facebook, con la propia de Envolve, e incluso que permanezcan como an?nimos (esa opci?n se puede deshabilitar) lo cual puede facilitar que los usuarios participen en el chat sin necesidad de estar creando cuentas por todos lados.
La desventaja es que la versi?n gratuita s?lo permite tener 25 usuarios chateando, y las opciones de pago no son muy baratas que digamos.
Para obtenerlo debes ingresar la direcci?n del blog donde lo pondr?s, te registras, y eliges la plataforma (en nuestro caso elegiremos "Otro").

Enlace | Agregar Envolve en tu blog

Como has podido ver son opciones muy interesantes y al menos estas 5 opciones podr?an cumplir las necesidades de muchos. Lo mejor es que pr?cticamente todos son gratuitos y la instalaci?n no es otra cosa que copiar y pegar, as? que poner un chat en tu blog no es nada dif?cil.

Para poner cualquiera de ellos deber?s entrar en Dise?o | A?adir un gadget | HTML/Javascript y ah? pegar el c?digo que te den.