Al fin hago este tutorial que tengo pendiente desde hace ya algo de tiempo, seguro que a Morenay le hará ilusión, pues es quien me pidió que hiciera esta entrada xD El efecto que se busca conseguir es el de la cabecera del Blog, hablo de la imagen que tengo para llevar a la entrada de "Crows", y en la que al pasar por encima el ratón se pasa de una imagen en blanco y negro a una en color, pero no de golpe, sino con efecto de desvanecimiento, gradualmente vaya, consiguiéndose un efecto muy chulo!! Antes de anda, decir que esta entrada se basa en la
siguiente entrada de "Pazosblogger", así que los agradecimientos a ellos!! ¿Por qué he hecho otro tutorial si ese ya está bien? Pues muy fácil, en primer lugar porque quizás puede resultar más complicado (yo lo haré lo más fácil posible), y en segundo lugar porque con su método, sólo podrás poner en tu blog una imagen con dicho efecto, siguiendo los pasos de este tutorial, podrás poner cuantas quieras.
Manos a la obra!! Lo primero que tenemos que hacer es registrarnos en "Dropbox" ¿Por qué? Pues porque el efecto que realizamos tiene la extensión ".js", es decir, es un archivo con código "Javascript" externo a la web, que será llamado cuando haga falta... Tampoco es que haga falta saber esto, que no quiero liaros, lo pongo para que sepáis qué es, a modo informativo vaya jeje. ¿Por qué en "Dropbox"? Es otra cosa que podéis preguntaros, pues porque esta web/"servidor" nos permite almacenar archivos ".js" y que estos funcionen cuando les llamamos. Si tú ya tienes otra "web servidor" que admita este formato, pues "¡chapó!", usa la que tengas pues es indiferente, yo es que he probado como más de 5 sitios y nada!!!! Hasta que descubrí "Dropbox", y ahora todo felicidad :D
· Registrándonos en "Dropbox".
- Una vez en la página principal de la web, le damos a "Create an account", para crearnos la cuenta.
- Rellenamos el formulario con nuestros datos, para después ir al correo y verificar nuestro registro.
- Una vez hecho esto, podemos empezar a subir archivos desde nuestro PC (si instalamos el programa de "Dropbox"), o mediante el navegador como en cualquier otro servidor. Para este caso, el archivo ".js" que subamos debe estar en la carpeta "Public", pues si no puede que no se muestre a todos los usuarios.
- Una vez subido el archivo, para obtener la URL
real y pública, debemos ir al archivo, y pulsar en "Copy public link".
- El código que debemos subir a "Dropbox" podéis descargarlo de
aquí (gracias de nuevo a "
Pazosblogger"). Debéis modificar el nombre del archivo, además de una cosa del contenido, modificad esto $('#rss a') por el nombre que queráis darle, en mi caso quedaría $('#crows a') , una vez hecho el cambio subid vuestro archivo a "Dropbox" como ya se ha dicho.
Una vez registrados en "Dropbox", pasamos a hacer las imágenes que queremos utilizar, yo usaré "Photoshop", porque es con el que suelo trabajar, pero que cada uno use el que tenga o quiera, si le es más fácil, aunque la verdad es que poco hay que hacer xD No pretendo explayarme con esto, sólo explicaré como hacer la imagen en blanco y negro a partir de la que está en color, no pretendo hacer un tutorial de cómo hacer un banner bonito, porque sino esto se haría infinito! xD
· Creando las imágenes en "Photoshop".
- Una vez tengamos la imagen en color a nuestro gusto y tras haberla guardado, simplemente debemos darle a "Imagen/Modo/Escala de grises", para conseguir la misma imagen pero en escala de grises (obvio, ¿no? xD)
Hecho todo esto, nos pondremos a modificar la plantilla que tenemos en nuestro Blog, antes de nada lo recomendable es hacer una copia de seguridad de la platilla, no vaya a ser que os la carguéis!!!
· Modificando la plantilla.
- En primer lugar debemos saber si tenemos instalado "JQuery", que salvo que ya hayáis hecho algún efecto del estilo, no creo que tengáis, para saberlo, la opción más sencilla es pulsar "Control + F", para buscar en la plantilla si lo tenéis, de no ser así, tenéis que ponerlo encima de la etiqueta </head>. El código a poner es en el que tengáis vosotros subido el "JQuery", en "
Pazosblogger", facilitan su dirección, por lo que finalmente pondríamos: "
<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jquery-1.2.6.js' type='text/javascript'/>"
, justo encima de "</head>".
- Justo después del código anterior ponemos el siguiente: <script src='AQUÍ PONES LA URL PÚBLICA DE TU ARCHIVO EN DROPBOX' type='text/javascript'/> , para obtener esta URL pública, revisar el último punto del registro de "Dropbox", en mi caso la URL sería la siguiente: <script src='http://dl.dropbox.com/u/24171441/crows.js' type='text/javascript'/>
- Ahora debemos añadir el código CSS (hojas de estilos) con el que daremos formato a nuestro efecto, hay que pegarlo encima de la etiqueta
]]></b:skin> , las partes en rojo tienes que modificarlas con la dirección de tus imágenes, donde pone
#rss, tendréis que cambiarlo por el que pusisteis en el archivo que subistéis a "Dropbox", en mi caso cambiaría
#rss, #rss a, #rss span.hover por
#crows, #crows a, #crows span.hover. Las propiedades "width" y "height" tendréis nos permitirán modificar el alto y ancho de las imágenes
el código es el siguiente:
/* CSS efecto desvanecimiento*/
#rss{
width:150px;
height:150px;
margin:auto;
position:center;
display:block;}
#rss a{
background-image:url(url-de-tu-imagen-escala-de-grises);
background-repeat: no-repeat;
position:center;
display:block;
width:150px;
height:150px;
}
#rss span.hover{
width:150px;
height:150px;
background-image:url(url-de-tu-imagen-original);
background-repeat: no-repeat;
position:center;
display:block;
}
- Por último debemos crear un "gadget" que llame al código y al CSS, para ello, ve a "Diseño\Añadir gadget\HTML/Javascript", y pega lo siguiente:
<div id="rss">
<a href="URL-de-tu-enlace" title="Texto"></a></div>
En id ponéis lo mismo que pusisteis en el archivo subido a "Dropbox", así como en la plantilla, es decir, en mi caso pondría "crows". En title, podeís poner algo o dejarlo vacío, será el texto que aparezca al pasar el ratón por encima, acompañando al efecto.
Hechos todos los pasos anteriores ya tendrías tu primera imagen con este efecto, para poner otra bastaría con subir de nuevo un archivo a "Dropbox" con otro nombre, y en el que cambiaréis el #rss, por otro como podría ser #crows2. Después hacéis las dos imágenes, en color y blanco y negro igual que antes. Os saltáis el paso de implementar el "JQuery" pues ya lo tenéis de antes, y de nuevo ponéis
<script src='AQUÍ PONES LA URL PÚBLICA DE TU ARCHIVO EN DROPBOX' type='text/javascript'/> debajo del que ya teníais, en mi caso quedaría así
<script src='http://dl.dropbox.com/u/24171441/crows.js' type='text/javascript'/> <script src='http://dl.dropbox.com/u/24171441/crows2.js' type='text/javascript'/>
</head>
Luego basta con añadir en el CSS las características de la nueva imagen, justo debajo del que ya teníamos, quedando al final algo como esto:
/* CSS efecto desvanecimiento*/
#crows{
width:150px;
height:150px;
margin:auto;
position:center;
display:block;
}
#crows a{
background-image:url(url-de-tu-imagen-escala-de-grises);
background-repeat: no-repeat;
position:center;
display:block;
width:150px;
height:150px;
}
#crows span.hover{
width:150px;
height:150px;
background-image:url(url-de-tu-imagen-original);
background-repeat: no-repeat;
position:center;
display:block;
}
#crows2{
width:150px;
height:150px;
margin:auto;
position:center;
display:block;
}
#crows2 a{
background-image:url(url-de-tu-imagen-escala-de-grises);
background-repeat: no-repeat;
position:center;
display:block;
width:150px;
height:150px;
}
#crows2 span.hover{
width:150px;
height:150px;
background-image:url(url-de-tu-imagen-original);
background-repeat: no-repeat;
position:center;
display:block;
}
Bueno pues eso es todo, espero que le sirva a alguien, y siento si es un poco difícil de comprender, pero como se ve hay que "tocar mucha cosa". Actualmente utilizo este código y no me da problema alguno, si alguien tiene alguna duda que me la deje en los comentarios, o me mande un correo a vivenciasfrikis@gmail.com, que se intentará solucionar ;)
