Page Peel, efecto de página doblada con jQuery

5 de noviembre de 2012 160 comentarios ,

Page Peel es ese popular efecto de página doblada que al pasar el cursor de despliega para mostrar "lo que que hay atrás", como si se tratase de un libro.
Hay muchas formas de hacerlo, muchas de ellas usan archivos flash lo que lo hace menos personalizable, la que veremos en esta entrada es una versión de Soh TanakaEl sitio del autor ya no existe, hecha con jQuery.

Regularmente el contenido que hay "detrás" es una imagen de suscripción al feed pero puedes poner cualquier imagen y que enlace a cualquier página, la que tú elijas.
Puedes ver un ejemplo en este blog de pruebas, en la esquina superior derecha verás un doblez, al pasar el cursor encima se mostrará el contenido que hay debajo.

Para poner este efecto de página doblada en el blog entra en la Edición de HTML y antes de </head> pega el script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
//]]>
</script>

Luego antes de ]]></b:skin> pega los estilos:
/* Página doblada
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Cambiar a 30px si tienes la navbar (barra de navegación) */
float: right;
z-index:9;
}
#pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
right: 0;
top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX0Pm-eaG7Oaq8rvEwOaah-Yxrh1DSDmMXQt7KryM1gmj3JZOqVAt4BhmjbWMjLacKqAuAGzWVFeQqLsfngToR6i1iLyFLvT687-X_OfBce-SfATa9ZzT8L3V_ZsGZBG9J1av7blYGhP8/s0/pagina-detras.png) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}

Por último pega después de <body> o de:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Lo siguiente:
<div id='pageflip'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZlbKQ3N-O30rrcXQggtK26jCxnIapl4Ag_kiBqEDMEoGkmPYvC2GmHlBm5KYbShl3tj-Q7j8uTIpcUf82kphLI3SviaPwfeZ9HpxQGW98BqeHz7pig_z-EVPQFwyrAKozhqf5BFTIlJk/s0/pagina-doblada.png' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>
En color azul verás una URL, esa es la URL de la imagen que en este caso es una invitación a sucribirse al feed, puedes cambiarla por otra (del mismo tamaño) si lo deseas.
En color rojo verás dónde debes poner el nombre de tu blog, ese será el enlace al feed de tu blog cuando el usuario dé click en la imagen posterior, pero puedes poner cualquier URL en caso de que quieras que enlace a otra página.

Recuerda que usa jQuery, así que deberás tener sólo una versión del mismo, y si usas Scriptaculous o Mootools deberás aplicar unos cambios.


160 comentarios en:

" Page Peel, efecto de página doblada con jQuery "

  1. Respuestas
    1. donde pone la palabra "body" no la encuentro y no me sale aver si tu me lo dices

      Eliminar
  2. ¡Justo lo q andaba buscando! Muchísimas gracias n_n

    Por cierto... este código, ¿resta velocidad a la carga del blog?
    Un saludooO

    ResponderEliminar
    Respuestas
    1. Cualquier elemento que agregues al blog es un elemento más que el navegador tiene que leer al cargar ;)
      Saludos.

      Eliminar
  3. Oh, que buenoo! me saco el sombrero!

    ResponderEliminar
  4. Bien, la idea es súper original, y sirve para ocultar cosas de forma no tan convencional, y que solo atraiga a los curiosos ¡Bien!

    ResponderEliminar
  5. Esto se ve bien lo voy a aplicar esto en mi blog.

    Gracias Potro.

    ResponderEliminar
  6. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Parece que los scripts de la plantilla ya no existen, ponte en contacto con el autor para que te dé los archivos y los subas a tu propio alojamiento.

      Pd. he eliminado el comentario por el aviso que está la final.
      Saludos.

      Eliminar
    2. Y porque en esta página que es la misma si va: http://johny-ember.blogspot.com.es/
      Podrías tu coger de ahí los códigos o decirme como debo hacerlo?
      es que el no me contesta...

      Eliminar
    3. Puede ser que esa plantilla sí tenga las URLs de los scripts funcionando, por eso te digo que te pongas en contacto con el autor de la plantilla, bien puede ser que haya una plantilla actualizada con los scripts funcionando, o pueda dártelos para que tú los aloges.

      Eliminar
    4. Potro, ya lo he solucionado, gracias de todas maneras y perdona por las molestias.

      Eliminar
  7. oye potro tengo una pregunta como le hacen para poner los iconos de comentarios, categorias, y publicado por kisiera sabes si me podrias ayudar ya que tus aportes estan geniales y pues un ejemplo seria este https://lh6.googleusercontent.com/-98QGrAztfI4/UJlETvjyZXI/AAAAAAAAAjs/FO53lJoCtsQ/h37/IMG.png Y PUES ME GUSTARIA QUE TUviera los mismos iconos y todo ya que me paresen muy bueno eso seria todo y espro que me contestes
    graicas!!
    y pasate por mi blog y dime que te parece http://gtamexican.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Sólo localiza los códigos de esos datos:
      http://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html

      Y antes de cada uno pon el código de una imagen:
      <img src="URL de la imagen" />

      Eliminar
    2. gracias vere si puedo hacerlo y dime que te parecio mi blog?

      Eliminar
  8. Castro Javier, Micky Lav, Lenkster Hawcker, Jon Perez, Obed Calva, zona lerh, Magos Radioblog, muchas gracias a todos por su visita y comentario, ¡abrazos!

    ResponderEliminar
  9. Ya se lo apique a mi blog, casualmente ayer pense en agregar un feed rss, pero no me gusta el que tiene blogger, queria algo y gracias a DIOS y a ti, ya lo tengo...

    ResponderEliminar
    Respuestas
    1. Esta me parece que es una forma atractiva para anunciar la suscripción al feed, espero que te dé buenos resultados ;)

      Eliminar
  10. Me has solucionado un problema !! Este efecto lo tenía en dos blogs hace casi dos años y en uno se solapaban la imágenes en determinado tamaño de pantalla, así que lo terminé retirando. Ahora veo en tu entrada que me faltaba un z-index.

    Un abrazo y gracias por tu trabajo.

    ResponderEliminar
    Respuestas
    1. Originalmente los estilos no lo tienen, también me pasó lo mismo en un blog de pruebas pero añadiendo el z-index se soluciona fácil ;)

      Eliminar
  11. Hola, Potro. Me gustaría saber cómo puedo poner un recuadro con color y con un mensaje en los comentarios como el que tú estás utilizando; me referiero a "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".

    ResponderEliminar
    Respuestas
    1. Hola, sólo pega el texto que quieras antes de:
      <!-- navigation -->
      <b:include name='nextprev'/>

      Puedes encerrarlo en un DIV para que le apliques estilos, y encerrarlo también en una condicional para que sólo sea visible en las entradas individuales.

      Eliminar
  12. Super genial !!! Gracias potro por compartirlo =))

    Un abrazo!! =D

    ResponderEliminar
  13. Potro, me puedes decir para que sirven estas metas?

    <meta content='document' name='resource-type'/>
    <meta content='all' name='audience'/>
    <meta content='general' name='rating'/>
    <meta content='all' name='robots'/>
    <meta content='index, follow' name='robots'/>
    <meta content='id' name='geo.country'/>
    <meta content='global' name='distribution'/>
    <meta content='1 days' name='revisit-after'/>
    <meta content='Indonesia' name='geo.placename'/>

    ResponderEliminar
    Respuestas
    1. Donde dice name verás para qué es cada META, está en inglés pero es un tanto intuitivo.

      Eliminar
  14. Intente ponerlo pero tengo algunos problemas aca les dejo esta imagen para que la usen: http://i.imgur.com/zl3Lo.jpg

    Nos vemos ;)

    ResponderEliminar
    Respuestas
    1. Gracias por compartir la imagen que has hecho Rodrigo :)
      ¿qué problema te dio?

      Eliminar
    2. Aca te muestro en una imagen:

      http://i.imgur.com/PyMKa.jpg

      1er PROBLEMA: la pestaña me sale muy abajo creo que es por la altura del header no se si aya otra etiqueta para ponerlo mas arriba.

      2do PROBLEMA: La version Jquery Tiene problemas no se si me puedas indicar donde cambiarla y por cual version cambiarla.

      Gracias Potro.

      Eliminar
    3. Mira el enlace que está en la entrada sobre jQuery, ahí está toda la información sobre las versiones.
      Para la altura, modifica el valor de top: 0px; pon un valor negativo hasta que quede bien.
      Saludos.

      Eliminar
  15. Simplemente estupendo. Lo he aplicado a mi blog adaptando la imagen de fondo y funciona perfectamente.

    Muchas gracias por esta y otras aportaciones tan interesantes.

    ResponderEliminar
  16. Potro gracias el truco esta genial,lo único que en mi blog no me esta quedando exactamente donde se deberías quedar sino que se queda a unos cuantos pixeles separado de la esquina del blog. como hago para pegar mas a la esquina del blog el efecto de la esquina doblada?

    ResponderEliminar
    Respuestas
    1. No lo veo puesto en el blog de tu perfil, aun así puedes modificar los valores dentro de right y
      top poniendo valores negativos, por ejemplo -2px

      Eliminar
  17. Potro! Me encantaría poder hacerte una pregunta que me urge mucho apra mi blog pero no tiene nada que ver con este post.
    No se si podría contactar contigo por correo electrónico, o por aquí mismo. Es que una página web me ha pedido que enlace su pagina en mi blog y no tengo ni idea.

    Mil gracias como siempre.


    Un saludo.

    betweenmyseams.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Ainhoa de la Revilla, si quieres enlazar otro blog sólo tienes que poner un enlace común en tu blog, donde quieras, puede ser (por ejemplo) en un gadget HTML/Javascript. Este es el código de un enlace de texto:
      <a href="URL del enlace">Nombre de la página</a>

      Y si quieres que sea una imagen la que lo enlace entonces el código es así:
      <a href="URL del enlace"><img src="URL de la imagen"/></a>

      Eliminar
  18. Una preguntita si es posible.
    Me podrías indicar como puedo reducir el espacio entre imágenes en un post de blogger?
    muchas gracias

    ResponderEliminar
  19. Una preguntita si es posible.
    Me podrías indicar como puedo reducir el espacio entre imágenes en un post de blogger?
    muchas gracias

    ResponderEliminar
  20. Hola Maestro
    Primero que nada "Gracias por toda la ayuda que anonimamente he obtenido de este blog..."

    Segundo, quería preguntarte si en este blog está en alguna parte el como "numerar comentarios" pero como los tienes tu, es decir con decimales en las respuestas

    1
    2
    3
    3.1
    3.2
    4
    5
    Etc.

    Busque pero no encontré, agradecería que me ayudaras en este cometido
    y de paso a ver si me salvas de un "desarme" en un blog en el que participo, hace poco hice el asunto de "responder comentarios anidados", obtenido de aquí:

    http://nicondroid.blogspot.com/p/comentarios-anidados-personalizados-en.html

    Todo perfecto pero me descuadró el texto personalizado que tenia sobre el cajón de comentarios, (lo dejó ajustado a media pantalla)

    captura de pantalla
    http://3.bp.blogspot.com/-y-eiGwiR0hE/UJlq4ZaONdI/AAAAAAAABDY/_-PiFcm2AyE/s1600/blog.jpg

    no he podido solucionarlo, así que recurro a los expertos...

    Gracias de antemano
    Saludos

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario JugadorCompulsivo. No tengo una entrada sobre la numeración de comentarios pero en Oloblogger sí la tienen, ahí la puedes encontrar.

      El método de Nico aún no lo he probado, tendrías que preguntarle a él sobre cómo solucionarlo.

      ¡Saludos!

      Eliminar
    2. Gracias por la respuesta, buscaré entonces en oloblogger.

      Lo del método de Nico... le pregunté pero aun no recibo respuesta...

      Muchas gracias ;)

      Eliminar
  21. Que chulo!!! Esta genial Potro, es muy util.)
    Oye ya q estoy aqui tengo una preguntita, me podrias decir cual es el ID del cuadro con texto que aparace cuando intentas buscar alguna entrada en un blog pero no esta_??? Es este: http://prntscr.com/j9g4e , bueno esta en mi idioma pero da igual.) Espero la respuesta, Saludos...

    ResponderEliminar
  22. Podrías por favor, echarme un cabo con una duda sobre la plantilla de blogger?
    No se cómo reducir el espacio entre imágenes dentro de una entrada.
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Habría que ver una entrada donde tengas esas imágenes para ver a lo que te refieres.

      Eliminar
  23. Parece que tienen alguna configuración para que el archivo sea sólo ejecutado desde su dominio, tendrías que ponerte en contacto con ellos para que te faciliten el código para insertar.

    ResponderEliminar
  24. Muchas gracias POTRO eres lo más, me gusta tu sitio por que los codigos son CLAROS, entendibles y siempre queda a la primera... Mucho éxito y sigue así dios te bendiga por los trucos... alguna pagina donde donar o apoyar el talento?

    Saludos

    ResponderEliminar
    Respuestas
    1. Muchas gracias Vicente, al final de la entrada, debajo de los botones de compartir está el botón de donación de PayPal para quien guste contribuir con algo :)

      Saludos.

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

    ResponderEliminar
    Respuestas
    1. Mira esta entrada:
      http://ciudadblogger.com/2009/12/alinear-elementos-y-gadgets.html

      Eliminar
  26. Que lindo Aporte, ^^

    Muchas Gracias Potro, si mi blog no estuviese lento ya lo estaría aplicando.

    Saluttes!!

    ResponderEliminar
  27. Potro, tengo un mini-proyecto y quisiera que me eches una mano.
    Mire, quisiera poner esta imagen:https://dl.dropbox.com/u/100443586/icono.jpg como icono de mi web, es decir, como cabecera. Pero quisiera que quedase así: https://dl.dropbox.com/u/100443586/pagina%20con%20icono.jpg es decir, que baje el mono a la linea azul y se quede por encima de ella como se muestra en la imagen.
    No tengo ni idea de como se podría hacer, entonces quisiera que me ayudaras por favor.

    ResponderEliminar
    Respuestas
    1. Tal vez si tu imagen la haces con transparencias en formato PNG, para que la parte de abajo sea traslúcida y pueda verse el otro fondo, el de la barra azul.

      Eliminar
  28. Hola Potro; te quería pedir una ayuda en mi blog, ya que en el gadget de titulo quiero poner otro, el problema es que no se ajusta bien para que no queden espacios vacíos, lo puedes ver en http://ossixeno.blogspot.com la publicidad no se pega del lado izq y abajo.

    espero y tengas algo de tiempo y me puedas ayudar, saludos y Gracias.

    ResponderEliminar
    Respuestas
    1. Cambia los valores de cada cabecera, la que tienes en la primera cabecera ponle un valor más grande, y a la otra ponle un valor más chico. Quizá a esa segunda tengas que cambiarle el float:right por left
      Cualquier otra duda sobre el tema hazla en esta entrada:
      http://ciudadblogger.com/2010/08/dividir-la-cabecera-del-blog.html

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

    ResponderEliminar
    Respuestas
    1. Cambia el z-index que está dentro de .menu-secondary-container por un valor mucho más bajo, por ejemplo 1

      Pd. Pon sólo la URL del enlace normal (como texto), sin el código del link porque últimamente se van los comentarios al área de SPAM y luego ya no los veo :/

      Saludos.

      Eliminar
  30. GENIOOOO funcionó perfecto, muchas gracias.
    Espero poder seguir consultando tus conocimientos.

    PD: no pondré las url como link, lo hice porque me daba error, pero ya entendí.

    SALUDOS.

    ResponderEliminar
  31. GENIOOOO funcionó perfecto, muchas gracias.
    Espero poder seguir consultando tus conocimientos.

    Sabes que, te quería comentar o pedir ¿porque no haces algún post sobre venta on line a traves de Blogger?. Ví por ahí algunas cosas pero no está tan claro, al menos no con la claridad que lo enseñas tu.

    PD: no pondré las url como link, lo hice porque me daba error, pero ya entendí.

    SALUDOS.

    ResponderEliminar
    Respuestas
    1. Nunca he vendido nada a través de Blogger así que no sabría decirte, pero hay una plantilla que se llama Blogger Store que está habilitada para eso, en Oloblogger puedes ver algunas entradas sobre el uso de esa plantilla.
      Saludos.

      Eliminar
  32. ¿Donde pongo esto?

    el útlimo código? que dice lo siguiente donde?

    ResponderEliminar
    Respuestas
    1. No he visto los códigos a los que te refieres, pero en la entrada dice exactamente dónde se pone cada cosa.

      Eliminar
  33. Hola Potro buen día te escribo para preguntarte si es posible imitar este SLIDE de esta Página en BLOGGER... ya que se ve muy profesional, espero que si, la página es:

    http://eboutique.cirquedusoleil.com/

    ¿Cómo ponerlo en Blogger? Saludos

    ResponderEliminar
    Respuestas
    1. Hola Vicente, no conocía el slider, pero por lo que acabo de ver no es gratuito, y parece que sólo está disponible para WordPress:
      http://codecanyon.net/item/layerslider-the-parallax-effect-slider/922100

      Eliminar
  34. Hola potro:
    Pues en mi página a donde dice "Buscar" aparece así: https://dl.dropbox.com/u/23889866/Problema/problema%20buscar.png como hago para que no suceda eso? pero si aumento con el "Control + "la pagina aparece al lado ¿Que hago?

    mi blog: www.pequemundossims.blogspot.com

    ResponderEliminar
    Respuestas
    1. Yo lo veo perfectamente bien tanto en Chrome como en Firefox.

      Eliminar
  35. ¡Hola!
    Se que la pregunta que os voy a hacer no tiene nada que ver con esta entrada, pero necesito ayuda.
    Mi problema es que en mi blog:
    http://losdevoradoresdelibros.blogspot.com.es/
    La pestaña (no la barra de busqueda sino la pestaña de arriba del todo)no pone el nombre de mi blog, pone el url. Y llevo varios días cambiandolo y siempre sigue igual. El Potro, ¿me podrías ayudar?
    Lo puedes comprobar tu mismo en el url de mi blog.
    ¡Un saludo!

    ResponderEliminar
    Respuestas
    1. Hola AlexKudo88, busca en tu plantilla esta línea:
      <b:skin><![CDATA[/*-----------------------------------------------

      Justo arriba de ella agrega esto:
      <title><data:blog.pageTitle/></title>

      Eso deberá resolverlo.
      Saludos.

      Eliminar
  36. la tomare en cuenta, pero es un poco molesto muchas veces. saludos Potro

    ResponderEliminar
  37. Que tal potro disculpa por molestarte un poco tengo un problemita veras quiero ocultar un gaget lo cual lo hago con el siguiente código

    mi gaget

    funciona muy bien,me lo oculta en la pagina principal y lo muestra en las entradas,pero desaparece por completo al ir a DISEÑO ¿que paso ay,que no se visualiza el gaget?, existe una forma para que se visualice en diseño?? espero tu respuesta

    ResponderEliminar
    Respuestas
    1. Hola HANNIBAL, mira esta entrada de Vagabundia:
      http://vagabundia.blogspot.com/2010/08/mostrar-elementos-ocultos-en-la.html

      Eliminar
  38. Protro una pregunta que no tiene nada que ver con este tema mira mi duda es yo recientemente compre un .com y mi blog ya aparece como www.videospacion.com pero en los buscadores de google cuando escribo el nombre de mi blog abajo del titulo de mi blog la url ahun tiene el blogspot.

    ResponderEliminar
    Respuestas
    1. Hay que esperar a que los robots de los buscadores actualicen la información, el cambio no es inmediato, se lleva unas semanas.

      Eliminar
  39. He buscado por google y no encuentro solucion a mi problema, a ver si me puedes ayudar. Quiero reducir el espacio que tiene mi plantilla entre el primer post y la cabecera, que empice a la altura de los widges de la sidebar, mira aqui te dejo mi plantilla http://perfeccion-estetica.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. No he podido ver el blog, sólo admite lectores invitados.

      Eliminar
  40. Potro, gracias !

    yo ya llevo varias semanas, excarbando y inspirandome en tus guias, complemento y demas cosas para blogger. Tanto que pues decidi lo que no habia hecho en ningun sitio, ya que sacaba el codigo que necesitaba y listo..
    pero para agradecer tu gran trabajo creo que esta es la minima forma que puedo hacer para demostrar mi agradecimiento.

    Haciendo un plus a este comentario, te dejo adjunto un gran script muy elegante para los blogs. yo lo pondre, ya luego que termine el blog que estoy haciendo. ( http://www.compartidisimo.com/2012/11/scroll-infinito-en-el-blog.html) se trata de un scroll infinito en las entradas.

    saludos y gracias !.

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu amable comentario Sergio. El script del scroll infinito aún no lo he probado pero ya lo compartí hace unos días a través de Twitter :)
      Buen inicio de semana!

      Eliminar
  41. Potro una pregunta porque cuando quiero seleccionar el titulo de una entrada en mi blog para copiarlo no se puede porque se selecciona toda la entra quisiera saber si se puede hacer algo para que si se pueda mi blog es http://www.videospacion.com/

    ResponderEliminar
    Respuestas
    1. Así es muchas veces, cosa del navegador supongo, yo lo que hago es no seleccionar, sólo poner el cursor encima, dar click derecho y ahí copiar ya sea el texto o el enlace.

      Eliminar
  42. Oye potro, como hago para que al pincha en la cabecera vaya a otra pagina que no sea la principal. He buscado por google pero todos los tutos son para las plantillas antiguas

    ResponderEliminar
    Respuestas
    1. Expande los artilugios y busca esta línea:
      <a expr:href='data:blog.homepageUrl' style='display: block'>

      Cámbiala por est:
      <a href='URL del enlace' style='display: block'>

      Luego busca esta línea:
      <a expr:href='data:blog.homepageUrl'>

      Y cámbiala por esta:
      <a href='URL del enlace'>

      Saludos.

      Eliminar
  43. Hola potro.
    Me podrias como poner un gadget paracido a este: http://prntscr.com/jnfmk ??? Donde yo pueda poner mi texto.
    Gracias...

    ResponderEliminar
    Respuestas
    1. Usa un gadget HTML/Javascript, ahí pon lo que quieras, luego consigue su ID y pon estos estilos:

      #ID {
      height:200px;
      overflow:auto;
      }

      Eliminar
    2. Pues no es lo q te pedi.(
      Se tiene que parecer mas a esto: http://prntscr.com/jpc02 , pero que el fondo sea transparente y no blanco...

      Eliminar
    3. Te di la base, los estilos corren por tu cuenta, tú puedes añadir ahí mismo en esos estilos los colores y fondos que quieras.

      Eliminar
  44. Potro, que tengo que poner entre <b:if cond='data:blog.url == data:blog.homepageUrl'> y </b:if>
    para que el gadget Html1 se vea solo en la pagina principal?

    Y donde tengo que ponerlo, debajo de <head>?

    ResponderEliminar
    Respuestas
    1. Mira esta entrada Canal Dibus, ahí verás cómo se aplica:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Eliminar
  45. Tengo un problema potro, y es que me sale el efecto de doblez y la imagen y todo, pero me lleva a una página en blanco en la que sólo salen como códigos html, y la página termina con un /atom.xml. ¿Qué puedo hacer para que, al hacer click, redirija a la página de suscripción en URSS? Ayuda plis ;)

    ResponderEliminar
    Respuestas
    1. Es por Chrome que muestra de esa forma el feed, si no quieres que se vea así lo ideal será que enlaces tu feed a Feedburner:
      http://ciudadblogger.com/2011/05/crear-un-feed-en-feedburner-y.html

      Eliminar
  46. últimamente estamos muy metido con JQuery :P

    ResponderEliminar
  47. hola Potro, otra vez recurro a tu paciencia.
    Tenía el problema que me quedaba por debajo del menu, pero ahora me queda muy a la izquierda de la pantalla y no se como ponerlo en la esquina derecha.

    Me echas una mano por favor?.(mi blog es www.decoracionesodedal.blogspot.com)

    Gracias

    ResponderEliminar
  48. Eres el mejor potro! Ahora enlazare tu Website a mi blog. Bendiciones.

    ResponderEliminar
  49. Potro, es que no me doy cuenta donde tengo que cambiar. Probé acá
    #menu {
    height:40px;
    width:720px;
    overflow:hidden;
    float:left;
    margin-top:8px;
    margin-left:15px;
    }
    pero no lo corre hacia la derecha.

    ResponderEliminar
    Respuestas
    1. Si el margin-left es de 15px (el margen izquierdo) entonces reduce ese valor para que ese margen sea menor y por lo tanto tengas menos espacio desde la izquierda.

      Eliminar
    2. Potro, le puse valor 0 y nada, ni se mueve de lugar.

      Eliminar
    3. Potro, es que lo había puesto en 0px pero como ni se movió lo volví a dejar en 15.

      Para que ahora lo veas (http://decoracionesodedal.blogspot.com.es/)lo puse en 0px para que lo veas.

      Eliminar
    4. Perdón, me he hecho un lío ya, por un momento pensé que te referías al menú.
      Lo del pagepeel tiene dos valores:
      right: 0px;
      top: 0px;

      El primero es la distancia desde la derecha, el segundo la distancia desde arriba, modificando esos valores (siempre en px) lo moverás hasta donde desees.

      De ser posible siempre usa el Responder como lo has hecho en estos 2 últimos comentarios, porque si no de verdad que me pierdo entre tanto comentario y ya no sé si el tema es sobre una cosa u otra. Gracias :)

      Eliminar
    5. Ohhh gracias Potro, ahora si esta bién. Perdona por haberte hecho un lío.

      Eliminar
  50. Me encanta este blog, tiene muy buenos consejos

    ResponderEliminar
  51. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola, puedes usar una aplicación para Facebook como RSS Graffiti:
      http://ciudadblogger.com/2012/03/11-aplicaciones-utiles-para-tu-pagina.html

      Eliminar
  52. Hola que tal lo coloque si me funciona, pero no se ve la imagen por que será? ya revise el link y todo y nada, anteriormente tenia el scrip para quitar el espacio que genera el navbar, y no e lo quite cuando use el de este tip de la hoja doblada, será por eso?? mi blog es www.bik-ebulletin.com gracias.

    ResponderEliminar
    Respuestas
    1. Ha sido error mío, el último código va después de <body> y no antes. Prueba con ese cambio, si eso no lo resuelve tendrás que quedarte con una versión de jQuery porque ahora mismo tienes dos.
      Saludos.

      Eliminar
    2. Ok lo checo gracias, una pregunta, como puedo saber cuando me respondes?? y que tu respuesta me llegue a mi mail, saludos.

      Eliminar
    3. Debajo de este formulario hay un link que dice "Suscripción por correo electrónico". Haciendo click ahí te llegará un correo cada vez que alguien más haga un comentario en la entrada.
      Saludos.

      Eliminar
  53. ¡Saludos Potro!

    Una pregunta. ¿Cómo puedo hacer para que la imagen que se encuentra debajo de este efecto de PagePeel cambie cada vez que se entre al blog o se actualice la página? Solo quiero poner como tres. ¿Crees que sea posible? ¡Gracias mil de antemano!

    ResponderEliminar
  54. En la parte donde dice "nombre-de-mi-blog" cuando lo cambio por el verdadero url de mi blog me aparecen puras letras, no me aparece para suscribirse via rss, que hago? No se si se entiende.

    ResponderEliminar
    Respuestas
    1. Es casi seguro que usas Chrome, con Chrome pasa eso, no es que esté mal, sino que Chrome no interpreta el feed y por eso muestra el código, si lo miras con otro navegador (por ejemplo Firefox) verás que no sucede lo mismo.

      Eliminar
  55. hola potroo, genial tu blog!!! tengo una pregunta, como puedo diseñar una imagen con texto y eso para que quede perfectamente encuadrada en el doblez??

    ResponderEliminar
  56. y otra cosita, no se porque, pero cuando pongo todos los codigos, el resultado final no es el esperado. el doblez se crea en la parte de abajo de la pantalla, debajo de todas las entradas.

    ResponderEliminar
    Respuestas
    1. Usa algún editor de imágenes para hacer la imagen que desees.
      Si no queda como debería quizás algo estás colocando mal, o bien, que ya tienes otra versión de jQuery o que usas Scriptacluos, todo eso se menciona en la entrada. Si continua el problema dime en cuál blog lo has puesto.

      Eliminar
  57. Hola Potro:
    En internet explorer me queda el vinculo visitado cuando pulso sobre él y me queda toda la imagen con un cuadro lila bastante feo.
    He probado a cambiar el estilo de los vinculos visitados y activos en el css con text-decoration:none. Pero no funciona.
    Alguna solución?

    ResponderEliminar
    Respuestas
    1. Hola Migue, prueba añadiendo estos estilos:

      a:focus {
      outline: none;
      }
      a img {
      border-width:0;
      }

      Eliminar
  58. Perfecto Potro. Solo con el border-width:0 ya funciona.
    Graciassss

    ResponderEliminar
  59. Diosss Esta Pagina es lo mejor que ha existido

    ResponderEliminar
  60. HOLA, UNA PREGUNTA, COMO PUEDO CAMBIAR EL COLOR DEL DOBLES, ESQUE MI PAGINA ES NEGRA Y QUIERO QUE RESALTE EL DOBLES DEL FONDO...... MUCHAS GRACIAS

    ResponderEliminar
    Respuestas
    1. Hola, cambia esta URL por la de la imagen del color que quieras:
      http://lh3.googleusercontent.com/-E0DxKFTKzhU/UJiWdesl7UI/AAAAAAAADP4/9kK-z8646YA/s000/pagina-doblada.png

      Eliminar
  61. hola muchas gracias, me sirvió muchisimo, ahorita ya lo estoy editando, una ultima pregunta, se podrá que cuando se pasa el cursor el doblez de la pagina se haga mas grande? por decir a mediación de pagina? que se abra para ver una imagen mas grande o solo se puede con ese efecto?...... de antemano gracias y felicidades por esta pagina, de aquí he sacado muchísimas cosas que ni encuenta que se podían .....

    ResponderEliminar
    Respuestas
    1. Tal vez si modificas el primer width y height del script, supongo que ahí podrías controlar el tamaño del doblez.

      Eliminar
  62. Hola, qué tal. Me salió bien pero al cambiar la imagen no me aparece nada. No sé si sea el alojamiento, ya cambié el tamaño pero no me aparece. ¿Me recomiendas algún alojamiento? Supongo es eso. Muy buen sitio y trabajo. Saludos.

    ResponderEliminar
    Respuestas
    1. Hola, si no tienes dominio propio prueba con Google Sites:
      http://ciudadblogger.com/2011/01/como-subir-archivos-en-google-sites.html

      Eliminar
  63. hola si me sirvio este truco pero el problemit aes que al darle click no redirecciona a la pagína que deseo, ¿que podre estar haciendo mal?

    ResponderEliminar
  64. Oye no me sale ]]> lo busco con ctrl f y no sale y tengo en el blog 3d tambien sera por es??

    ResponderEliminar
  65. por que me sale al lado derecho que el izquierdo

    ResponderEliminar
    Respuestas
    1. No lo sé, habría que ver en cuál blog lo has puesto.

      Eliminar
  66. Hola! sabes no logro localizar este codigo ayuda porfa me pierdo en esto //////////Luego antes de ]]> pega los estilos://///// saludos.

    ResponderEliminar
  67. Hola! sabes no logro localizar este codigo ayuda porfa me pierdo en esto //////////Luego antes de ]]> pega los estilos://///// saludos.

    ResponderEliminar
    Respuestas
    1. Haz click en la flecha que está junto a <b:skin>...</b:skin> ahí encontrarás esa parte.

      Eliminar
  68. Respuestas
    1. Perdona, pero yo no entro al blog DE NADIE para agregar nada, los únicos blogs que "estropeo" son los míos, de nadie más.

      Eliminar
  69. Quiero Cambiar El Feed Por Mi Cuenta De Youtube y Me Sale Error En La Pagina
    Hasta Cree Un Blog Aparte Para Poner La URL pero No Funciona Que Ago

    BLOG: http://edinson-graph.blogspot.com/

    CUENTA DE YOUTBE: http://www.youtube.com/user/edinsful

    ResponderEliminar
    Respuestas
    1. Si te fijas has repetido 3 veces el http:// de la dirección de tu blog:
      <a href='http://http://http://youtubeedinson.blogspot.com/atom.xml'>

      Ese http:// debe estar sólo una vez.

      Eliminar
  70. Hola potro buenas noches, perdi la otra dirección donde te hice esta pregunta:

    He probado varios hacks para que los css sean compatibles con Internet Explorer 8,9,10 y 11 y algunos si funcionan y otros no, incluso algunos metatags de compatibilidad pero no he resuelto el problema, he visto tus demo blogs en Internet explorer 9, 10 y 11 y se ven perfectamente como en Chrome y Moziila, y no veo hacks, como le haces para que sean compatibles?

    ResponderEliminar
    Respuestas
    1. Hola F E R N A N D O, en esta entrada es donde te he respondido a la pregunta:
      http://ciudadblogger.com/2013/01/meny-menu-deslizante-que-voltea-al-blog-en-3d.html

      Pd. Te sugiero que des click en la casilla "Avisarme" que está en el formulario de comentarios, así no perderás los links de donde has comentado y se te avisará cuando alguien más deje un comentario en esa entrada.
      Saludos.

      Eliminar
  71. Hola Potro, te comento que no veo esta linea , Luego antes de ]]> pega los estilos: en los codigos, que puedo hacer.

    ResponderEliminar
    Respuestas
    1. Da click a la flechita que está junto a <b:skin>...</b:skin> ahí la encontrarás, al final de todo ese código.

      Eliminar
  72. estimado estoy usando en mi pagna lo aprendido tengo problemas con el cambio de color de la png pagina doblada ya que la necesito de otro color pero con paint le cambio a color deseado me tapa la segunda imagen que se supone se ve cuando se dezliza la primera no se si esta hecha con algun programa de dibujo o algo especial tipo transparencia en fin me das una idea, los codigos con tus imagenes funcionan preo el triangulo negro hay algo que desconozco, debe ser una bobada pero me supero.

    ResponderEliminar
    Respuestas
    1. Hola Ruben, en efecto es una imagen con transparencia. Necesitas editarla en un programa como Photoshop (o cualquier otro) que te permita guardarlo en PNG y mantener la transparencia.

      Eliminar
  73. Como siempre, gracias Potro por todos trucos que nos traes. He instalado el efecto sin problemas en mi blog pero había una cosa que no me gustaba. Resulta que cuando se doblaba la página, al no tener el mismo color el fondo del blog que la imagen de fondo de la esquina doblada, se veía la imagen de fondo (la que se ha de mostrar al doblarse la página) a través de la transparencia que tiene la imagen de la página doblada (mientras se dobla la página, mirad abajo a la derecha y me entenderéis). Casi no se nota porque se abre rápidamente pero yo soy de los que si saben que algo está mal, no se lo quita de la cabeza. Lo que he hecho ha sido recortar la imagen de la página doblada de 307px x 319px a 307px x 308px y luego he cambiado el script poniendo height: '319px'. Así pierdo el efecto sombra pero en mi blog no se apreciaba y ya no se ve la imagen de fondo hasta que se dobla la página. Espero haberme explicado...

    ResponderEliminar
    Respuestas
    1. Hola Asier, ¿te refieres al que tienes puesto en "geogebra-bloga"? porque he entrado ahí pero no he notado nada extraño, todo lo veo bien, a no ser que sea el navegador, yo uso Safari, ¿has probado verlo desde otro navegador?

      Eliminar
    2. Mi blog es ese, sí: http://geogebra-bloga.blogspot.com.es/ Ahora no tiene nada extraño (lo veo bien en Mozilla, Explorer y Chrome) porque hice los cambios que comenté en el mensaje anterior. Escribí mi mensaje por si le sirve a alguien para solucionar el "pequeño defecto" de este script. Es algo que casi ni se nota pero mirando en Internet vi que no solo me pasaba a mí. Por ejemplo, en este blog, que no es el mío, lo tiene aplicado y se ve lo que comenté arriba: http://learn-website-building.blogspot.com.es/. Por cierto, me acabo de dar cuenta de que en otras páginas con scripts, efectos y cosas varias para blogs, aparece el código y la imagen modificada como las tengo yo ahora (imagen ligeramente recortada y cambio de una línea en el código). A ver si ahora me he explicado mejor XD

      Eliminar
    3. Fe de erratas: lo que he puesto en el script es height: '308px' y no height: '319px'. Es decir, sustituí height: '319px' por height: '308px'

      Eliminar
    4. Yo creo que mi vista ya no da para más porque te juro que en el otro blog tampoco veo lo que mencionas, ni en Safari ni en Firefox. De cualquier forma me lo guardo por si a alguien más le sucede lo mismo y quiere saber cómo resolverlo :)
      Saludos.

      Eliminar
  74. Hola, tengo un problema. En la URL del feed (http://nombre-de-mi-blog.blogspot.com/atom.xml) cuando pongo mi blog salen un montón de letras nada más. Y no sale nada de suscribirse, ¿¿entonces cómo se suscribe la gente??

    ResponderEliminar
    Respuestas
    1. Hola Walter, por lo que mencionas supongo que usas Chrome. El problema con Chrome es que no interpreta el lenguaje del feed y por eso sólo ves códigos, si lo ves desde otro navegador como Firefox verás el feed.
      La mejor opción es que uses Feedburner, de esa manera el feed podrá verse tanto en Chrome como en los demás navegadores (excepto Safari, en él no se ve ningún feed).
      http://ciudadblogger.com/2011/05/crear-un-feed-en-feedburner-y.html

      Eliminar

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