Antes y Después con jQuery

18 de marzo de 2011 135 comentarios ,
Si tienes un blog de diseño, maquillaje, o si usas fotos comparativas de un antes y después seguro este script te resultará de gran utilidad.
Se trata de Before/After, un script que funciona con jQuery y que muestra de forma dinámica las fotos para comparar dos imágenes al mismo tiempo. Con arrastrar hacia los lados una pequeña barra podemos ver ambas fotos que se están comparando.

Por ejemplo puedes ver cómo era yo antes y después de que una sensual vampiresa me mordiera.


Ok, ok, eso fue raro, mejor veamos este clásico paisaje del norte de California que es un reconocido Wallpaper de Windows. Así es como esas colinas eran antes y cómo son ahora.


La implementación de este script es sencilla, sólo necesitas jQuery, el script Before/After, y las dos imágenes que vayamos a comparar.

Primero que nada descarga este archivo, descomprímelo y súbelo a un hosting.
Luego entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>
<script src='URL del archivo' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#antesydespues1&#39;).beforeAfter({showFullLinks : true});
});
</script>

Cambia donde se indica la URL del archivo que subiste previamente.
Ahora en una entrada o en un elemento HTML/Javascript pega este código:
<div id='antesydespues1'>
<div><img alt='before' src='URL de la imagen UNO' width='500' height='291'/></div>
<div><img alt='after' src='URL de la imagen DOS' width='500' height='291'/></div>
</div>
Agrega la URL de la imagen UNO que es la imagen del Antes, y la URL de la imagen DOS que es la imagen del Después.

Es importante que tenga especificado el ancho y alto (width y height) de cada imagen para que pueda funcionar en todos los navegadores.
Si deseas agregar más imágenes sólo cambia el ID del contenedor, en este caso el contenedor se llama antesydespues1 así que si agregas otro cambialo por antesydespues2 y así sucesivamente, aunque puedes elegir cualquier nombre siempre y cuando todos sean distintos.
Y en el primer código que pegamos agrega otra línea como esta en color azul:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>
<script src='URL del archivo' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#antesydespues1&#39;).beforeAfter({showFullLinks : true});
$(&#39;#antesydespues2&#39;).beforeAfter({showFullLinks : true});
});
</script>

Puedes agregar tantas imágenes comparativas como quieras siempre y cuando todos los contenedores tengan un ID distinto y se agreguen las correspondientes líneas en el script.
Debajo de cada contenedor de fotos aparecen los links "Mostrar sólo el Antes" y "Mostrar sólo el Después", al darle click a ellos se muestra las imagenes completas, si deseas ocultar esos enlaces sólo cambia en el primer código donde dice true por false y no se mostrarán.


Autor | Catch my fame


135 comentarios en:

