Efecto de desvanecimiento al cargar las páginas del blog

24 de octubre de 2012 145 comentarios ,


Un efecto muy habitual en jQuery es el efecto fade que es un efecto de desvanecimiento, y podemos usarlo de tantas maneras como por ejemplo en la navegación del blog. El siguiente script hace justamente eso, carga la página con un efecto de desvanecimiento cuando navegamos en los enlaces internos que hay en el blog, como por ejemplo los títulos de las entradas, los enlaces de las etiquetas, los enlaces de navegación, archivo, etc.

Puedes ver un ejemplo en este blog de pruebas, haz click en el título de alguna entrada y verás el efecto de desvanecimiento al cargar la página.

Para poner este efecto de desvanecimiento en tu blog agrega después de <head> el siguiente código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);

$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #f2f2f2; /* Color del desvanecimiento */
}
</style>
Guarda los cambios y listo. En color verde puedes ver dónde cambiar el color con el que se desvanece la página al cargar.

El script original oculta el body de la página mientras carga, yo he preferido cambiar esa propiedad por un z-index negativo para evitar problemas con los robots de los buscadores y que esto pueda efectar el posicionamiento.

¿Problemas?

Hay que considerar que este tipo de efectos podría reatrasar el tiempo de carga del blog, así que se recomendaría su uso sólo cuando el blog es rápido en cargar y no tiene tantos scripts.

Si ya usas otra versión de jQuery elimina las demás y deja sólo esta que es la que se leerá primero.

Si usas Mootools o Scriptaculous tendrás que hacerle unas modificaciones al código para que puedan ser compatibles.

Si tuvieras otro script con un efecto de desvanecimiento podría interferir con este y hacer que no se vea nada en la página excepto el color del desvanecimiento, en esos casos también es mejor prescindir de este script.

