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.
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='"loading" + 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.
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.
Ciudad Blogger
Muy buen truco. Gracias potro!!!
ResponderEliminardonde pone la palabra "body" no la encuentro y no me sale aver si tu me lo dices
EliminarUsa las teclas CTRL + F
Eliminar¡Justo lo q andaba buscando! Muchísimas gracias n_n
ResponderEliminarPor cierto... este código, ¿resta velocidad a la carga del blog?
Un saludooO
Cualquier elemento que agregues al blog es un elemento más que el navegador tiene que leer al cargar ;)
EliminarSaludos.
Oh, que buenoo! me saco el sombrero!
ResponderEliminarBien, la idea es súper original, y sirve para ocultar cosas de forma no tan convencional, y que solo atraiga a los curiosos ¡Bien!
ResponderEliminarUFFFFFFFFFFFFF +1 potro que buena
ResponderEliminarEsto se ve bien lo voy a aplicar esto en mi blog.
ResponderEliminarGracias Potro.
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarParece 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.
EliminarPd. he eliminado el comentario por el aviso que está la final.
Saludos.
Y porque en esta página que es la misma si va: http://johny-ember.blogspot.com.es/
EliminarPodrías tu coger de ahí los códigos o decirme como debo hacerlo?
es que el no me contesta...
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.
EliminarPotro, ya lo he solucionado, gracias de todas maneras y perdona por las molestias.
EliminarExcelente potro muchas gracias!!
ResponderEliminaroye 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
ResponderEliminargraicas!!
y pasate por mi blog y dime que te parece http://gtamexican.blogspot.mx/
Sólo localiza los códigos de esos datos:
Eliminarhttp://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" />
gracias vere si puedo hacerlo y dime que te parecio mi blog?
EliminarCastro Javier, Micky Lav, Lenkster Hawcker, Jon Perez, Obed Calva, zona lerh, Magos Radioblog, muchas gracias a todos por su visita y comentario, ¡abrazos!
ResponderEliminarYa 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...
ResponderEliminarEsta me parece que es una forma atractiva para anunciar la suscripción al feed, espero que te dé buenos resultados ;)
EliminarMe 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.
ResponderEliminarUn abrazo y gracias por tu trabajo.
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 ;)
EliminarHola, 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".
ResponderEliminarHola, sólo pega el texto que quieras antes de:
Eliminar<!-- 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.
Super genial !!! Gracias potro por compartirlo =))
ResponderEliminarUn abrazo!! =D
Otro abrazo para ti!
EliminarPotro, me puedes decir para que sirven estas metas?
ResponderEliminar<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'/>
Donde dice name verás para qué es cada META, está en inglés pero es un tanto intuitivo.
EliminarSimplemente estupendo. Lo he aplicado a mi blog adaptando la imagen de fondo y funciona perfectamente.
ResponderEliminarMuchas gracias por esta y otras aportaciones tan interesantes.
Me alegro que haya sido de tu agrado Paolo, saludos!
EliminarPotro 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?
ResponderEliminarNo lo veo puesto en el blog de tu perfil, aun así puedes modificar los valores dentro de right y
Eliminartop poniendo valores negativos, por ejemplo -2px
Potro! Me encantaría poder hacerte una pregunta que me urge mucho apra mi blog pero no tiene nada que ver con este post.
ResponderEliminarNo 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/
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:
Eliminar<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>
Una preguntita si es posible.
ResponderEliminarMe podrías indicar como puedo reducir el espacio entre imágenes en un post de blogger?
muchas gracias
Una preguntita si es posible.
ResponderEliminarMe podrías indicar como puedo reducir el espacio entre imágenes en un post de blogger?
muchas gracias
Hola Maestro
ResponderEliminarPrimero 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
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.
EliminarEl método de Nico aún no lo he probado, tendrías que preguntarle a él sobre cómo solucionarlo.
¡Saludos!
Gracias por la respuesta, buscaré entonces en oloblogger.
EliminarLo del método de Nico... le pregunté pero aun no recibo respuesta...
Muchas gracias ;)
Gracias por compartir la imagen que has hecho Rodrigo :)
ResponderEliminar¿qué problema te dio?
Que chulo!!! Esta genial Potro, es muy util.)
ResponderEliminarOye 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...
No tiene ID, sólo una clase que es .status-msg-wrap
Eliminarvale, eso tambien me vale. Gracias.)
EliminarPodrías por favor, echarme un cabo con una duda sobre la plantilla de blogger?
ResponderEliminarNo se cómo reducir el espacio entre imágenes dentro de una entrada.
Muchas gracias
Habría que ver una entrada donde tengas esas imágenes para ver a lo que te refieres.
EliminarParece 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.
ResponderEliminarMira el enlace que está en la entrada sobre jQuery, ahí está toda la información sobre las versiones.
ResponderEliminarPara la altura, modifica el valor de top: 0px; pon un valor negativo hasta que quede bien.
Saludos.
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?
ResponderEliminarSaludos
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 :)
EliminarSaludos.
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarMira esta entrada:
Eliminarhttp://ciudadblogger.com/2009/12/alinear-elementos-y-gadgets.html
Que lindo Aporte, ^^
ResponderEliminarMuchas Gracias Potro, si mi blog no estuviese lento ya lo estaría aplicando.
Saluttes!!
Gracias y saludos.
EliminarPotro, tengo un mini-proyecto y quisiera que me eches una mano.
ResponderEliminarMire, 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.
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.
EliminarHola 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.
ResponderEliminarespero y tengas algo de tiempo y me puedas ayudar, saludos y Gracias.
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
EliminarCualquier otra duda sobre el tema hazla en esta entrada:
http://ciudadblogger.com/2010/08/dividir-la-cabecera-del-blog.html
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarCambia el z-index que está dentro de .menu-secondary-container por un valor mucho más bajo, por ejemplo 1
EliminarPd. 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.
GENIOOOO funcionó perfecto, muchas gracias.
ResponderEliminarEspero poder seguir consultando tus conocimientos.
PD: no pondré las url como link, lo hice porque me daba error, pero ya entendí.
SALUDOS.
GENIOOOO funcionó perfecto, muchas gracias.
ResponderEliminarEspero 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.
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.
EliminarSaludos.
¿Donde pongo esto?
ResponderEliminarel útlimo código? que dice lo siguiente donde?
No he visto los códigos a los que te refieres, pero en la entrada dice exactamente dónde se pone cada cosa.
EliminarHola 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:
ResponderEliminarhttp://eboutique.cirquedusoleil.com/
¿Cómo ponerlo en Blogger? Saludos
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:
Eliminarhttp://codecanyon.net/item/layerslider-the-parallax-effect-slider/922100
Hola potro:
ResponderEliminarPues 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
Yo lo veo perfectamente bien tanto en Chrome como en Firefox.
Eliminar¡Hola!
ResponderEliminarSe 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!
Hola AlexKudo88, busca en tu plantilla esta línea:
Eliminar<b:skin><![CDATA[/*-----------------------------------------------
Justo arriba de ella agrega esto:
<title><data:blog.pageTitle/></title>
Eso deberá resolverlo.
Saludos.
la tomare en cuenta, pero es un poco molesto muchas veces. saludos Potro
ResponderEliminarQue tal potro disculpa por molestarte un poco tengo un problemita veras quiero ocultar un gaget lo cual lo hago con el siguiente código
ResponderEliminarmi 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
Hola HANNIBAL, mira esta entrada de Vagabundia:
Eliminarhttp://vagabundia.blogspot.com/2010/08/mostrar-elementos-ocultos-en-la.html
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.
ResponderEliminarHay que esperar a que los robots de los buscadores actualicen la información, el cambio no es inmediato, se lleva unas semanas.
EliminarHe 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
ResponderEliminarNo he podido ver el blog, sólo admite lectores invitados.
EliminarPotro, gracias !
ResponderEliminaryo 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 !.
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 :)
EliminarBuen inicio de semana!
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/
ResponderEliminarAsí 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.
EliminarOye 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
ResponderEliminarExpande los artilugios y busca esta línea:
Eliminar<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.
Hola potro.
ResponderEliminarMe podrias como poner un gadget paracido a este: http://prntscr.com/jnfmk ??? Donde yo pueda poner mi texto.
Gracias...
Usa un gadget HTML/Javascript, ahí pon lo que quieras, luego consigue su ID y pon estos estilos:
Eliminar#ID {
height:200px;
overflow:auto;
}
Pues no es lo q te pedi.(
EliminarSe tiene que parecer mas a esto: http://prntscr.com/jpc02 , pero que el fondo sea transparente y no blanco...
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.
EliminarPotro, que tengo que poner entre <b:if cond='data:blog.url == data:blog.homepageUrl'> y </b:if>
ResponderEliminarpara que el gadget Html1 se vea solo en la pagina principal?
Y donde tengo que ponerlo, debajo de <head>?
Mira esta entrada Canal Dibus, ahí verás cómo se aplica:
Eliminarhttp://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html
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 ;)
ResponderEliminarEs 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:
Eliminarhttp://ciudadblogger.com/2011/05/crear-un-feed-en-feedburner-y.html
últimamente estamos muy metido con JQuery :P
ResponderEliminarDe hecho cambiaremos el nombre por Ciudad jQuery :D
Eliminarhola Potro, otra vez recurro a tu paciencia.
ResponderEliminarTení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
Hola, cambia el margin-left que está dentro de #menu
EliminarEres el mejor potro! Ahora enlazare tu Website a mi blog. Bendiciones.
ResponderEliminarGracias Erick!
EliminarPotro, es que no me doy cuenta donde tengo que cambiar. Probé acá
ResponderEliminar#menu {
height:40px;
width:720px;
overflow:hidden;
float:left;
margin-top:8px;
margin-left:15px;
}
pero no lo corre hacia la derecha.
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.
EliminarPotro, le puse valor 0 y nada, ni se mueve de lugar.
EliminarSigue estando en 15px
EliminarPotro, es que lo había puesto en 0px pero como ni se movió lo volví a dejar en 15.
EliminarPara que ahora lo veas (http://decoracionesodedal.blogspot.com.es/)lo puse en 0px para que lo veas.
Perdón, me he hecho un lío ya, por un momento pensé que te referías al menú.
EliminarLo 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 :)
Ohhh gracias Potro, ahora si esta bién. Perdona por haberte hecho un lío.
EliminarMe encanta este blog, tiene muy buenos consejos
ResponderEliminarMuchas gracias Chary :)
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHola, puedes usar una aplicación para Facebook como RSS Graffiti:
Eliminarhttp://ciudadblogger.com/2012/03/11-aplicaciones-utiles-para-tu-pagina.html
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.
ResponderEliminarHa 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.
EliminarSaludos.
Ok lo checo gracias, una pregunta, como puedo saber cuando me respondes?? y que tu respuesta me llegue a mi mail, saludos.
EliminarDebajo 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.
EliminarSaludos.
¡Saludos Potro!
ResponderEliminarUna 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!
Desconozco si sea posible :/
EliminarEn 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.
ResponderEliminarEs 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.
Eliminarhola 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??
ResponderEliminary 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.
ResponderEliminarUsa algún editor de imágenes para hacer la imagen que desees.
EliminarSi 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.
Hola Potro:
ResponderEliminarEn 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?
Hola Migue, prueba añadiendo estos estilos:
Eliminara:focus {
outline: none;
}
a img {
border-width:0;
}
Perfecto Potro. Solo con el border-width:0 ya funciona.
ResponderEliminarGraciassss
Diosss Esta Pagina es lo mejor que ha existido
ResponderEliminarMuy agradecido :)
EliminarHOLA, UNA PREGUNTA, COMO PUEDO CAMBIAR EL COLOR DEL DOBLES, ESQUE MI PAGINA ES NEGRA Y QUIERO QUE RESALTE EL DOBLES DEL FONDO...... MUCHAS GRACIAS
ResponderEliminarHola, cambia esta URL por la de la imagen del color que quieras:
Eliminarhttp://lh3.googleusercontent.com/-E0DxKFTKzhU/UJiWdesl7UI/AAAAAAAADP4/9kK-z8646YA/s000/pagina-doblada.png
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 .....
ResponderEliminarTal vez si modificas el primer width y height del script, supongo que ahí podrías controlar el tamaño del doblez.
EliminarHola, 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.
ResponderEliminarHola, si no tienes dominio propio prueba con Google Sites:
Eliminarhttp://ciudadblogger.com/2011/01/como-subir-archivos-en-google-sites.html
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?
ResponderEliminarHabría que ver en cuál blog lo has puesto.
EliminarOye no me sale ]]> lo busco con ctrl f y no sale y tengo en el blog 3d tambien sera por es??
ResponderEliminarEstá poco antes de </head>
Eliminarpor que me sale al lado derecho que el izquierdo
ResponderEliminarNo lo sé, habría que ver en cuál blog lo has puesto.
EliminarHola! sabes no logro localizar este codigo ayuda porfa me pierdo en esto //////////Luego antes de ]]> pega los estilos://///// saludos.
ResponderEliminarHola! sabes no logro localizar este codigo ayuda porfa me pierdo en esto //////////Luego antes de ]]> pega los estilos://///// saludos.
ResponderEliminarHaz click en la flecha que está junto a <b:skin>...</b:skin> ahí encontrarás esa parte.
EliminarGracias por estropearme el blog.
ResponderEliminarPerdona, pero yo no entro al blog DE NADIE para agregar nada, los únicos blogs que "estropeo" son los míos, de nadie más.
EliminarQuiero Cambiar El Feed Por Mi Cuenta De Youtube y Me Sale Error En La Pagina
ResponderEliminarHasta 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
Si te fijas has repetido 3 veces el http:// de la dirección de tu blog:
Eliminar<a href='http://http://http://youtubeedinson.blogspot.com/atom.xml'>
Ese http:// debe estar sólo una vez.
Hola potro buenas noches, perdi la otra dirección donde te hice esta pregunta:
ResponderEliminarHe 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?
Hola F E R N A N D O, en esta entrada es donde te he respondido a la pregunta:
Eliminarhttp://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.
Hola Potro, te comento que no veo esta linea , Luego antes de ]]> pega los estilos: en los codigos, que puedo hacer.
ResponderEliminarDa click a la flechita que está junto a <b:skin>...</b:skin> ahí la encontrarás, al final de todo ese código.
Eliminarestimado 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.
ResponderEliminarHola 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.
EliminarComo 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...
ResponderEliminarHola 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?
EliminarMi 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
EliminarFe de erratas: lo que he puesto en el script es height: '308px' y no height: '319px'. Es decir, sustituí height: '319px' por height: '308px'
EliminarYo 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 :)
EliminarSaludos.
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??
ResponderEliminarHola 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.
EliminarLa 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