" Antes y Después con jQuery "

  1. Hola potro quiciera saber o que me ayudaras a poner un rotador de entradas automatico (osea que cuando yo publique las entradas solas se publiquen en el rotador)...


    GRACIAS!

    ResponderEliminar
  2. Que pasada !! jejej . bueno post Potro.

    Muy curioso e interesante.

    ResponderEliminar
  3. ◄★►††Rσ∂ιяgσ††◄★►, no conozco ninguno que sea automático, todos son manuales.

    Odin KO, Obe, qué bueno que les ha gustado :)

    ResponderEliminar
  4. wahaaja excelente :D :D !!

    me gusto muchisimo esto, saludos potro ;)

    ResponderEliminar
  5. MCarlitooH2, para entretenerse un rato wn :)

    AlexG, a ti por tu visita!

    ResponderEliminar
  6. ¡Esta excelente!.Muy bonitos ojos marrones :).¡Saludos y gracias Potro ;)!

    ResponderEliminar
  7. Hola Potro

    Sólo pasaba a saludarte y de paso a decirte que "cuidado con esa vampiresa", que te dejó...sniff, sniff..ja ja ja¡¡

    Un besito

    ResponderEliminar
  8. Esta muy bueno este script, estoy seguro que a alguien le va a quitar mas de un problema de encima,y que feo esta el paiseje de fondo de windows ahora es un viñedo,tambien luego me pasas el numero y la tarifa de esa vampiresa XD

    ResponderEliminar
  9. Sweet Muse, gracias a ti :)

    Soraya, no fue tan malo después de todo, hubiera sido peor si me topo con el hombre lobo, jajaja.

    PeliculasTube, jajaja, shhhhht! ;)

    ResponderEliminar
  10. Hola potro buen post gracias tal vez lo use despues ,tengo una duda espero que me puedas ayudar porfavor ,¿Como puedo poner no se si es una imagen o una tabla de color ,como esta ?
    http://narutoshippudenspain.blogspot.com/
    debajo de la imagen del post dice !Click aqui para ver el manga online! quiero poner todo ese cuadro junto con las letras y con esa funcion de cambiar de color al pasar el cursor¿Me puedes ayudar ?
    Muchas GRACIas y saludos :)

    ResponderEliminar
  11. Potro creo que el man ◄★►††Rσ∂ιяgσ††◄★► se refiere a un "rotador de entradas" como el que tengo en el blog elfindelmundohoy.com es un slide que muestra las ultimas 5 entradas, la cuestion es que se puede usar cualquier slide para lograr esto, solo que las cosas que se supone deben agregarse manualmente deben agregarse con json desde el feed, esto es algo que ayuda demasiado solo agregas un pequeño script que escriba por uno mismo las ultimas entradas con el formato que deseamos y listo :), eso tambien puede hacerse para etiquetas agregando pequeños parametros al link... por ejemplo http://tublog.blogspot.com/feeds/feeds/posts/default/-/tu-etiqueta?max-results=5&orderby=published&alt=json-in-script&callback=tuscript

    ResponderEliminar
  12. Potro genial el post, y tus golpes espontáneos son geniales, como el de la vampira y el hombre lobo ;-) un abrazo my friend

    ResponderEliminar
  13. mexico, sólo es el Leer más, lo que pasa es que en lugar de que ellos pusieran el texto Leer más pusieron otro texto y personalizaron el enlace.
    En esta entrada se explica cómo poner el Leer más automático y cómo personalizar el enlace.
    O si usas el Leer más que tienen incorporado Blogger entonces mira esta entrada.

    ResponderEliminar
  14. Black, la verdad es que nunca lo he intentado, tendrás que enseñarme después :)

    MaG@S RaDioMuSiC, gracias, otro abrazo pa' ti :)

    ResponderEliminar
  15. Hola! Gracias por el post, el efecto es muy bueno...
    Me funcionó, pero lo que sucede es que tengo un gadget que cuando haces click en un título, abre otro, es el primero, y con el truco no me funciona...tienes idea lo que sucede?
    Saludos!

    ResponderEliminar
  16. Hola, de nuevo molestando aqui: quiero saber si se puede hacer esto en blogger: http://www.borlitas.com/descargas/emoticones/emoticones-para-tu-messenger/ que cuando das click en la imagen se expande y sale en una ventana y tiene la ocion de cerrar y unas flechas para ver las demas fotos, lo necesito para mi galeria: http://galleryvictoriousmexico.blogspot.com/

    ResponderEliminar
  17. GoNanoGo, no sé cómo hayas hecho el otro gadget pero lo que sí veo es que al parecer usas Prototype en el blog y no es compatible con jQuery, seguro esa es la causa. Mira esta entrada para poder usar ambos.


    Jane vulturi, con Shadowbox puedes hacerlo.

    ResponderEliminar
  18. Potro hay muchas cosas de tu blog que me gustaria aplicar al mio, esto, shadowbox y....... pero no se descomprimir un archivo y tengo descargado winrar, te agradeceria mucho como hago para descomprimir un archivo desde que lo descargo en tu blog hasta que lo suba a google sites..

    ResponderEliminar
  19. Lo he hecho y el codigo me ha quedado asi, pero no me ha funcionado:


    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>
    <script src='http://dl.dropbox.com/u/22915950/jquery.beforeafter.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    jQuery.noConflict();
    jQuery(function(){
    jQuery('#antesydespues1').beforeAfter({showFullLinks : true});
    });
    </script>

    ResponderEliminar
  20. hola a todos, gracia potro por la respuesta pasada...tengo otra inquietud me gustaria que me colabores, es sobre como quito la paginacion de esta web que he hecho, www.katensa.blogspot.com

    ResponderEliminar
  21. muy bonito,pero no consigo que funcione,me aparece una imagen despues de otra....pero no se arreglarlo,supongo q sera porque uso una plantilla.....existe solucion?

    ResponderEliminar
  22. HOLA POTRO COMO HAS ESTADO MIRA TENGO UNA CONSULTA,SABES QUISIERA QUE EN LA LISTA DE ENLACES DE MI BLOG SE MOSTRARA AL LADO UN ICONO DIFERENTE EN CADA ENLACE ES DECIR POR EJEMPLO EN EL ENLACE FUTBOL UN ICONO DE UN BALÓN,EN EL DE NAVEGADORES EL LOGITO DE MOZILLA, EN EL DE PARANORMAL UNA CALAVERITA Y ASÍ SUCESIVAMENTE ESPERO TU REPUESTA
    GRACIAS.

    ResponderEliminar
  23. Hola potro, queria hacerte una consulta sobre mi blog pccomponentes, en el menu de arriba aparece pagina principal y contacto, y me gustaria que contacto se abra en una ventana modal con shadowbox, pero al estar con el gadget de paginas estaticas de blogger no se como cambiar el link al que tendria que ir el menu contacto al hacer clic, o sino si es mas facil reproducir el menu en un gadget nuevo, ya que me daria mucha pena perderlo porque me gusta mucho como queda, desde ya te doy las gracias

    como siempre, muy buen blog!

    ResponderEliminar
  24. Hola Javier,

    Si ya tienes un programa para descomprimir como WinRar sólo descarga el archivo, cuando bajé a tu equipo dale doble click, se abrirá la ventana de WinRar, ahí selecciona Descomprimir todo (o algo parecido).
    Según donde lo hayas descomprimido te abrirá una carpeta con el archivo que hay que subir al hosting.
    Ya de ahí busca aquí en Ciudad Blogger la entrada sobre cómo subir los archivos a Google Sites y continua con los demás pasos.

    ResponderEliminar
  25. GoNanoGo,

    Entonces debe ser otro script el que no es compatible. Igual sigo sin saber qué script has usado para el gadget que te ha dejado de funcionar :/

    ResponderEliminar
  26. katensa, no veo ninguna paginación en ese blog.

    ResponderEliminar
  27. Edu, sin saber en cuál blog lo has puesto me es imposible saber cómo ayudarte :/

    ResponderEliminar
  28. Daniel, con los gadgets de lista de enlaces no se puede, pero puedes hacerlo en un elemento HTML/Javascript, sólo agrega ahí dentro este código por cada enlace que quieras agregar:

    <img src="URL del icono" /> <a href="URL del enlace">Texto</a>

    ResponderEliminar
  29. Hola, Potro!!!

    Pff esto será de muchísima utilidad para mi blog, casi casi siento ke lo hiciste para mí jajaja,(es broma xD) muchas gracias por publicarlo y por cierto, ké piel tan increíble tienes, cuál es tu secreto??? Besote! =)

    ResponderEliminar
  30. Alejandro, lo más conveniente sería que agregaras otro menú y manualmente añadas los enlaces de las páginas estáticas. No me mencionas cuál es la URL de tu blog por lo que no puedo saber exactamente cuál menú es, pero si es una plantilla del Diseñador entonces cualquier menú que agregues debajo de la cabecera quedará igual.

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

    ResponderEliminar
  32. hola, tendria que usar un div, un id y un clas y aplicarle css para que quede con la sombra?

    el blog es www.pccomponentes.com.ar

    ResponderEliminar
  33. este es el blog :
    si necesitas que lo vuelva a poner me avisas :)

    ResponderEliminar
  34. http://virgeriasgimp.blogspot.com/

    ResponderEliminar
  35. Aquí tienes una ciudadana más. Me alegra saber que existe un buen "mecánico" por si sufro alguna avería o accidente. Hay un montón de cosas útiles para poder usar...gracias, muchas gracias!

    ResponderEliminar
  36. Hola Potro...y si te paso el archivo XML por correo me lo podrías solucionar? Porque estoy en este momento si poder usar jQuery que tiene cosas muy lindas para agrear...Saludos y gracias!

    ResponderEliminar
  37. hola potro creo que no era un leer mas porque di click para comentar en el post y en su entrada individual seguia tenindo dicho cuadro con enlace ,mejor puse una imagen que cambia al pasar el cursor ,gracias,pero ahora teno otro problema pues puse 2 entradas en la pag principal , y ve potro con IE o firefox ,que el titulo del post y la fecha todo eso sufrio como un cambio ,no se paso ,se nota mas dicho problema en IE¿Que puedo hacer ?
    Gracias potro y saludos.
    PD:otra duda como puedo poner este footer de narutoshippudenspain.blogspot.com en mi blog?Esa parte donde hablan del copyright y eso como lo ponen en un reactangulo negro y todo ,gracias.

    ResponderEliminar
  38. Es un hecho mi buen potro, solo tengo que afinar algunos pequeños conocimientos ya que yo tambien me peleo con javascript y ando tratando desde hace dias hacer uno que me escriba algnas cosas que necesito para el blog. pero es un hecho :)

    ResponderEliminar
  39. Potro una pregunta fuera del post... que por cierto esta buenisimo :D ... Te queria preguntar porque en Google Chrome aparte del error que tengo de que cada vez que presiono el Ctrl + F y se abre la pestañita de busqueda para realizar la busqueda en la Edicion de HTML del blog, ahora no puedo subir archivos a Megaupload :\... siempre me sale HA OCURRIDO UN ERROR, INTENTELO DE NUEVO MAS TARDE. o algo asi ... El explorador esta teniendo miles de errores :\, porque ahora estoy subiendo facilmente con el FireFox :\

    ResponderEliminar
  40. Hola :P era para avisarte que ya casi le encontre la vuelta, solo tengo un inconveniente, quisiera si me podes ayudar, a como hacer para que quede sobresaltado en el menu, el link en el que estan en ese momento, o sea, si vos pasas con el puntero del mouse sobre uno de los dos links se sombra, me gustaria saber como hacer para que quede sombreado permanentemente el link sobre el que estan actualmente dentro de mi pagina, y asi si hacen clic en contacto o en el que a futuro ponga en el menu, el css creo que esta todo, pero no se como activarlo en el menu, y lo ultimo, me gustaria poner esta casita delante de pagina principal pero no me deja =/

    http://1.bp.blogspot.com/-AnPh-4eZpNU/TV3aYikEJmI/AAAAAAAACPA/NbQ-qq7vwoo/s1600/home.png

    el id del css es pagelist99

    muchas gracias :)

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

    ResponderEliminar
  42. el blog es http://alehardware.blogspot.com

    ResponderEliminar
  43. hola amigo te escribo para consultarte como hacer para agregar una siebar en mi blog lo he intentado pero me marca que se a producido un error interno, bueno te dejo mi blog si me podes ayudar muchas gracias, el blog es www.jrlapaz.com.ar

    ResponderEliminar
  44. Potro es como si fuece a tratarse de mi IP, porque en otra pc puedo subir tranquilamente los archivos usando mi cuenta... Pero en la mia no puedo :\

    ResponderEliminar
  45. hola, me han recomendado tu blog ya que el mio no aparece actualizado en los blogroll de mis seguidores desde hace 2 semanas, y hecho un pàr de cosas que me han comentado e incluso tu post sobrecomo hacer que se actualice mas rapido, pero no hay manera. muchas gracias estoy como loca !!1

    www.1cenicientamoderna.blogspot.com

    ResponderEliminar
  46. Hola Merlina,

    Gracias por el cumplido.
    Pues aunque no lo creas sí me acordé de ti cuando escribía la entrada, de verdad.
    ¿El secreto? Mucho Photoshop... ¡cof! ¡cof! ¡cof!, perdón, mucha agua :D

    ResponderEliminar
  47. Hola Alejandro,

    Para poner ese icono puedes hacerlo poniendo en el primer enlace el código de la imagen de esta forma:

    <li><img src="URL de la imagen"/><a href="#">Pagina Principal</a></li>


    Y para que las pestañas siempre tengan el fondo negro redondeado busca esta parte:

    #PageList99 li a{
    color: #1E1F1E;
    font-weight: bold;
    margin: 0;
    outline: none;
    }

    Y cámbiala por esta otra:

    #PageList99 li a{
    font-weight: bold;
    margin: 0;
    outline: none;
    background: #1E1F1E;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color: #FFF;
    padding: 15px 15px 15px;
    }

    ResponderEliminar
  48. Edu, de hecho sí necesitaría verlo puesto para saber si el problema puede estar en la colocación de los códigos.


    fe-i*ká, gracias a ti por tu visita y bienvenida a Ciudad Blogger!

    ResponderEliminar
  49. hola
    Queria hacerte una consulta
    Tengo un blog de cocina y no puedo entrar ni comentar,tengo problemas con la contraseña
    Me podias ayudar??
    Me podías decir que manera podía recuperarla y entrar??ni ver mi correo de blog
    http://tocinillodecielo.blogspot.com/

    Gracias

    ResponderEliminar
  50. Hola GoNanoGo,

    Eso no puedo hacerlo, pero quizá la mejor manera de que puedas usar jQuery sin preocuparte de que no funcione es que elimines ese gadget y busques otro método para hacer lo mismo sin que te genere conflictos de compatibilidad.
    Hay distintos métodos para conseguir ese mismo gadget de pestañas como el que agregaste, sólo es cuestión de buscar otra opción y probar.

    Saludos.

    ResponderEliminar
  51. Hola mexico,

    Lo que ellos pusieron sí es el Leer más pues lo he confirmado sólo que no lo pusieron correctamente y por eso se visualiza también en la entrada individual.

    Sobre el problema que tienes con Firefox y sobre el footer no puedo saber sin ver el blog donde tienes el problema y deseas hacer tales cambios.

    Saludos.

    ResponderEliminar
  52. - [F]asteN [M]ovieS -, no lo sé, al igual que tú sólo soy un usuario más de Chrome que desconoce muchas cosas al respecto. Pero quizá sí podría ser tu IP que está bloqueda o algún tipo de seguridad del navegador, Firewall o el antivirus.


    JUVENTUD RADICAL LA PAZ, ahora no tengo una entrada sobre ello pero mira esta entrada de Gem@:
    gemablog-.blogspot.com/2007/04/aadir-sidebar.html
    Si tienes problemas con ello puedes preguntarle a ella, estoy seguro que te ayudará.

    ResponderEliminar
  53. SE PUEDE CAMBIAR LAS FLECHITAS POR UNA IMAGEN DE FLECHITAS PERSONALIZADA?

    ResponderEliminar
  54. JEJE YA ENCONTRE LOS LINK DE LAS IMAGNES "PNG" REVISANDO EL SCRIPT SUPONGO QUE ES CUESTION DE SUBIR MIS IMAGENES I CAMBIAR EL LINK.

    ResponderEliminar
  55. Si Potro, tienes razon. Logre solucionarlo, borrando los archivos temporales, cookies, historial y demas cosas... al parecer ese era el problema.Ahora funciona todo correctamente :D.

    Potro una pregunta, como hago para subir imagenes en mi blog y que no tarden tanto?. Porque al ser de Dropbox o de otros servidores tarda mucho en cargar el blog. Osea me refiero a algo propio de blogger, para que no cargue tanto, LO MENOS POSIBLE.

    Por ejemplo para hacer entradas, al pedirte una imagen , o subirla desde tu PC... bueno un estilo asi?.

    EL PROBLEMA ES QUE, AL PONER LA IMAGEN EN LOS TITULOS DE LOS WIDGETS SE TRABA MUCHO LA PAGINA Y TARDA MUCHISIMO EN CARGAR... POR ESA RAZON TE LO PREGUNTO.

    ResponderEliminar
  56. Hola UNA CENICIENTA MODERNA,

    Bienvenida a Ciudad Blogger!
    Ese gadget siempre ha dado problemas para actualizar las entradas. Tu feed parece estar bien aunque veo que ahora usas el feed de Feedburner, así que por ahora vamos a intentar enlazar estos dos feeds para que sea uno solo.
    Entra a tu cuenta de Feedburner y copia la URL de tu feed, es algo como esto:

    http://feeds.feedburner.com/UnaCenicientaModerna

    Ahora entra en Blogger a Configuración > Feed del sitio, y donde dice 'Publicar URL redireccionada del feed' pega la URL de tu feed de Feedburner.

    Esto es para que ambas direcciones enlacen al mismo feed. Quizá por ahí está el problema.

    Saludos.

    ResponderEliminar
  57. muchisimas gracias!!
    COmo por arte de magia de repente ahora funciona(tras 2 semanas sin ir!!! ) creo que lo dejare asi y cuando vuelva a fallar hare lo que me dices.
    Lo de que uso el Feed de Feedburner, ni idea, no he instalado nada ni me he hecho una cuenta que yo sepa :S

    me pasare muy a menudo, que no soy demasiado habil con estas tecnologias y nunca esta de más aprender algo nuevo :) Ahora buscare algo que se que hay gente que tiene, programas para saber la IP de quien te comenta (que en muchos casos son anonimos, "falsos amigos" de los que ya tiens la IP porque te comentan con su cuenta para decir cosas bonitas)

    Muchisimas gracias por tu ayuda Potro!!!

    ResponderEliminar
  58. ya esta puesto potro,tendra igual algo que ver con lo de hacerlo un poco transparente?
    saludos

    ResponderEliminar
  59. Hola potro, Mi gran pregunta no tiene nada que ver con esto pero quiciera ver si hay alguna forma de dar privilegios de administrador a otro sin que el me quite los mios y se apodere de mi blog...

    Espero y alla Forma...

    BYE

    ResponderEliminar
  60. Excelente el Post, y muy útil!!! :D

    ResponderEliminar
  61. Hola Tocinitodecielo,

    Ingresa a este enlace:
    http://www.blogger.com/forgot.g

    Ahí escribe la dirección de tu blog. Al hacerlo te llegará a tu correo las instrucciones para restablecer tu contraseña.

    Si tampoco recuerdas la contraseña de tu correo ingresa a este enlace:
    https://www.google.com/accounts/recovery?service=mail&continue=http%3A%2F%2Fmail.google.com%2Fmail%2F%3Fui%3Dhtml%26zy%3Dl

    Ahí te guiarán para poder recuperar tu contraseña.

    Saludos.

    ResponderEliminar
  62. nEjO, exactamente, así se sencillo ;)

    - [F]asteN [M]ovieS -, súbelas desde Picasaweb, es el más rápido que conozco.

    ResponderEliminar
  63. Gracias guapo por tu ayuda,ya está restablecida
    Un beso
    Tocinitodecielo

    ResponderEliminar
  64. UNA CENICIENTA MODERN, cuando se usa el gadget de 'Seguir por correo electrónico' se crea de forma automática un feed de tu blog en Feedburner, es por eso que te lo mencionaba, si entras en Feedburner verás que ahí tienes el feed que te digo. Pero bueno, qué bueno que ya está funcionando, ojalá siga así. Y claro, eres bienvenida las veces que así lo desees ;)

    ResponderEliminar
  65. Edu, recuerda que primero hay que descargar el archivo que se menciona, descomprimirlo, subirlo a un hosting y cambiar la URL del archivo donde se indica. Sin eso no puede funcionar el gadget.

    ResponderEliminar
  66. ◄★►††Rσ∂ιяgσ††◄★►, ya te he respondido en esta entrada.

    D1360, qué bueno que te ha gustado!

    Tocinitodecielo, me alegro que ya esté todo bien ;)

    ResponderEliminar
  67. aaaa q despiste ,era eso ><
    muchas gracias ya lo tengo en marcha :)

    ResponderEliminar
  68. Potro pero que tipo de leer mas usaron? el de codigos dentro de la plantilla ,o leer mas de el editor de google?Y las otras dudas que te dije del apartado anterior estan en mi pagina :http://toditonarutoshippuden.blogspot.com
    estas son mis dudas
    pues puse 2 entradas en la pag principal , y ve potro con IE o firefox ,que el titulo del post y la fecha todo eso sufrio como un cambio ,no se paso ,se nota mas dicho problema en IE¿Que puedo hacer ?
    Gracias potro y saludos.
    PD:otra duda como puedo poner este footer de narutoshippudenspain.blogspot.com en mi blog?Esa parte donde hablan del copyright y eso como lo ponen en un reactangulo negro y todo ,gracias. Creo que se alteraron la parte del titulo y la fecha de los post ,no se porke gracias ...

    ResponderEliminar
  69. Potro si no es mucha molestia, no me dirías que efecto tiene este blog en los links al pasar el mouse? http://gisediet.blogspot.com estoy buscándolo hace muchísimo tiempo y no puedo encontrarlo, te lo agradecería mucho. Saludos.

    ResponderEliminar
  70. Hola Potro, tengo una consulta que no se si ya la has publicado: quiero armar una entrada en mi blog donde se pueda navegar otra pagina.
    Eso es posible?
    Creo haberlo visto en otros sitios, no se si en algun blog.
    Espero se entienda mi pregunta y como siempre, gracias por tu tiempo y tu trabajo!

    ResponderEliminar
  71. Hola, buenos días, tengo Scriptaculous y Prototype en mi blog y quería saber si existe alguna forma de poner algo similar a esto en mi blog.
    Aquí explicasteis una forma de hacer que funcionara JQuery con Scriptaculous, pero me parece muy complicada para el nivel que sé yo...
    Cualquier idea se la agradecería mucho.
    Un saludo.

    ResponderEliminar
  72. Potro al poner los links que me da Picasaweb, en las imagenes que quiero reemplazar por los titulos.. LOS LINKS NO FUNCIONAN :\ ... osea me sale un cuadradito como que no carga ... como una foto que se borro o se elimino algo asi... :\

    ResponderEliminar
  73. alguien me puede ayudad tengo un templante 2 columnas y quiero transformarlo en 3 y no se como se ase alguien que me ayuda por favor...????


    RESPUESTAS

    ResponderEliminar
  74. mexico,

    Cualquier Leer más que usen puedes hacerlo tal como te dije en el comentario #16 sólo es cuestión de que en lugar de que le pongas el texto 'Leer más' le pongas otro como por ejemplo 'Leer capítulo completo'. No es nada del otro mundo.

    Respecto al título no es sólo en ese navegador, en todos se ve igual. Lo único que se me ocurre es que elimines el margen del título para que el fondo del título no quede fuera de lugar. Es decir, buscar esta línea:

    .post h3 {

    Y eliminar esta parte que se encuentra ahí:
    margin:-10px 0px 0px 0px;

    El primer post no se verá como el segundo pero al menos no se verá descuadrado como está.

    Lo otro que mencionas así como lo pusiste está bien, sólo enciérralo entre <div style="text-align:justify; background:#000; color:#FFF;"> y </div>

    ResponderEliminar
  75. Barbara Solange, mira esta entrada que explica cómo personalizar los links del blog.

    F!X, no me ha quedado muy claro, ¿me podrías dar un ejemplo?

    Aurora, desconozco si haya otra opción con otro script, sólo conozco esta, pero puedes intentarlo con el hack para que funcione en ambos scripts, al menos no se pierde nada con intentar ;)

    ResponderEliminar
  76. - [F]asteN [M]ovieS -, no creo que no funcionen, quizá hay algún error en el código que has puesto, sería cuestión de que revises de nuevo el código y de igual forma pruebes el link en tu navegador para ver si es que de verdad funcionan o no.


    Nofunk, en la red hay varios tutos sobre cómo añadir otra sidebar a las plantillas.

    ResponderEliminar
  77. Hola amigo, muchas gracias, tus post son muy buenos, me gustaría saber, como puedo hacer una emisora online en mi blog... GRACIAS

    ResponderEliminar
  78. Potro de verdad he estado a punto de que me salga descomprimir, shadobox me sale en las webs pero no en las imagenes que codigo pongo si no quiero que muestre el nombre, pero no me sale en precarga y aqui porque al descargarse el archivo directamente me pone archivo de secuencia de comandos en cambio al descargar shadobox me pone .rap como debe ser. Gracias de antemano de un pesadete blogguero

    ResponderEliminar
  79. muchas gracias potro, el codigo para la imagen funciono perfecto, el otro codigo capaz yo me explique mal, lo que yo quiere no es que ambos quede con el fondo, sino que solo el del ultimo clic, o sea si yo hago clic en contacto, que quede ese con el fondo y el de pagina principal sin el fondo, pero no quiero molestar mucho, sino te toma mucho tiempo, seria un gran favor ya que queda lindo para la estetica del blog,, sino asi como quedo igual estoy contento jajaja

    un abrazo grande y como siempre pongo

    potro genioo!!! jajaja :)

    ResponderEliminar
  80. Javier David Gomez Rincon, no lo sé, nunca he hecho una.

    Javier, no entiendo eso de las secuencias de comando, en la otra entrada te he respondido con un video que explica cómo se descomprime. Cualquier duda de Shadowbox o el preloader vamos a verlo en las entradas que corresponden para no desviarnos del tema de esta entrada ;)

    Aejandro, eso sí no sé cómo se haría. Puedes establecer que las pestañas que se hayan visto tengan el fondo, pero no es que si haces click en uno se quita y se muestra sólo en otro. Un abrazo!

    ResponderEliminar
  81. Potro no tenes idea porque las lineas de las sidebar no siguen cuando no hay mas nada para abajo? porque me queda lo del medio sin lineas :(

    ResponderEliminar
  82. Pues porque la sidebar termina donde termina el contenido de la sidebar, si ya no hay nada no puede mostrar más bordes.

    ResponderEliminar
  83. muy bueno Potro, pero tengo un pequeño problema con esto: la imagen 2 me queda mas abajo de la imagen 1, o sea no coinciden. sabes por qué?

    ResponderEliminar
  84. Hola potro como me dijiste modifique todo ,pero no habra alguna posibilidad de que quede bien el titulo y su fondo de los post ,como en narutoshippudenspain.blogspot.com ahi les quedo bien los 2 titulos del post
    ¿Como podria quitar ese borde que esta arribita de la imagen del titulo del 2°post? Espero que haya solucion sino lo mejor sera quitar esa imagen de fondo
    toditonarutoshippuden.blogspot.com

    ResponderEliminar
  85. Solucionado, Potro, era algo sencillo por suerte, basicamente esto:


    iframe height="px" src="http://url.com/" width="%"></iframe


    De todas formas volvere con mis consultas :D

    Un gran abrazo

    ResponderEliminar
  86. Benjamín, quizá no tienen el mismo tamaño o no tienen la misma proporción de contenido, es decir, el plugin no alínea el contenido de las imágenes sólo junta las dos imágenes para mostrarlas al mismo tiempo.

    ResponderEliminar
  87. mexico, igual no creo que quede pues son plantillas distintas y al ser distintas las cosas que se agreguen no siempre quedan igual, además que no creo que sea "buena imagen" para tu blog que se vea idéntico a otro blog, pero si insistes en que quede de la misma forma quizá debas usar la plantilla de ellos.

    Para quitar ese borde busca esta parte:
    .gapad {

    Y elimina esto:
    border: 1px solid #DDD;

    ResponderEliminar
  88. F!X, me imaginé que te referías a los iframes pero quería estar seguro. Que bueno que ya lo tienes resuelto ;)

    ResponderEliminar
  89. Potro, ya lo solucioné: el problema era que entre las imagenes habia un espacio (una linea vacia). Al eliminarlo se acomodaron a la misma altura.

    ResponderEliminar
  90. Hola Potro, Después De Tanto Tiempo, Tu Blog Está Genial Ya Lo Actualizaste, Tiene Todo Lo Que Necesito, Recordé Tu Página Al Estar Buscando Un Reloj En Modo Cuenta Regresiva, Y Sí Lo Encontré En Tu Página, Por Que Se Acerca Él Aniversario Del Blog. Esté Archivo Que Descargue Está Genial Me Gusto Mucho Y Muy Buen Aporte, Que Estés Bien, Adiós.

    ResponderEliminar
  91. Hola Mario,

    Muchas gracias por tu comentario, y por supuesto gracias por tu visita :)
    Saludos.

    ResponderEliminar
  92. Potro como puedo quitar los bordes blancos alrededor de la cabecera? porque si te fijas la cabecera no ocupa todo el ancho de mi blog :( y si agrando la imagen igual siguen los bordes en blanco.. que puedo hacer? un abrazo!

    ResponderEliminar
  93. No lo sé, tal vez poniendo la imagen de la cabecera como fondo del header-wrapper

    ResponderEliminar
  94. fantastico, como siempre, Potro. Lo incorporaré a mis blogs, pero ya que mis blogs son en euskera, habría forma de cambiar "mostrar solo el antes" y " mostrar solo el después" a mi idioma?

    ResponderEliminar
  95. Claro, sólo tienes que editar el archivo que descargaste, buscar esas frases y cambiarlas al idioma que quieras.

    ResponderEliminar
  96. hola potro tengo problemas al descomprimir este programa me sale error.

    ResponderEliminar
  97. Hola Jose P, acabo de probar el archivo y está funcionando sin problemas. Verifica que no tengas algún fallo con el programa que usas para descomprimir.

    ResponderEliminar
  98. Hoila! Quería que me informaras más sobre qué es Jquery y como se utiliza, como me lo descargo, para qué sirve, etcétera. Te aclaro que soy algo ignorante al respecto. Me gustaría poder usarlo ya que muchas cosas acá estab bárbaras pero necesitan de Jquery ó de otros similares y no puedo aplicarlos.

    ResponderEliminar
  99. Hola Barby,

    jQuery es una librería de scripts que sirve para crear efectos como el que se menciona en esta entrada.
    El script básico es este:
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>

    Luego de ese ya va el script que contiene el efecto que quieres. Igual por ahora no te preocupes mucho, si estás empezando verás aquí en Ciudad Blogger algunos trucos que usan jQuery y se explica paso a paso cómo ponerlo todo.
    Si llegaras a tener un problema con alguna entrada sólo deja el comentario en esa entrada detallando tu situación así como la URL de tu blog y con gusto vemos cómo solucionarlo.

    Saludos.

    ResponderEliminar
  100. No me funciona potro.

    Sabes si es incompatible con algun otro script.

    Yo tengo instalados algun que otro script, incluido scriptaculous (pero he hecho el hackeo), me fastidia no poder usar este script porque es una maravilla.

    ResponderEliminar
  101. Quizá es porque tienes varias versiones de jQuery en tu plantilla. Prueba eliminando las versiones antiguas y deja sólo la última versión que tengas.

    ResponderEliminar
  102. Respuestas
    1. Es el lugar donde alojas archivos, y todo aquello que pueda verse en la red. Estos dos son gratis:
      http://ciudadblogger.com/2011/01/como-subir-archivos-en-google-sites.html
      http://ciudadblogger.com/2010/04/como-usar-dropbox.html

      Eliminar
  103. No consigo que me funcione, no se que hago mal, pues sigo todos los pasos uno a uno.

    He alojado el archivo, y cuando pego lo que va delante de: head y cambio el URL, al salvarlo me da el siguiente error:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The reference to entity "d" must end with the ';' delimiter.



    Estoy ya desesperado¡¡¡¡¡¡ Esta script me vendría de escándalo para mi blog, pero no hay manera....

    ResponderEliminar
    Respuestas
    1. Hola Carlos, por lo que mencionas podría ser la URL del archivo que estás pegando. ¿En qué alojamiento los estás subiendo, y cuáles son las URLs que has puesto?

      Eliminar
  104. Lo he subido aqui:

    https://sites.google.com/site/cuestiondecofradias/cuestiondecofradias/jquery.beforeafter.min.js?attredirects=0&d=1

    ResponderEliminar
    Respuestas
    1. Sólo necesitas esta parte de la URL:
      https://sites.google.com/site/cuestiondecofradias/cuestiondecofradias/jquery.beforeafter.min.js

      Eliminar
  105. Muchísimas gracias, era sólo eso.

    Funciona perfectamente. Os dejo aquí el enlace por si queréis echarle un vistazo de como ha quedado..:
    http://cuestiondecofradias.blogspot.com/2012/02/salud-de-ayer-y-salud-de-hoy.html

    Espero sacarle mucho partido a esta aplicación. Gracias de nuevo....

    ResponderEliminar
  106. no puedo usar "antes y despues" con el "trislider" porque este ultimo se distorciona, es decir las imagenes aparecen una debajo de otra. Ya he intentado poner los parametros de: jQuery.noConflict(); -y tambien he cambiado los "$" por "jQuery"... qué hago??

    ResponderEliminar
    Respuestas
    1. El jQuery.noConflict es para cuando se usa Scriptaculous, pero este no es el caso. Lo que debe ser es que hay un conflicto al tener varias versiones de jQuery:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
  107. no funciona,pongo vista previa y me dise"No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The reference to entity "d" must end with the ';' delimiter.
    Error 500"

    ¿idea,potro?

    ResponderEliminar
    Respuestas
    1. Podría ser la URL de tu archivo. ¿Cuál es la URL que estás poniendo?

      Eliminar
  108. Después de comprobar que funciona perfectamente de forma individual, me acabo de dar cuenta que tiene un pequeño error, por lo menos a mi me sale así. Tengo varias entradas en las que he utilizado esta aplicación y a todas les he puesto una misma etiqueta. Cuando entro en cada una de las entradas de forma individual, funciona perfectamente, pero cuando veo en pantalla varias entradas una detrás de la otra (seleccionando todas las entradas con esa misma etiqueta), sólo se muestra bien la aplicación en la primera, pues en las demás se muestran las fotos una detrás de la otra. ¿Le pasa a alguien más o sólo ami?

    ResponderEliminar
    Respuestas
    1. Hola Carlos. ¿Le has puesto un ID distinto a cada una de las aplicaciones como se explica en la entrada? Recuerda que es necesario que cada una tenga un ID distinto, sino, no funcionan en la misma página.

      Eliminar
    2. Gracias de nuevo, Potro. Había entendido que lo de cambiar la numeración era para poner varias fotos dentro de una misma entrada del blog. Ya está solucionado y funciona perfectamente.

      Un saludo

      Eliminar
  109. Sos el mejor del mundo, hace horas estoy buscando esto sin éxito. Ahora puedo dormir tranquilo. Gracias!

    ResponderEliminar
  110. Hola Potro todo bien? no puedo bajar el archivo :(
    Te agradecería que lo vuelvas a subir...

    ResponderEliminar
  111. Hola Potro!! Me encanto este efecto, pero tengo un pequeño problema.. Te explico: Haré una sección de acciones para photoshop, queria poner el antes y el despues con jquery pero yo tengo unos como "tooltips" igual con jquery, agregue los codigos que pones saltandome el de jquery (porque ya lo tengo en la plantilla) pero al momento de ver la imágen o simplemente no salia una o no salia ninguna.. Entonces opte por quitar el jquery que ya tenia y poner el que pones justo en el mismo lugar donde estaba la anterior, y al momento de dar click al tooltip no bajaba la pestaña.. pero el efecto de antes y despues si quedaba.. Hay alguna forma de digamos poner el efecto antes y despues en otro blog y al momento de que entren a esa entrada en mi blog original se vea el efecto sin tenerlo que implementar en la plantilla del original? No se si me explico.. Lo que no quiero es quitar el jquery que tengo para que no afecte a los tooltips y poner en un lugar externo el efecto antes y despues y de ahi jalarlo y ponerlo como si estuviera en la plantilla original todo? Gracias por tu respuesta! Mi blog con el problema es este: http://worldportablescream.blogspot.mx/2013/03/actions.html De hecho esa es la sección.

    ResponderEliminar
    Respuestas
    1. Sólo se me ocurre que hagas otro blog y ahí pongas los Antes y Después, luego mostrar ese blog en el otro por medio de iframes, pero sin duda será más trabajo. Si puedieras encontrar otros tooltips que funcionen sin problema con este sería mejor. O bien, probar con distintas versiones de jQuery, a mí cas todo me funciona con la 1.8.2

      Eliminar
  112. Ok probare la 1.8.2 a ver que tal va.. tienes algun tuto de los iframe pls? gracias!!

    ResponderEliminar
    Respuestas
    1. Nop, básicamente es crear un blog sin nada de gadgets, ni cabecera, ni nada, sólo dejar el gadget de las entradas, luego publicar en una entrada el Antes y Después y en el iframe mostrar esa entrada.

      Eliminar
    2. Hola de new bro!! Mira logré hacerlo y vengo a presumirtelo xD dame tu buen ojo!! http://worldportablescream.blogspot.mx/2013/03/actions.html

      Otra cosa, te quería pedir un favor... Mira si notas en la barra lateral hay las cajas de mis diferentes redes sociales, twitter, fb, youtube etc... Quiero poner un menú de tres secciónes como lo tiene esta página mira.. http://www.tuartextremo.net/blog/proxima-serie-de-tutoriales/ En la parte derecha esta el menu con tres pestañas con las redes sociales.. Quiero algo asi o parecido, intente con uno que tu tienes pero no me queda x.x!! Espero me puedas ayudar pls!

      Eliminar
    3. Te ha quedado muy bien :)
      Aquí hay un enlace para que veas lo otro que deseas:
      http://ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html

      Eliminar
    4. Muchas gracias por todo men!! Ya quedó todo como quería :D

      Eliminar
  113. A mi no me funcionó, salen signos de interrogación en donde van las imágenes.

    ResponderEliminar
    Respuestas
    1. En color rojo dice dónde van las URLs de tus imágenes.

      Eliminar
  114. Adore el comentario de la vampiresa, gracias por el aporte! <3

    ResponderEliminar
  115. Se puede hacer esto mismo eh flash con as2?

    ResponderEliminar

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

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

 
Ir Arriba Ir Abajo
I Ciudad Blogger