También puedes usar este efecto sólo en algunos enlaces, por ejemplo, si quieres que se aplique al hacer click en los títulos de las entradas, en los enlaces de navegación (entradas antiguas y entradas recientes), y en el gadget de Páginas, entonces cambia esta línea:
$("a").click(function(event){
Por esta:
$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){
En algunos casos podrá cargar la página por un segundo y luego cargarla con el efecto de desvanecimiento, esto puede ser "normal" debido a que el navegador está tardando en leer el script al cargar la página.

Fuera de estos inconvenientes me parece que es una forma muy elegante de cargar las páginas del blog mientras navegamos por ellas, ¿no creen?

Vía | CGnauta


145 comentarios en:

" Efecto de desvanecimiento al cargar las páginas del blog "

  1. Mi blog ya tiene muchos scripts... y se ha vuelto lento... asi que no creo que sea buena idea usar este por el momento.

    ResponderEliminar
  2. muy bueno te invito a que visites mi blog -> http://www.culturizateconelflaco.blogspot.com/

    ResponderEliminar
  3. muy buena potro siempre siendo tu fans :)

    ResponderEliminar
  4. Exelente lo aplico de inmediato en mi blog ;)!

    ResponderEliminar
  5. SALUDOS POTRO:
    ME PARECE BUENISIMO. SIN EMBARGO, LO QUEISE APLICAR EN MI BLOG Y CUANDO CLICKEO EN ENTRAR LA PANTALLA SE DESVANECE A BLANCO Y ASI SE QUEDA. HICE ALGO MAL?

    ResponderEliminar
    Respuestas
    1. Lee de nuevo la entrada, en la parte que habla sobre los problemas se menciona eso, además del hecho que tienes otras versiones de jQuery.

      Eliminar
  6. Jeje funciona de lujo. Un saludo después de tanto tiempo!!

    ResponderEliminar
  7. Como siempre, publicando cosas que transforman nuestro blog, en un paraíso online.

    ResponderEliminar
  8. Genial Potro!! Muchas Gracias, lo probaré en mi blog. Saludos!!

    ResponderEliminar
  9. Muy bueno Potro! Muchas Gracias! aunque lo tuve que sacar porque no es compatible con mi menú horizontal que está arriba del blog. Al abrir el menú, queda la página toda del color del desvanecimiento. Saludos

    ResponderEliminar
  10. Tengo otro script con un efecto de desvanecimiento, y no puedo usarlo...que pena!

    ResponderEliminar
  11. Hola potro:
    ¡Me funciona de perlas y todo bien! el unico problema es que cuando pincho en una imagen de un post mio, sale el visor de blogger y despues se quita y se va directamente al link de la imagen... no se si me he explicado...

    mi blog: www.pequemundossims.blogspot.com

    He Potro pincha en una imagen de un post mio y sale el visor pero despues dirige al link de la imagen... ¿Que hago para que no suceda eso?

    ResponderEliminar
    Respuestas
    1. Hola Antonio, podrías usarlo sólo en los títulos como se menciona al final de la entrada, así no tendrías problemas con otro tipo de enlaces como en el de las imágenes ya que el scritp no puede excluir elementos.

      Eliminar
    2. Vale yo solo lo quiero para los titutos y cuando vas a clikar en unas de las parte negra... que hago para que no suceda lo de las imagenes que codigo tengo que eliminar?

      Eliminar
    3. Si lo aplicas sólo para los títulos como se menciona en la entrada, no afectará ningún otro enlace, ni si quiera el de las imágenes así que estas se abrirán como siempre.

      Eliminar
  12. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hace casi un mes te respondí esa pregunta en la entrada sobre las hojas de otoño cayendo en el blog.

      Eliminar
  13. Hola muy copado el blog. te hago una pregunta como pongo en la intro de mi blog el boton de me gusta de facebook. osea para que puedan entrar a mi pagina tienen que poner me gusta y una cruz de cerrar por si no quieren poner me gusta. yo vi este http://ciudadblogger.com/2011/05/crear-un-intro-para-el-blog.html
    pero ese es de bienvenida yo quiero de facebook.
    Muchas Gracias!

    ResponderEliminar
    Respuestas
    1. No sé decirte Matias, he visto por la red un gadget que lo hace pero nunca lo he guardado en mis favoritos, pero si buscas en Google quizá lo encuentres ya sea ese o alguno parecido.

      Eliminar
  14. heheehehe las imagenes de mi blog se desvanecen creo que no podre usarlo

    eh potro como le ago para que mi blog tenga el efecto de agrandar el logo cada ves que pase el cursor por encima me gusta ese efecto :)

    ResponderEliminar
    Respuestas
    1. Aquí está esa entrada:
      http://ciudadblogger.com/2011/11/aumentar-el-titulo-del-blog-o-imagen-de.html

      Eliminar
  15. Como siempre, genial!! :) Ya lo he aplicado a mi blog. Gracias Potro!!

    ResponderEliminar
  16. Hola de nuevo Potro :) Un detalle... Como te he comentado antes, he aplicado este efecto en mi blog. Me he dado cuenta que los enlaces que pongo en mis posts con target='_blank' (abrir en una pestaña nueva) no funcionan. ¿Se puede solucionar esto sin tener que quitar este script?. Gracias de antemano y un saludo! ;)

    ResponderEliminar
    Respuestas
    1. No Javi, el script sólo se ejecuta cuando los enlaces se abren en la misma página.
      Saludos.

      Eliminar
    2. Muchas gracias!! Un saludo ;)

      Eliminar
  17. Hola, Potro. He intentado cambiar el tipo de fuente de las entradas de mi blog desde el diseñador de plantillas pero no he sido capaz. Sólo quiero cambiar la fuente del cuerpo de las entradas, no del resto del blog. ¿Podrías ayudarme?

    ResponderEliminar
    Respuestas
    1. Hola, puedes poner los estilos directo en la plantilla, por ejemplo:

      .post-body {
      font-family: Arial;
      }

      Eliminar
  18. Problemicas que igual tu sabes solucionar... ahora al pulsar en siguiente ( dentro del slider que nos recomendaste tu) en vez de pasar de noticia se queda todo desvanecido. alguna idea?


    blogp3ru.blogpspot.com

    ResponderEliminar
  19. Hola potro te vengo con otro asunto:
    Pues en el buscador de google cuando pongo mi nombre de mi pagina web "pequemundossims" pues aparece mi pagina en el primer resultado pero abajos lo que esta rodeado de rojo quiero quitarlo para que no aparezca...¿Como lo hago?

    Aquí te dejo una imagen: https://dl.dropbox.com/u/23889866/Problema%20SEO.png
    ¿lo que esta rodeado de rojo como se puede eliminar?

    ResponderEliminar
    Respuestas
    1. Esos son los resultados de Google, no podemos decirle qué queremos que muestre y que no, sobre todo cuando esos resultados no son nuestro blog sino sitios de alguien más.

      Eliminar
  20. vale ya he resuelto mi anterior duda, pero la nueva es:

    Se pueden poner mas parametros aparte de .post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs ??? porque justo esas funciones apenas se usan en mi blog y la que me gustaba era la de cambio de pagina que ya no se aplica, como quien dice solo se desvanece cuando pasas de una entrada a otra por el menu pequeño de entrada antigua o entrada mas nueva :S me he explicado bien?

    ResponderEliminar
    Respuestas
    1. Claro, sólo localiza la clase de los enlaces a los que se la quieres aplicar, luego antes de .post-title a, agrega las clases a las que se lo aplicarás, por ejemplo:

      .clase1, clase2, otraClase,

      Eliminar
    2. Como la has resuelto? esque en el mio pasa que das a la noticia del Slideshow y se queda en blanco profavor ayudarme... :S

      Eliminar
    3. Úsalo sólo para los títulos de las entradas como se menciona en el post, así no tendrás ese problema.

      Eliminar
    4. De todas formas ncon este efecto las cosas que pones para que se habran en una pestaña nueva.... no salen en una pestaña nueva sale en la misma ventana y eso complica algo mis cosas :S.

      ¿Alguna solucion?

      Eliminar
    5. Mira el comentario #43, hay una opción de un usuario que soluciona ese problema.

      Eliminar
  21. Hola Potro, no sé si me puedes ayudar en este asunto. Resulta que antes, en mi blog, cuando buscabas algo en el gadgets de buscar, el resultado de la búsqueda aparecía inmediatamente debajo, antes que la última entrada del blog, pero ahora no, ahora aparece debajo de la entrada con lo que has de pasar toda la entrada y ver los resultados y lo normal es que ni te enteres que sí ha buscado el buscador. ¿Hay forma de que aparezcan como antes, ants de la antrada?
    Y otra cosa, no sé por qué, algunos comentarios me aparecen en una columna pequeñita a la derecha, muy incómoda de leer, no como los demás. Pasa con algunos y mis respuestas también he de hacerlas en estas columnitas chiquititas ¿qué problema es este?
    Muchísimas gracias Potro.

    ResponderEliminar
    Respuestas
    1. Hola Viena, no sé porqué suceda lo del buscador, ¿recuerdas si hiciste algún cambio en el buscador o en la plantilla antes de que eso sucediera?

      Lo de los comentarios podría ser por algunos estilos que pudiste haber añadido, ¿me puedes mostrar algún comentario donde se vea de esa manera?

      Eliminar
    2. Hola Potro: No hice ningún cambio en la plantilla, ni en el buscador. No sé por qué el resultado de la búsqueda sale debajo de la entrada.
      En cuanto al problema con los comentarios, mira en esta página,http://saboresdeviena.blogspot.com.es/2012/10/fuente-de-avellana.html
      hay un par de respuestas mías a comentarios que salen así. He observado que a veces, entra un comentario en la columna así, con el problema y al contestarlo yo, se arregla, parece un problema con los márgenes de la plantilla, o algo así.
      Muchas gracias por tu atención.

      Eliminar
    3. Pues es extraño lo que pasa con el buscador, yo acabo de ponerlo en un blog de pruebas y funciona bien, incluso lo puse debajo de la cabecera (pensando que podría ser eso) pero sigue funcionando :/

      Lo de los comentarios parece que es por los estilos que añadiste que no están declarados los estilos donde deberían. Te recomiendo estas 2 entradas de Vagabundia, ahí se explica cómo personalizarlos, seguro que de esa forma no tendrás esos problemas:
      http://vagabundia.blogspot.com/2012/01/comentarios-anidados-los-estilos-paso.html
      http://vagabundia.blogspot.com/2012/01/comentarios-anidados-los-estilos-paso_19.html

      Saludos.

      Eliminar
    4. Gracias Potro, miraré esos enlaces, pero me resulta raro porque no he movido estilos ni la plantilla de ninguna forma.
      Te agradezco el tiempo que me has dedicado.
      Un abrazo.

      Eliminar
  22. Ese código es más grande de lo debido, está diseñado para utilizarlo con fadeIn y fadeOut. Si se va a utilizar solo con fadeOut no es necesario ocultar el body ni ponerle un z-index negativo. Le sobran estas dos lineas:

    $("body").css("z-index", "-10");
    $("body").fadeIn(0);

    Por otro lado, aplicarlo a todos los enlaces es una locura, no creo que haya ni un solo blog en donde esto no genere algún conflicto, es mucho mas acertado especificar las clases tal y como explicas en la sección "¿Problemas?".

    El efecto es muy interesante, tal vez lo utilice en mi blog. Saludos.

    ResponderEliminar
    Respuestas
    1. Seguramente es mejor utilizarlo sólo en algunos enlaces, en eso estoy de acuerdo, pero como siempre es el usuario quien deberá decidir.

      Esas líneas extras se las añadió el autor porque algunos reportaron problemas en algunas versiones con algunos navegadores, cuando usaban el botón "atrás" se quedaba la página en blanco, es por eso que fueron agregadas.

      Saludos.

      Eliminar
  23. Hola Potro, no encuentro donde puedo dejar este comentario. Pero cada vez que me llegan tus correos, para ver la entrada tengo que ir a tu blog, como que es perfecto. En cambio mi entrada en correo electronico sale completa y no se como modificarlo.
    Gracias, espero puedas ayudarme a solucionar el problema-

    ResponderEliminar
    Respuestas
    1. Hola Venus Tarot, mira esta entrada, ahí se explica cómo mostrar resumido el feed:
      http://ciudadblogger.com/2011/07/mostrar-resumido-el-feed-del-blog.html

      Eliminar
    2. Gracias Potro, sos un genio.
      A tu disposicion. Saludos

      Eliminar
  24. muy bueno pero hace un poco lento el blog y al abrir el menu de arriba se queda todo en el color de desvanecimiento,hay solucion?

    ResponderEliminar
    Respuestas
    1. Úsalo sólo para los títulos de las entradas como se menciona al final. La velocidad de carga del blog no se reducirá, ese es uno de los inconvenientes de añadir efectos.

      Eliminar
  25. Hola potro!

    tengo un problema con un blog y siempre que pienso en blogger visito ciudadblogger, espero si me puedes ayudar :s

    con un amigo tenemos un blog colaborativo, el subió un par de post y desde ese momento sólo muestra 1 entrada en el HOME (no obedece la señal de mostrar 7 entradas) antes todo marchaba bien. (no se realizado ningún cambio en el código)

    ¿cual puede ser el error?
    el subió una tabla que copio de word al último articulo, ¿puede ser ese lo que causa el problema?

    te dejo el link por si tienes tiempo y ganas de ayudarme http://www.proteinas.co


    Buen dia :)

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario zux, no hay error como tal, todo se debe a la velocidad de carga del blog, si de pronto publicas una entrada muy extensa, o con muchas imágenes, videos, etc. entonces tarda más en cargar el blog y se muestran menos entradas. Esa es la tan poco querida autopaginación:
      http://ciudadblogger.com/2011/06/cuando-en-el-blog-aparecen-menos.html

      Eliminar
    2. Hola

      parece que arregle el error antes de que lo visitaras :S

      La tabla copiada de word causaba algún tipo de problema, pero con esta herramienta todo se soluciono http://tableizer.journalistopia.com/


      Pasa la tabla de word a una tabla en código valido para blogger :D

      Podrías recomendarla para todos los lectores

      Eliminar
    3. Es parte de lo mismo zux, cuando pegas algo de Word se van infinidad de códigos que no son necesarios en Blogger, éstos aunque no se ejecuten los lee el navegador al cargar y puede demorar su carga; la velicidad de carga es la única razón por la que aparecen menos entradas ;)

      Eliminar
  26. Hola potro me gustaria saber si se puede poner que mi blog que al buscarse en google saliera como apartados debajo del titulo del blog

    ResponderEliminar
    Respuestas
    1. Hola Adrian, eso depende de Google, ellos son los que lo hacen automáticamente a los sitios que creen que deben tenerlo, no podemos solicitarlo ni nada parecido.
      Saludos.

      Eliminar
    2. Muchas gracias por responderme.

      Eliminar
  27. Hola Potro.) Me podrias decir como poner una imagen de fondo a un gadget??? Gracias!)

    ResponderEliminar
    Respuestas
    1. Sólo localiza el ID del gadget y aplícale el estilo que quieras, por ejemplo:
      #Gadget1 {
      background:url(URL de la imagen);
      }

      Eliminar
    2. Vale ya lo hecho, pero ahora el problema es que la imagen no ocupa el sitio que yo quiero y se repite=( Como suvirla un poco mas y como hacer que no se repita sino sea la unica que se vea??
      Gracias...

      Eliminar
    3. Mira como quedo: http://prntscr.com/ifi4w
      Ayuda plis. Como ponerlo bien, es decir, un poco mas alto y que no se repita??? Gracias.)

      Eliminar
    4. ¿Cuál es el blog y gadget al que se lo has aplicado?

      Eliminar
  28. No funciona y tengo tu script y todo y carga muy rapido y el nombre-de-mi.blogspot.com funciona el script porque sera? http://mundo-rayo.blogspot.com/

    ResponderEliminar
  29. Hola Potro me podrias decir porque no funciona el efecto de desvanecimiento ?

    ResponderEliminar
    Respuestas
    1. Tienes otra versión de jQuery, además tienes Scriptaculous, todo eso se menciona en la entrada ;)

      Eliminar
  30. Querido Potro:

    Con todo el placer del mundo, te entrego el siguiente premio, a mi consideración éste se queda chingo para el gran trabajo que haces con tu blog y es por esa razón es que te concedo el siguiente premio: http://www.sexualidadenfamilia.com/2012/10/el-blog-hablemos-de-sexualidad-en.html

    Besos y abrazos... ¡Sos lo máximo!

    ResponderEliminar
  31. Hola Potro¡ Aquí te dejo algunas dudas para saber si me las puedes resolver:

    1. ¿Es posible que en la maqueta Magazine, aparezcan noticias en vertical justo a la derecha de las que se muestran en horizontal a partir de la tercera fila? Es decir, que no quede esa columna vacía tal y como se puesta ahora:

    http://optasportsmadrid.blogspot.com.es/

    2. ¿Es posible delimitar el texto de las entradillas que aparecen en la portada a un número exacto de palabras o de renglones? Actualmente aparecen cortados...

    Un saludo y gracias¡

    ResponderEliminar
    Respuestas
    1. Hola Fernando, el orden y forma de las entradas no se puede modificar en esas plantillas, no hay configuración para ello. Tampoco se puede especificar cuántos caracteres se mostrarán :(

      De todas formas, si después me entero de algo lo publico ;)
      Saludos.

      Eliminar
  32. hehehehe :D
    http://beben-koben.blogspot.com/2012/10/posting-when-sick-grrrrrr.html

    ResponderEliminar
  33. Hola!! en mi blog vendere unas playeras del blog ja! como hago un efecto de que gire al pasar el mouse asi como tu ?
    lo quiero insertar en un gadget

    ResponderEliminar
    Respuestas
    1. No tengo una entrada sobre ello pero son transiciones con CSS3, en la red encuentras información sobre el tema ;)

      Eliminar
  34. Hola Potro necesito tu correo, pues te tengo que comentar unas cositas a ver si me puedes ayudar. Saludos.

    ResponderEliminar
  35. Hola Potro necesito tu correo, pues te tengo que comentar una cosa haber si me puedes ayudar. SALUDOS!

    ResponderEliminar
    Respuestas
    1. Hace mucho que ya no están disponibles las consultas por correo Adrian, todas las preguntas se hacen por aquí ;)

      Eliminar
    2. Bueno pues te comento por aqui. Resulta que desde hace dos semanas mi ordenador al descargarse las plantillas de blogger los archivos xml no los lee y a la hora de querer subirlos a blogger no se puede que es lo que pasa??

      Eliminar
    3. ¿A qué te refieres con que no los lee? ¿qué sucede cuando los quieres subir al blog, te marca algún error, cuál?

      Eliminar
    4. Pues que en vez de yo ver esto http://i1245.photobucket.com/albums/gg587/adbaar1905/mixmlincsharp.jpg veo esto otro http://i1245.photobucket.com/albums/gg587/adbaar1905/Captura-1.png pero eso pasa con todas las plantilla que me descargo. Que puede ser?

      Eliminar
    5. Quizá alguna configuración de tu ordenador, tal vez tengas que darle click derecho y decirle que esos archivos los abra con algún programa. De ordenadores no sé mucho así que no sabría bien cómo ayudarte :(

      Eliminar
  36. El Potro mira aca tengo uno muy bueno http://www.sourcecodester.com/ podrias hacer un tutorial de como hacerlo te lo agradeceria mucho

    ResponderEliminar
  37. Hola, Potro. Los títulos de la sidebar de mi blog aparecen por defecto en mayúsculas, ¿podrías indicarme qué tengo que modificar para que aparezcan en minúsculas?

    ResponderEliminar
    Respuestas
    1. Busca el text-transform: uppercase; que está dentro de h2 { y elimínalo.

      Eliminar
  38. Potro hice mi propia versión de esto, es mucho mas ligera e ignora los enlaces con target="blank", ademas también es compatible en IE 8.
    Habría que crear un div debajo de <body> como este <div class='overlay' style='display:none;'/> los estilos son estos:
    .overlay {position:fixed;top:0;left:0;width:100%;height:100%;min-height:100% !important;overflow:hidden;z-index:99999;background:#f0f0f0;}
    y la función de jQuery
    <script type='text/javascript'>
    $(function() {
    $('a').not('a[target]').click(function(){
    $('.overlay').fadeIn(800);
    });
    });
    </script>

    ResponderEliminar
    Respuestas
    1. Es una muy buena opción Andres, gracias por compartirla :)

      Eliminar
    2. No se como aplicarlo me e liado :S

      Eliminar
    3. <!-- Pega todo esto debajo de <body> -->

      <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- Borra esta linea si quieres que aparesca en todas partes-->
      <div id='Preloader' style='text-align:center;padding-top: 20px;'>
      <div id='centrado'>
      </div>
      </div>
      <script type='text/javascript'> <!-- este es el script -->
      setTimeout(function() {
      $(&#39;#Preloader&#39;).fadeOut(&#39;slow&#39;);
      }, 3300); // Cambia el numero 3300 por lo segundos que quieras mantener la imagen de cargando 1000 equivale a 1 segundo
      </script>
      </b:if>

      <!-- Este es el CSS lo pegas entre las etiquetas skin de blogger (antes de ]]></b:skin>)-->

      #Preloader{position:fixed;top:0;left:0;width:100%;height:100%;min-height:100% !important;overflow:hidden;z-index:99999;background:#f0f0f0;}
      #centrado{margin:350px auto;width:32px;height:32px;
      background:url(PEGA AQUÍ LA URL DE LA IMAGEN)}


      ESPERO LES SIRVA :D

      Eliminar
    4. se me olvida!!! (solo si muestra la imagen al cargar)
      si tu plantilla no esta habilitado el jQuery lo que hará que no terminara el ciclo de carga y se quedara la imagen estática, para solucionar esto solo agrega esto antes de...

      <head>

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

      y con eso se soluciona y queda al 100 :)

      Eliminar
  39. Hola Potro, gran tutorial.
    Me gustaría que, en vez de un color, fuese una imagen el motivo del desvanecimiento, para mantener mi imagen de fondo de Blog.
    No sé si me he explicado bien.
    Gracias de antemano, Potro!

    ResponderEliminar
    Respuestas
    1. Hola Simon, si quieres poner una imagen en lugar de un color sólido entonces cambia esta línea:
      background-color: #f2f2f2; /* Color del desvanecimiento */

      Por esta:
      background: url(URL de la imagen);

      Eliminar
    2. Me da este problema:
      Error al analizar XML, línea 24, columna 133: The reference to entity "tw" must end with the ';' delimiter.
      Lo que pongo es esto:
      background url(http://themes.googleusercontent.com/image?id=1_UPSuFGxHEaIUme6AnAeu5ZvDnijFNnoLXkl6NuCpTfWQN5BRuDJV_NkibASw-94tFfA&tw=100&th=60&crop=TOP);

      Eliminar
    3. Mira esta entrada para que veas cómo obtener la URL de la imagen correctamente:
      http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

      Eliminar
  40. Sólo para los títulos de las entradas, al final se menciona eso.

    ResponderEliminar
  41. Hola potro.
    He probado el script y solo quiero que funcione para los links de las páginas que he creado. No tengo menú y los enlaces a las páginas las he colocado en un gadget. ¿Cómo lo hago para que sólo funcione ahí?
    Gracias. Un lujo tenerte a mano.

    ResponderEliminar
  42. Otra cosa que se me ha olvidado. Cuando pulso sobre un enlace la pagina se desvanece a negro porque es el color que he puesto. Luego salta a blanco y después aparece la página nueva de golpe. ¿Es posible que no aparezca el blanco y que la nueva página aparezca poco a poco, como con el desvanecido al revés?
    Gracias.

    ResponderEliminar
  43. Perdón Potro. Soy un pesao. Otra cosa que se me ha olvidado.
    ¿Cómo hacer para que una página sea la principal del blog?
    Es decir, quiero que cuando se abra el blog se abra con una página que no sea la de las entradas, sino una que yo quiera. ¿Es posible?
    Gracias otra vez.

    ResponderEliminar
    Respuestas
    1. No es posible Arandelas 281, en la portada del blog siempre se mostrarán las últimas entradas. Si quieres que éste efecto sólo se ejecute en las páginas encierre el código en una condicional:
      http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

      Lo otro quizás sea por algún otro script que tengas, no debería suceder.

      Eliminar
    2. El blog es nuevo, no tiene nada más que la plantilla y dos páginas, el único script que tiene es este. Además sólo pasa en chrome. En los demás navegadores no sale el blanco pero sí aparece la página de golpe tras desvanecerse la anterior. Te dejo la dirección para que lo veas:
      http://i-conosprogramacion.blogspot.com.es

      Eliminar
    3. Es que con los cambios que le hiciste al script no está funcionando, si lo pones tal como está en la entrada deberá funcionar bien, porque al menos ahora no hace ninguna función.

      Eliminar
    4. Hola Potro.
      Claro, realmente no has visto nada porque el script le tenía desactivado. He aplicado el código de Andrés Ardilla y el resultado es muy parecido.
      Para simplificar el tema, quiero evitar el desvanecimiento cuando pulso sobre un link que abre el programa de e-mail predeterminado (outlookm, messenger, windows-live,etc). Este link solo está en una página y quiero anular el desvanecimiento al pulsar sobre él, ya que la pantalla se desvanece y no vuelve.
      Un saludo y gracias nuevamente

      Eliminar
    5. No hay exclusiones en el código, pero puedes ponerlo sólo para que haga efecto en los enlaces de las entradas como se menciona en el post, con el método que Andrés propone no sé decirte, no lo he aplicado.

      Eliminar
  44. Hey Potro, una consulta. En mi blog (onmechmice.com) hay un slider que venía por defecto en la plantilla y de verdad me encanta y quisiera saber cual es el código o script en el html del blog que lo hace funcionar correctamente para ponerlo en algún otro blog con diferente plantilla, gracias por la ayuda. Excelente blog, sigue así!

    ResponderEliminar
    Respuestas
    1. No sé decirte Dan, no conozco el slider, quizá el autor de la plantilla pueda ayudarte.

      Eliminar
  45. Hola potro , he aplicado a mi blog el efecto desvanecimiento solo en las entradas y me va bien .Quisiera aplicarlo también en todos los sitios pero que se pudiera seguir usando target='_blank' .Entiendo que el comentario 43 lo soluciona , pero no lo se interpretar y no se bien como y donde lo tengo que pegar.Me puedes ayudar.Gracias El Potro.

    ResponderEliminar
    Respuestas
    1. La verdad no lo he usado, supongo que sólo hay que añadir ese código quizás en lugar del que doy en la entrada.

      Eliminar
  46. No logro hacer que me funcione :/

    ResponderEliminar
    Respuestas
    1. Quizá tienes alguno de los problemas que se mencionan en la entrada.

      Eliminar
  47. Funciona el código, pero me empezó a dar problemas con el script de fanbox para facebook ya no se deslizaba para ningún lado.

    Creo que si alguien lo va a implementar debería de tener las fanpage en windget

    ResponderEliminar
    Respuestas
    1. Si alguien lo va a implementar debe leer la parte de la entrada que habla sobre los problemas, así sabrán cómo resolver esos inconvenientes ;)

      Eliminar
  48. Querido amigo. Primero preguntaré como estás y si las cosas que te pasaban se han solucionado.
    Ahora te expondré con el problema que me encontré hoy al ir a cargar entradas en el Kiosco de Crochet. Como no tienes una entrada específica sobre Páginas es que escribo aquí. BLOGGER ME/NOS COMPLICA MÁS..... COMO SIEMPRE. Cuando cargo una Entrada, paralelamente ya ingresé IMÁGENES en una página (porque por el tema de páginación, recuerdas que no puedo poner muchas imágenes en la propia Entrada) Entonces Blogger antes me daba la posibilidad que luego de dar de alta a la página, Blogger te pone todo el listado de páginas (como las Entradas) y en cada una HABÍA un item (aparte de Editar, Eliminar, etc.) VISUALIZAR, este item nos daba la posibilidad de obtener el ENLACE que luego yo ponia en la Entrada para llamarla desde ahí. Este item HOY YA NO ESTÁ. Te adelanto que en VISTA PREVIA te da un enlace de VISTA PREVIA que queda sin posibilidad de seguir en el blog.Sabes si tiene solución? Puedo hacerlo de otra forma? Espero haber sido claro. Gracias por todo y que estés bien.

    ResponderEliminar
    Respuestas
    1. Hola, gracias por preguntar, las cosas aún no se resuelven pero espero que ya sea pronto :)
      Parece que cambiaron el "Visualizar" por "Ver", ahora desde ahí puedes obtenter la URL.
      Saludos!

      Eliminar
  49. Hola!acabo de poner este efecto solo en los enlaces,no en las fotos y me gusta mucho como queda,sólo que en algunas entradas(al cargrase)aparece un recuadro blanco que luego desaparece.Te paso el blog y asi pruebas(a veces aparece,a veces no)

    http://tomatosverdes.blogspot.com.es/
    Muchas gracias :)

    ResponderEliminar
    Respuestas
    1. Lo he probado accediendo en todas las entradas que aparecen en la portada pero no veo ningún recuadro :/

      Eliminar
    2. Prueba con postres,frugivorismo y en impulsos positivos,lo acabo de probar y siguen saliendo :(((
      y perdona por ser tan pesada

      Eliminar
    3. Pues no, sigo sin ver nada, a menos que sea cuestión del navegador.

      Eliminar
  50. Genio!!! lo aplique en mi blog y quede buenisimo! Gracias por todo!

    ResponderEliminar
  51. Amo esta web, es de mucha utilidad, gracias por crearla :D
    A favoritos y lo mando a creditos de mi blog, gracias...

    ResponderEliminar
  52. Hola Potro!!!

    Te cuento, que este efecto esta genial, pero tiene un defecto, por ejemplo al momento de hacer click en "comentarios" se abre tanto la ventana emergente y al mismo tiempo la pagina principal abre la misma ventana. Lo malo, es que uno no puede volver al inicio :/ ... Espero que me puedas ayudar.

    Saludos

    P.D. espero que me haya dejado entender :S

    ResponderEliminar
    Respuestas
    1. Hola Yami, la mejor opción es que uses los comentarios debajo de la entrada, así no tendrías ese problema.
      Saludos.

      Eliminar
  53. Potro!! Efecto fade al cargar el fondo del blog?

    ResponderEliminar
  54. les dejo mi blog muy bueno. www.lomasvistodelaweb.com.ar

    ResponderEliminar
  55. Y para hacerlo en una página html, es decir, que no sea un blog, lo intenté pero no funciona. Espero me puedas ayudar

    ResponderEliminar
  56. Disculpa me preguntaba si me podrías ayudar para insertar éste efecto en una página HTML, es decir, no es un blog, lo intenté pero sin conseguir resultados.

    Espero que puedas ayudarme, muchas gracias

    ResponderEliminar
  57. Y para hacerlo en una página html, es decir, que no sea un blog, lo intenté pero no funciona. Espero me puedas ayudar

    ResponderEliminar
    Respuestas
    1. Es el mismo procedimiento, de hecho este efecto está hecho originalmente para sitios web.

      Eliminar
  58. Gracias potranco como siempre tu ingenio es muy bueno.

    ResponderEliminar
  59. EXCELENTE MUCHAS MUCHAS GRACIAS
    www.wapush.com

    ResponderEliminar
  60. He aplicado este efecto a mi blog y, aparentemente, todo iba bien...hasta que me he dado cuenta de que al intentar abrir alguno de los spoilers que tengo (el código de los spoilers está sacado de ciudad blogger). Al abrir alguno, tras el desvanecimiento, la página se quedaba en blanco. De momento, he quitado el efecto. ¿Cómo puedo solucionar ese problema? Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Asier, acabo de poner este efecto de desvanecimiento en un blog de prueba, al mismo tiempo he puesto un spoiler en una entrada y ambos trucos funcionan sin ningún problema, el spoiler muestra la imagen que puse, y el efecto de desvanecimiento se conserva al navegar entre las entradas.

      No sé si tal vez el spoiler lo hayas puesto usando un enlace con etiqueta A, si así fuera puedes cambiarlo por un botón INPUT.

      Eliminar
  61. Era exactamente eso. En spoiler es del tipo a href=. El caso es que no me gusta como queda con botón y tendría que cambiar un montón de spoilers...me temo que me quedo sin efecto desvanecimiento. Gracias por tu ayuda, Potro.

    ResponderEliminar
  62. tengo un problema con los target blank...
    en vez de abrirse una nueva pestaña se cargan en la misma... el efecto afecta el normal funcionamiento de la apertura de ventanas nuevas...

    hay solución?

    ResponderEliminar
  63. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  64. Mi problema es exactamente el contrario: he descargado una plantilla muy linda pero que tiene este efecto y me retrasa cerca de 10 segundos en cargar la página, como puedo hacer para eliminarlo? Gracias

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger