Efecto página doblada con JQuery
Antes de nada tenéis que saber que para conseguir este efecto se usa la librería JQuery.
Si estamos usando en el blog Protype y Scriptaculous para cualquier efecto no podemos usar JQuery al mismo tiempo en el blog.
Si estamos usando en el blog Protype y Scriptaculous para cualquier efecto no podemos usar JQuery al mismo tiempo en el blog.
Este efecto lo había visto publicado en CSS Reflex y me había llamado la atención, pero no ha sido hasta hace un par de días que ordago13 me indicaba de nuevo la posibilidad de publicar este mismo truco.
Se trata de usar el efecto de página doblada en la esquina superior derecha de nuestro blog, para mostrar la posibilidad de suscribirse al blog (aunque puede usarse para mostrar cualquier otra cosa).
Podéis ver el ejemplo de CSS Reflex en funcionamiento en este blog, aunque yo he modificado la imagen para que el texto se muestre en español.
Ya sabéis algunos que lo de trabajar con imágenes no se me da nada bien, así que cada uno puede hacer la suya propia, yo he hecho lo que he podido...
[1] Copiamos este código y en Edición HTML de nuestro panel lo pegamos justo antes de </head>
[2] Pegamos ahora este otro código justo después de <body>:
<div id='pageflip'>
<a href='URL_DEL_FEED'><img alt='feed' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'/>
</div>
Cambiamos donde dice "URL_DEL_FEED" por la dirección de nuestro feed.
Para cambiar la imagen que sale debajo por la vuestra, lo hacemos en el primer código (el que colocamos antes de </head>).
Para cambiar la imagen que "se dobla" (la parte de color negro), lo hacemos en este último código (el que colocamos después de <body>).
Para cambiar la imagen que sale debajo por la vuestra, lo hacemos en el primer código (el que colocamos antes de </head>).
Para cambiar la imagen que "se dobla" (la parte de color negro), lo hacemos en este último código (el que colocamos después de <body>).
a las
Etiquetas:
JQuery
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
86 comentarios:
Hola bueno tengo tu banner en mi blog y esta pensando que quiero intercambio de banners copia el mio porfa
Grandioso. Veré si lo modifico un poco para poner otra cosa en lugar del feed. Gracias.
Hola Rosa, en primer lugar felicitarte por este espacio, que de manera tan sencilla y fácil nos soluciona los problemas con nuestros blogs. Gracias!
Quería hacerte una pregunta, porque tengo 2 blogs que no tienen footer y me gustaría añadirselo, me podrías ayudar?
los blogs son.
Ciencias Eternas y Practica Tensegridad
desde ya, gracias y saludos
Que chulo queda!!! ;) Besitos
Excelente!!! :D mil gracias Rosa :D mira como quedo en mi blog (enlace)
Hola Rosa!!! ese efecto que vos publicás lo tengo en mis blogs y la verdad que me gustó mucho como lo has desarrollado en el tuyo, y para alojar los archivos utilicé el DROPBOX donde vos explicás muy bien (http://elescaparatederosa.blogspot.com/2009/01/dropbox-alojar-y-gestionar-archivos.html) y la verdad que hace como un mes que me pasé a este sitio de alojamiento y no he tenido problema alguno.
Felicitaciones y que sigás muy bien. Un beso y hasta pronto. RAUL
Hola Rosa. Tu ayuda es inestimable (cuántas veces te dirán ésto! :) ).
Queríamos saber la forma de incrustar en el blog esa especie de "cajita" en la que van apareciendo los últimos comentarios dejados por los lectores, de forma que si alguien quiere ver si hay alguno nuevo, no tenga que revisar entrada por entrada. Lo más sencilla y minimalista posible, please!
Miramos en tu sección "comentarios" pero no vimos nada. Perdona si no supimos encontrarlo :$ .
Gracias anticipadas.
Te dedicamos este video por crack :D
HEY veo que al final hiciste la entrada¡¡¡¡ genial¡¡¡
Yo el efecto lo estoy usando para un blog que les estoy diseñando a mis amigos para su grupo de música parpadeo, la diferencia es que en lugar de llevarte al rss feed, el link que hay al pinchar el pageflip te lleva a la tienda para que compres su disco¡¡¡
genial Rosa eres la mejor
tengo una pregunta ¿porqué no se puede usar prototype y scriptaculous y JQuery al mismo tiempo? no lo entiendo, de todos modos, no hay otro modo de hacerlo que no sea con JQuery, ya que uso prototype y scriptaculous, gracias
Hola Rosa, una pregunta respecto de este efecto. En que modo afecta a la barra de navegación de blogger?
WinBoox Lo siento pero no hago intercambio de banners ni de enlaces.
Centro FénixMira en este comentario donde explico como hacerlo.
@LokoGB ¡Muy chulo! :D
ARAC-MULTIMEDIA Gracias, eres muy amable.
Premio María Amelia Lo más sencillo sería esto:
http://elescaparatederosa.blogspot.com/2007/04/mostrar-ltimos-comentarios-y-ltimas.html
Aunque solo pueden mostrarse los últimos cinco comentarios.
Este también es sencillo y anda bien:
http://elescaparatederosa.blogspot.com/2007/09/ultimos-comentarios-personalizados.html
Además puede escogerse el número de comentarios a mostrar.
ordago13 Si, me lo pidieron varias personas y adelanté la publicación...:D
¡Gracias a ti por todo!
Ya lo apliqué en un blog de pruebas y no afecta a la nav. Surge debajo de ella. Queda muy lindo el efecto. Gracias Rosa!!!
Raul Son dos librerías de script incompatibles y aunque hay un método para combinarlas, no siempre funciona en Blogger, de hecho he tratado de hacerlo probando con este efecto precisamente y no ha funcionado...
Hay otro método publicado aquí, pero no lo he probado junto a Scriptaculous, así que no se si van bien juntos...
http://keytrucos.blogspot.com/2008/04/efecto-pgina-doblada.html
Manfenix Yo no he notado que le afecte para nada...:o
La imagen de la entrada es de mi blog de pruebas y como ves, el efecto está añadido con la barra incluida.
Acabo de implementarlo en mi blog principal. Ha quedado muy bueno el efecto. Voy a pensar que otra utilidad puede tener para el blog. Un beso Rosa.:P
HolaRosa!
Me gustaría saber si se podria poner otra imagen en lugar de la de subscripcion y que fuese redirigida a otra pagina.
Muchas gracias
Mi blog es Este
Manfenix ¡Bien! :D
Lo bueno de aplicarlo de esta forma es que no hay que preocuparse demasiado por el alojamiento ;), simplemente con el script de protype y scriptaculous que tenemos en la plantilla :D una entrada genial Rosa :)
Sr. Taronja Puedes cambiar la imagen por la que sea,siempre que conserve el tamaño y la forma triangular de la original.
En la entrada al final indico cada url de imagen para hacer ese cambio.
En lugar de poner en el enlace la url del feed pones la de la web a enlazar y ya está.
hola Rosa... Buena entrada esta gracias :D... Me preguntaba si tu prodias elaborar algo parecido a lo que solo JMiur en esta entrada:
http://vagabundia.blogspot.com/2009/06/sencillo-menu-con-slider.html
Es que no entendi como el lo explico. :(
Si lo haces te lo agradeceria mucho... Esto nos servira a todos. :D
:) Me funciono de maravilla..aunque por la platilla que tengo lo tuve que cambiar al lado izquierdo de la plantilla..solo fue cuestion de moverle algunos numeritos y pues obvio..rotar las imagenes tambien, jejeje..muchisimas gracias por este truco..!! ;)
Hola Rosa...
Tengo un par de dudas, sobre este efecto de pagina doblada...
Es posible cambiar la direccion del feed por otra?
(yo tengo 2 blogs)
La otra duda es, que yo tengo los 2 blogs con fondos negros, y el efecto de doblez tambien es negro... eso se puede modificar???
Saludos Rosa.
Gracias Por tu Tiempo
pd: este es mi blog, por si te interesa verlo, http://liniersasinotequeremos.blogspot.com
Genial Rosa. De verdad, muchas gracias, ya tengo footer en los 2 blogs que le faltaban.
Salu2
Theemilio_crazy No estaría bien que hiciese eso...:S
Además, si lo explico lo haría muy parecido a JMiur...creo que está muy bien explicado allí.
Trata de seguir los pasos y verás como no es tan complicado como parece.
logan Al final de la entrada dice donde cambiar la url del feed y donde cambiar la imagen negra...claro que la nueva imagen has de hacerla tu.
rosaaaaaa ocepo urgente tu ayuda ya me quebre ka cabeza y no encuentro la solecion mira en esta pparte de esta pagina http://ikatara.blogspot.com/2009/06/donde-estamos_06.html
al seleccionarun pais, digamos que escogeemos españa, se abre pero en una nueva venta usando IE, o pestaña usando firefox...... y lo que quiero es que se abra pero en la misma ventana o explorador, ya busque los target='_blank' y los quite todos, ya no se que mas hacer
ops parece que escribi con los pies, pero si me entiendo jejeje, bueno saludo y un abrazo
sephi A través del código fuente, veo que en esa entrada TODOS los enlaces tienen los target=_blank...
Ve a editar la entrada, y desde la pestaña de html del editor, eliminalos.
Rosita...eres lo máximoooo, nadie como tú....busque por todo lado y te envíe un correo pero no leí la respuesta...no la encuentro. Pero ya coloque en 2 de mis blog el efecto y es magnifico, porque además le has dado utilidad como para invitar a suscribirse. felicitaciones porque sin ti no sobrevivimos....jaja
besos
marissa
suen interesante pero en mi blog no quedaría pronto haré una nueva así que tal vez lo ponga
Rosa maestra :P
rosa no sale :(
utilizo para editar el windows writer(segun me dijeron es el mejor) a pues me meti por medio de mi cuenta blogger de mi blog a editar, al hacer esto me sale todo sin saltos (/br) creo que asi se escribe y me borro el titulo de la entrada, como que blogger y windows liive no son tan compatibles como crei, a pues al ingresas a editarlas(creacion de entradas-editar entradas-edicion de html) no me aparece el taget_blank, por ende aun me sale lo que te dije anteriormente y asi es yo crei que ya habia borrado todos los target_blank pero al ver el codigo fuente es vdd alli si salen, tienes razon no me habia dado cuenta, pero ahora no se que hacer
rosa habia escrito ya, pero por tonto lo borre
1ero gracias ya me salio yo estaba mal, me metia a editar una entrada diferente, y otra cosa segun me dijeron que win live write es el mejor editor que hqy, pero por ejemplo en mi blog quiero poner las etiquetas y por medio del win live W. no puedo me sale ETIQUETA DE Technorati
quiero que diga mis etiquetas nada mas que si pongo "productos" salen todos los productos de ese blog, como si estuviera en el editor de blogger. ahh y de antemano graciiiias por la ayuda enterior.
Y cuales serían las dimensiones de la imagen? Lo siento por ser un tan "corto"
sephi No puedo ayudarte...nunca he usado Live Writter ni ningún editor para Blogger que no sea el del mismo Blogger, bueno mejor dicho, uso el de Blogger in Draft que es más completo, pero siempre en Blogger...
Sr. Taronja Si copias la url de la imagen que quieres cambiar de la entrada y luego la pegas en tu navegador, podrás descargarla a tu PC y una vez allí cambiarla o lo que sea con el programa que uses para el diseño de imágenes... y verás sus dimensiones y demás.
Me gustaría saber qué falla en el código de nuestros respectivos blogs para que al intentar cargarlos con el Internet Explorer 8 no se puedan cargar, como se puede comprobar en la siguiente imagen. Por mi parte, cuando pueda iré quitando el código poco a poco para ver qué es lo que falla.
EdCharrúa Mira en esta entrada:
http://elescaparatederosa.blogspot.com/2009/05/error-del-blog-en-internet-explorer.html
En los comentarios hay quien dice que le ha resultado quitar el gadget de seguidores o moverlo al footer del blog...otros han tenido que prescindir del formulario nuevo de comentarios...en fin, lo de siempre con Blogger.:(
ROSA, EL TRUCO ANDA ESPECTACULAR.
PERO NO PUDE MODIFICAR EL COLOR, EN EL CODIGO QUE ME DIJISTE, PODRIAS DECIRME EL CODIGO PARA PONERLO EN COLOR BLANCO???
GRACIAS POR ESTE TRUCAZO
logan No hay ningún código para hacer eso, tienes que usar un programa de dibujo para cambiar el color de la imagen.
Pues menuda gracia lo de que no vaya bien en IE8, he probado varias cosas, por ejemplo, lo de mover Seguidores, pero aunque inicialmente parece funcionar, vuelve a fallar tras abrir varias veces el sitio. Al fin me he cansado y he puesto un mensaje para los que entren con IE, advirtiéndoles de que con la versión 8 puede que no se abra. Gracias y saludos desde Lapsus momentáneos de (sin)razón.
Hola Rosa, excelente puedes ver el mio aca http://micorazontusmanos.blogspot.com/
saludos y como siempre una diosa. Saludos
No Rosa, no sé puede centrar ya lo añadi y todo esta bien con "Skin", mira http://jeherg.blogspot.com/
por favor
Global ¿Centrar el qué? No veo tu pregunta en comentarios anteriores...:S
el formulario de comentarios
me lo respondístes pero no funcionó :(
Global Tienes que fijarte más en las cosas...cuando se coloca un código en el CSS siempre se termina cerrando con una llave como esta }
Tienes colocado el código así, antes de últimas opiniones:
.comment-form {
margin:0px auto;
width:400px;
/* ultimas opiniones */
Falta la llave de cierre:
.comment-form {
margin:0px auto;
width:400px;
}
/* ultimas opiniones */
hola Rosa por que no pones un pequeño guestbook en la ventana principal para así poner nuestras dudas.
pero bueno aca mi pregunta que ya no encuentro solución lo que pasa es que tengo un blog que funcional normal gracias a tus aportes claro. pero en IE Internet Explorer no está activa la opción comentar no me dí cuenta como uso mozila no me di cuenta pero mi amgio me dice quiero comentar y me si cuenta q no se podia en IE como lo soluciono porfa alguna ayudita...
http://tonkoni.blogspot.com/
tonkoni Ya tenía y lo retiré. Es imposible contestar dudas por ahí, por no hablar del spam.
En cuanto al formulario de comentarios, intenta quitar o cambiar hacia abajo el gadget de seguidores...aunque no se si aún así te servirá.
Hay problemas con el formulario, el seguidores y el blog en general en IE como comento en esta entrada:
http://elescaparatederosa.blogspot.com/2009/05/error-del-blog-en-internet-explorer.html
Hola Rosa,
Soy un gran admirador tuyo.
También tengo un blog de ayuda pero por supuesto no se compara con el magnífico trabajo que haces.
Gracias por compartir tus conocimientos.
Estoy siempre a tus órdenes.
Saludos :D
El Potro™ Lo conocía...el otro día di con el de casualidad, me pareció muy bueno, después no se como perdí el enlace...:S
Te enlazo en "Blog de Ayuda", en primer lugar porque me pareces muy correcto al venir a presentarte y en segundo, porque no me lo has pedido como hacen otros...
Un saludo!
Hola Rosa,
Muchas gracias por en enlace, no era la intención del mensaje pero se agradece muchísimo.
Saludos y te reitero que estoy a tus órdenes.
;)
hola rosa
mira tengo un problema con este efecto, y es que al ponerlo me deja de funcionar el de la subida deslizante.
No se pueden poner los dos??
master Al comienzo de la entrada está el aviso de que no, no pueden usarse dos librerías de script a la vez en Blogger :(
NESESITO AYUDAA
ME QUEDO ABAJO DE TOO EL COSITO ESE...
ALGUIEN ME AYUDA
QUIERO QUE QUEDE EN LA ESQUINA DE ARRIVA
PORFAAA!!!
si alguien me puede ayudar dejo mi eme
tony_27_orges@hotmail.com
PORFAAAA :((
ElectroPower En la entrada dice:
Pegamos ahora este otro código justo después de <body>
¿Estás seguro de haberlo puesto ahí?
Un efecto muy bello Rosa, me encanta, pero, no hay una manera que sea para mostrar otro blog?, no el feed...
Mariflor Puedes hacer una imagen con la cabecera de otro blog o parte de el y en el enlace donde va el del feed poner el del blog...
Si hablas de que el blog "real" se vea debajo, eso no es posible.
Se queda chulisimo Rosa, lo he probado en un blog de pruebas por que en el otro tengo la otra librería y si no son compatibles para que probar ¿NO? ;). Ahora una cosa donde pone URL_DEL_FEED he puesto la direccion del otro blog y no va, dice que no existe :O
Y Otra cosa en la direccion que das de Key Trucos he probado y no surte ningun efecto ni bueno ni malo :S Me gustaria poner este efecto en el blog de la panadería para que lleve al principal
¿Qué me dices?
No me digas nada jamía, como siempre problemas con las URL de los alojamientos
¡¡PERFECTO!! LOS DOS EL TUYO Y EL DE kEY TRUCOS
SALUDOS
Meri JAJAJJA, tu y las urls...:S
Por eso me gusta IE siempre dando problemas con todo, podrían actualizarlo un poco porque hasta Google Chrome le gana.
¿Qué es lo que no te va en IE? A mí me funciona todo correctamente en Lapsus Momentáneos de (sin)razón. Siempre estamos largando contra IE y la mayoría de las veces sinsentido, porque parece que somos más guays o somos más entendidos haciéndolo.
No largamos nada sin sentido, el IE tiene varios inconvenientes, y es un hecho, el Mozilla es mas rápido y muchas cosas funcionan sin problema, creo que para ser IE el explorador oficial que te coloca Windows al ser instalado, no esta a la altura. Prueba Mozilla y veras la diferencia. En todo caso es mi parecer y la de muchas personas no lo digo por dármelas de guay, porque utilice mucho tiempo IE y al final me cambie a Mozilla y ya no me muevo eso seguro. De todas formas hablábamos de IE, no era un ataque a los utilizadores. Bueno cada uno sus opiniones al respecto.
Saludos
EdCharrúa Soy exactamente de la misma opinión que kikop, y no creo que por pensar así sea más guay ni nada parecido...
De hecho hace tiempo que me niego a prestar ayuda a quien aún usa IE6, ya que creo lo normal es actualizarse.
No tengo nada contra quien usa IE en su última versión (yo misma lo hago) y por cierto que trabajando "con cuidado" no hay demasiada diferencia con Firefox a la hora de diseñar...
Mira EdCharrúa, yo soy la última de la fila para opinar de nada, pero estoy con Rosa y kikop, y si lo de doblar la página no surte efecto en IE pues lo digo y punto pelota. :S
Si alguien esta interesado en ponerlo en su blog y tiene IE lo mismo se esta calentando la cabeza y no es que no lo haga bien es otro problema ¿NO? Pues ya esta ;)
Saluditos.
EdCharrúa, he tenido la curiosidad de pasar al enlace que has puesto y efectivamente si que hace el efecto, pero lo habrás hecho de otra manera que ha puesto Rosa por que te digo yo que si lo has hecho igual que nos dice Rosa no se ve el efecto.
¡¡papa llama! :) :)
Saluditos.
Meri La verdad es que "derivamos" la conversación hacia los defectos o no de IE y no contesté en realidad a lo importante... y es que SI debería funcionar en IE, al menos en IE7 e IE8 lo hace sin problemas :S
Queridos kikop, Rosa y Meri,
mi queja va en el sentido de que a la mínima ya se está largando contra IE, buena prueba de ello es la propia Meri, que no le funciona el efecto y automáticamente da por hecho de que es por culpa de IE (y eso que ella misma reconoce ser la última de la fila para opinar de nada), y como bien se puede comprobar eso no es así.
En cuanto a que os parezca mejor Firefox que IE, pues de hecho a mí también me gusta más y es el que siempre uso. Para tu información kikop, hace muchísimos años que uso Firefox. Aún así tampoco es una panacea, tiene cosas buenas y malas, como todos. A día de hoy, ningún navegador cumple con todos los estándares. Y tú dirás lo que quieras, majo, pero decir "Por eso me gusta IE siempre dando problemas con todo, podrían actualizarlo un poco porque hasta Google Chrome le gana" para mí es ir de guay porque no es cierto que dé problemas con todo y las actualizaciones desde la versión 6 son más que patentes, no como Firefox que en las últimas versiones no son tantas las actualizaciones; sino es por los plugins no sé yo, y ojo, que una gran parte de estos son adaptaciones de cosas que se usaban ya hace tiempo en otros navegadores, como por ejemplo Opera (así que nisiquiera son originales). Y Google Chrome según mi opinión está aún a años luz de estos dos.
Rosa, lo normal sí es actualizarse, pero puede ser por cuestión de gustos y funcionalidad que se prefieran versiones anteriores, y eso sin citar que no todo el mundo dispone de las características básicas para poder hacerlo.
En cualquier caso, lo importante es que quede claro que este efecto SÍ funciona en IE7 e IE8.
EdCharrúa Para eso no necesitas abrir un debate, queda claro que cualquier cosa que yo publico en el Escaparate SI funciona en ambos navegadores en sus últimas versiones, para eso me encargo yo de comprobarlo antes, eso es lo que está más que claro, lo demás son opiniones de cada uno, y como tal, deben ser respetadas creo yo...
Hola rosa!
Muchas gracias por compartir todo lo que sabe sobre blogger. Me ah sido de mucha utilidad para el blog que edito de una comunidad cristiana
Enhorabuena. Muy bueno el truco y el blog.
Estás entre nuestros favoritos.
SALUDOS
Rosita mira me funciono bien lo de la pagina doblada pero se hecha a perder el menu css dock que tengo (que tambien es de jquery)
mira aqui esta cuando se hecha a perder con la pagina doblada el menu
http://img340.imageshack.us/img340/5179/sshot2z.jpg
y aqui esta normalmente sin la pagina doblada
(el menu es el que se hecha a perder)(que tambien es de jquery)
http://img300.imageshack.us/img300/1108/sshot1f.jpg
bueno yo personalmente creo que es porque estan situados horizontalmente donde mismo si fuera asi como puedo hacer para que este abajo y al pasar el curson salga hacia arriba a la izquierda?
bueno muchas gracias de antemano.
Fackss Pues lo siento, pero no puedo ayudarte, eso ya es cosa del diseño de cada cosa... el efecto no puede ir en otro lugar... en cuanto al menú no lo conozco así que...
una vez en mi blog antiguo puse la pagina doblada y me salio abajo como yo queria pero no me sale aora ni tampoco se como lo hice...
solo quiero que salga al ultimo del blog
pero no entiendo eso de position:relative ni absolute ni nada
asi que bueno muchas gracias
Genial, gracias esta muy bueno y funciona de lo mejor en mi blog. Lo publicaré en un post dejando tu link... :D
tengo problemas con ella me sale al final aun si la pego en body al final la dejare para que las veas si me puedes contestar
http://darticulos.blogspot.com/
Sitios Amigos Pues ni idea... funciona bien en las plantillas originales de Blogger ahí colocado, para otras ya no se... quizá dependa de su diseño...
GRACIAS, PUDE IMPLEMENTAR MUY BIEN ESTE ACCESORIO EN MI BLOG DE PRUEBAS... PERO APARECE UN MOLESTO CUADRO AZUL QUE RODEA EL DOBLEZ DE LA PAGINA... ESE CUADRO AZUL LO HE VISTO ANTES POR EJEMPLO EN EL TITULO DEL BLOG... PUEDO QUITAR ESO? AQUI ESTA EL EJEMPLO DEL QUE HABLO ( BLOG DE PRUEBA): http://www.vespiritu.com/
nEjOColoca esto en el CSS de la plantilla:
a img{ border-width:0;}
@Rosa
GRACIAS ROSA PERO HAY ALGO MAS: PORQUE EN UN MONITOR DE 1024 X 768 SE VE LA ESQUINITA DOBLADA ENDONDE DEBE IR ( EN LA ESQUINA) PERO CUANDO LA VEO EN UN MONITOR DE RESOLUCION SUPERIOR LA ESQUINITA DOBLADA NO SE QUEDA EN LA ESQUINA DEL BLOG SINO QUE SE VA A LA ESQUINA DEL MONITOR QUE PASARA?
nEjO Pues no se... yo lo he probado en 1024 y menores, y va bien...
Publicar un comentario
Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).
Los comentarios están siendo moderados.
Comentar con el formulario antiguo