Coin Slider: Un slider de imágenes con múltiples efectos

9 de marzo de 2011 566 comentarios ,
Coin Slider es un slideshow de fotos hecho con jQuery que a diferencia de otros puede mostrar diversos efectos para las transiciones de las imágenes añadiéndole mayor dinamismo a las imágenes.
Estas animaciones podrán hacer una mejor presentación de las imágenes que deseas mostrar y que bien podrán servir para enlazarlas a tus entradas que deseas destacar.
El slider además de tener distintas animaciones, puede tener enlaces, descripciones de las fotos y se podrá navegar a través de ellas ya sea con los enlaces Anterior y Siguiente, o con los botones de abajo.


Para agregarlo en tu blog primero descarga este archivo, descomprímelo y sube el archivo descomprimido 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='URL del archivo js' type='text/javascript'/>
<script>$(document).ready(function() {
$(&#39;#CoinSlider&#39;).coinslider({
delay: 3000,
hoverPause: false,
navigation: true,
width: 565,
height: 290,
});
});
</script>

Agrega donde se indica en color rojo la URL del archivo que subiste previamente.
Ahora antes de ]]></b:skin> pega estos estilos:
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px;}

El siguiente paso es agregar la estructura del slider, para ello entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí agrega lo siguiente:
<center>
<div id="CoinSlider">

<a href="URL del enlace">
<img src="URL de la imagen"/>
<span>Descripción de la imagen.</span></a>


<a href="URL del enlace"> <img src="URL de la imagen" />
<span>Descripción de la imagen.</span></a>


<a href="URL del enlace"> <img src="URL de la imagen" />
<span>Descripción de la imagen.</span> </a>


<a href="URL del enlace"> <img src="URL de la imagen" />
<span>Descripción de la imagen.</span> </a>


<a href="URL del enlace" ><img src="URL de la imagen" />
<span>Descripción de la imagen.</span></a>


<a href="URL del enlace"> <img src="URL de la imagen" />
<span>Descripción de la imagen.</span></a>

</div></center>

Cambia la URL del enlace y la URL de la imagen donde se indica. De igual forma puedes agregar una pequeña descripción a las fotos si así lo deseas, sino sólo elimina todo esto:
<span>Descripción de la imagen.</span>

Si quieres añadir más imágenes sólo agrega antes del último </div> otro fragmento como este:
<a href="URL del enlace" ><img src="URL de la imagen" />
<span>Descripción de la imagen.</span></a>

En el primer código hay unas opciones que podemos modificar:
delay: 3000, es el tiempo en milisegundos que durará cada imagen.
hoverPause: false, es el control de pausa que aparecerá al pasar el cursor sobre la imagen, con true se activa.
navigation: true, son los enlaces Anterior y Siguiente que aparecen al pasar el cursor, con false se desactivan.
width: 565, es el ancho del contendor.
height: 290, es el alto del contendor.

Si cambias el ancho del contendor también deberás cambiar el ancho en color verde de los estilos (width: 545px) que es el ancho del área de la descripción de las imágenes.
Si deseas cambiar los textos Anterior y Siguiente necesitarás editar el archivo coin-slider.min.js, buscar esas palabras y cambiarlas por otras.

Sin lugar a duda es un slider que no requiere mayor trabajo y que ofrece resultados bastante atractivos que bien podrán darle mayor presentación a tu blog o página Web.

Autor |WorkShop


566 comentarios en:

" Coin Slider: Un slider de imágenes con múltiples efectos "

  1. gran aportacion!
    saludos
    http://sinboli.blogspot.com/

    ResponderEliminar
  2. Potro... esta vez acabas de leer mi mente.
    Justo estaba tratando de aplicar un slider a mi blog para publicidad.
    Buen recurso y buen post.
    Saludos
    www.robinsonchar.blogspot.com
    (Y donde esta la bolita... donde esta la bolita)

    ResponderEliminar
  3. Y si lo quiero poner encima de todos los posts, que quede fijo como si fuera una entrada fija de esas. Espara que aparezca como si fuera lo de Ultimos Posts.

    ResponderEliminar
  4. como ago para que no abra otra ventana :D

    ResponderEliminar
  5. noto que tu slide muestra tambien el titulo y descripcion cual es el codigo para yo hacerlo tambien con titulos como el tuyo

    ResponderEliminar
  6. quiero el mismo font y tamaño pliz codigo jeje

    ResponderEliminar
  7. Robinson Char, para publicidad quedaría perfecto, muy llamativa :)

    ResponderEliminar
  8. pos_ch, no me ha quedado muy claro lo que mencionas pero si deseas que quede arriba de las entradas sólo arrastra el gadget justo arriba de esa área.

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

    ResponderEliminar
  10. Dreko, la descripción ahí en la entrada se menciona cómo se agrega. La fuente no sé cuál sea, era la predeterminada de la plantilla.
    Mira esta entrada que te ayudará a saber cómo y dónde poner los atributos necesarios para que los enlaces se abran en la misma ventana.

    ResponderEliminar
  11. PeliculasTube, en teoria sólo no es indexable lo que tiene el atributo rel="nofollow" pero tengo entendido que muchas veces los scripts no dejan que los robots lean bien el contenido del blog, sería cuestión de que hicieras la prueba y en un mes o un par de meses vieras los resultados en los buscadores.
    Suena a mucho tiempo pero será la mejor forma de salir de dudas.

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

    ResponderEliminar
  13. tambien pruebo que cuando entro a la pagina sale todo desorganizado y despues de cargar se arregla xD

    ResponderEliminar
  14. Me encanta y quiero utilizarlo en mi blog, pero tengo un pequeño problemilla.
    Estoy utilizando ya Scriptaculous para alguna aplicación y he visto que tienes una entrada para poder utilizarlo a la vez que jQuery.
    Como quedaría el codigo de arriba para poder utilizar los dos en el mismo blog?

    ResponderEliminar
  15. PeliculasTube, como te digo, en teoría lo debe indexar pero es mejor probar.


    Dreko, prueba poniendo el primer código después de <head>


    Loren, ahí en esa entrada que mencionas se explica qué hay que agregar y qué se debe cambiar. Saludos.

    ResponderEliminar
  16. Que maravilla y lo mejor, que sencillo.. muchisimas gracias Potro..
    Salu2 desde el otro lado del charco. (España - Alicante) jejeje. ;)

    ResponderEliminar
  17. Potro muy bueno el slide ¡GRACIAS¡ por compartir haber si cuando tengas un tiempecito nos das una clase de como poner a funcionar en nuestro blog alguno de los menus que hay en (codrops) http://tympanus.net/codrops/category/tutorials/
    Yo aun estoy en pañales para poder hacerlo jeje pero ahi voy aprendiendo de ti maestro, Te agradesco y recibe un sincero abrazo

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

    ResponderEliminar
  19. Soy pos_ch aunque he cambiado el nombre. Si si potro era eso, lo lie demasiado, más tarde pensé en que como era un gadget pues podia ponerlo donde sea. Gracias por todo, si tengo más duda ya te comento.

    ResponderEliminar
  20. Justo lo que estaba buscando y en jquery

    ResponderEliminar
  21. Hola,

    Vengo del Blog de Gaby donde te recomienda altamente.

    Muchas felicidades por tu blog, mas bien por el tiepo dedicado a educar y ayudar a la gente que andamos en la blogosfera.

    LA informacion que tienes aqui es una mina.

    Muchas gracias por compartir.

    Saludos,

    Mely

    ResponderEliminar
  22. Hola Xtremdf bloggero,

    Claro que sí, ya he guardado la página para echarle una mirada con un poco más de calma y ver qué podemos sacar de ahí ;)

    Un abrazo!

    ResponderEliminar
  23. Hola Full Descargas DVD,

    Si te marca ese error entonces es probable que estés omitiendo algo, quizá un solo caracter que sin querer no estás copiando o que estás eliminando.
    Para que no tarde mucho es mejor que subas las imágenes a Blogger, el servidor es mucho más rápido que cualquier otro donde las subas.
    Igual podrías considerar en lugar de usar un script para eso usar un método más simple que tendrá el mismo efecto y no tardará tanto:
    http://ciudadblogger.com/2009/05/links-y-banners-en-movimiento.html

    Saludos!

    ResponderEliminar
  24. Sergio Molina, seguro sabrás sacarle provecho a este slider ;)

    ResponderEliminar
  25. Hola Mely,

    Muchas gracias por tu amable comentario y, ¡bienvenida a Ciudad Blogger!
    Qué gusto que te sea grato este sitio así como la información que se comparte, ya sabes que puedes tomar de aquí todo lo que necesites ;)

    ¡Saludos!

    ResponderEliminar
  26. Muchas gracias por responderme :D bueno lo de los marquee ya lo intente pero el problem es q cuando termina la ultima imagen queda un espacio y hasta q no termine de pasar esa ultima no empieza de nuevo la primera.... no hay algun truco para que detras de la ultima empieze la primera automaticamente? ... bueno si me puedes responder ya mucho molestarte jajaja Gracias de nuevo un Saludito desde Colombia ;)

    ResponderEliminar
  27. Bueno Potro, la verdad es que es bastante facil y queda expectacular. Lo he puesto en mi blog pero he tenido el problema de que me relentiza la carga de la pagina una barbaridad. Puede ser por el propio artilugio o es por las imagenes que he utilizado. Tu has notado que vaya la pagina mas lenta cuando lo pusiste?

    ResponderEliminar
  28. Full Descargas DVD, nop, esa es la desventaja que tienen las marquesinas con ese método :/


    Loren, podría ser por las imágenes, depende de qué tan grandes estén y de dónde estén alojadas. Aunque igual, si hay demasiados elementos en el blog y sí se le agrega otro sí notarás que se alenta, pero no necesariamente por este script sino por el conjunto de todo.

    ResponderEliminar
  29. sip ya se :P igual muchisimas graxx por tus consejos *=D

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

    ResponderEliminar
  31. Potro:
    En verdad te agradezco mucho la ayuda que me brindaste con el menú para mi blog, eres formidable gracias nuevamente,
    quise responder el mensaje pero no se porque no lo recibiste.

    ResponderEliminar
  32. Hola lerh,

    Lo que sucede es que ese correo desde donde envío las respuestas a las preguntas falla demasiado, aunque sí funciona para enviar los correos siempre falla al recibirlos, es por eso que ahi pongo un mensaje que no se respondan los correos. A ver si en los próximos meses me cambio de compañía para solucionar ese tema de los correos. Pero bueno, lo que importa es que quedaste satisfecho con el tema del menú :)

    ¡Saludos!

    ResponderEliminar
  33. Ahora veo el porque o lo recibiste pero no hay problema, si quede muy contento con el menú gracias de nuevo potro

    ResponderEliminar
  34. felicidades potro por lo de la revista "Webs muy recomendadas" es una gran éxito, y la verdad desde cuando te lo merecías ya que ciudad blogger es la mejor ciudad de todas, eres el orgullo de los blogger´s mexicanos

    ResponderEliminar
  35. Muchas gracias lerh, como siempre he dicho, sin ustedes este blog no sería nada.
    ¡Un abrazo!

    ResponderEliminar
  36. Gracias me sirvio bastante esta slider estaba buscando algo asi hace tiempo
    se agradese

    ResponderEliminar
  37. Qué gusto que te haya sido útil :)

    ResponderEliminar
  38. Potro una pregunta nada que ver al tema que posteaste. Solo una pregunta para ver si me puedes ayudar o saber cual es el problema. Formatie la computadora, y ahora cada vez que entro a Edicion de HTML y presiono Ctrl + F , y busco las palabras por ejemplo Skin, queda trabado en la primera letra osea "S" y quedan todas las palabras con S , pero queda ahi ... no sigue buscando,y se tilda siempre. Pero es solo alli, en Edicion HTML , en ningun otro lado no hace , mas que alli.

    ResponderEliminar
  39. Hola Potro!

    en mi blog, en cada entrada tengo un par de imagenes a veces 4 ó 5, me gustaría utilizar este slider en cada entrada, que debería hacer para que cada entrada tuviera su slider con sus correspondientes imagenes??

    muchas gracias y saludos...

    ResponderEliminar
  40. Potro, ¿como podria cambiar la descripcion? Es que sobre sale de las imagenes y quiero tambien que el tamaño de letra y del recuadro sea mas pequeño para que no me tape tanto la imagen.
    www.we-games.co.cc

    ResponderEliminar
  41. No esta mal Potro pero como el de este pagina web seria muy complicado hacerlo para un modesto blogguero, esta es la pagina http://www.mancharealfutbol.com/

    ResponderEliminar
  42. - [F]asteN [M]ovieS -, ¿usas Google Chrome? Porque a mí me está pasando lo mismo desde hace como 3 días. Lo que hago es cerrar el navegador y abrirlo de nuevo y ya funciona, pero debe ser una falla del navegador.

    ResponderEliminar
  43. Hola Santi Amaro,

    Necesitarías agregarlos dentro de las entradas. Pero a cada uno le cambiarías esta parte:

    <div id="CoinSlider">

    Ninguno debe llamarse del mismo modo así que cada slider deberá tener un nombre distinto, por ejemplo:
    <div id="CoinSlider2">

    Y luego el otro:
    <div id="CoinSlider3">

    Y así consecutivamente. Luego en el primer código que has pegado busca esta parte:

    $(&#39;#CoinSlider&#39;).coinslider({

    Ahí deberás agregar los nombres de los ID que has añadido, por ejemplo:
    $(&#39;#CoinSlider, #CoinSlider2, #CoinSlider3&#39;).coinslider({

    De esa forma puedes agregar varios sliders en el blog.

    ResponderEliminar
  44. Hola We Game / Emilio,

    Después de esta parte:
    .cs-title { width: 545px;

    Agrega el tamaño de letra:
    font-size:10px;

    Al estar más pequeña la letra la descripción se hará más reducida y ocupará menos espacio.

    Saludos.

    ResponderEliminar
  45. Hola Javier,

    Ese es parecido al slider llamado Orbit.

    ResponderEliminar
  46. Si potro uso el Google Chrome, exactamente hace 3 dias me pasa eso!... pero tu crees que se solucionara el problema? sin tener que cerrar el navegador a cada rato?

    ResponderEliminar
  47. No tengo idea, eso sólo los de Google lo saben.

    ResponderEliminar
  48. Potro esta buenísimo. Te hago la siguiente consulta me gustaría colocarlo como Banner pero cuando intento arrastar el gadget de html al lugar de arriba lo llevo pero no queda. Como podria hacer? Gracias ;)

    ResponderEliminar
  49. Potro, de repente mi gadget ha dejado de funcionar... he repetido los pasos de nuevo, pero no anda, ¿qué puedo hacer??
    www.we-games.co.cc

    ResponderEliminar
  50. Leonardo, mira esta entrada, ahí hay un par de opciones para moverlo.

    We Game / Emilio, ¿has hecho un cambio o agregado algo recientemente?

    ResponderEliminar
  51. Muchisimas gracias Potro muy amable como siempre saludos ;)

    ResponderEliminar
  52. me interesa este peroo lo intente poner y no me sirvio noc alguna ayuda o algo q me digan gracias

    ResponderEliminar
  53. No, de repente no se movía. Lo quité todo y lo puse otra vez y seguía sin funcionar...

    ResponderEliminar
  54. Potro ya está solucionado, había un pequeño error en mi link del archivo .js
    Gracias de todos modos ;)

    ResponderEliminar
  55. hola potro por aqui siguo aprendiendo con usted lo que hoy me dificulta es a que hostin lo puedo subir y que sea gratis me gustaria que me dieras la rfl del archivo donde tu lo alojaste serias muy amable muchisimas gracias de resto todo esta muy bien :D

    ResponderEliminar
  56. alex, ¿y en cuál blog lo has puesto? ¿por qué no te sirvió?

    We Game / Emilio, algo así me imaginaba ;)

    Ero-k'rlox, hay muchos sitios gratuitos, dos de ellos que son muy buenos son Google Sites y Dropbox.

    ResponderEliminar
  57. la verdad noc yo hice todos los pasos y puse las imagenes y cuando lo puse en la pagina me salian las imagenes una debajo de la otra y no coso sale asui

    ResponderEliminar
  58. si alex a my tambien pero bueno. potro keria preguntarte que si por uno colocar una imagen en el chat de my pagina a uno lo puden denuncias por copring y serrarlen los blogs esa es my pregunta me gustaria saber la respuesta

    ResponderEliminar
  59. alex, sin verlo puesto en tu blog me es difícil saber cuál es la causa del problema, pero por lo que comentas es posible que estés usando Scriptaculous, o que la URL del archivo que subiste no sea la correcta.

    ResponderEliminar
  60. Ero-k'rlox, si la imagen tiene derechos de autor y si quien posee los derechos de autor denuncia tu blog sí pueden eliminarte el blog, aunque la mayoría de las veces Blogger primero manda una advertencia para que dicho contenido protegido sea retirado, pero no siempre es así.

    ResponderEliminar
  61. en que hosting subo el archivo??

    ResponderEliminar
  62. Mira la respuesta que le he dado a Ero-k'rlox en el comentario #58

    ResponderEliminar
  63. voy a probar subiendo el archivo a otro hosting para ver si es esoo tal vez luego les digoo sii funciono o no gracias

    ResponderEliminar
  64. muchas gracias por todoo ya me sirvioo lo acomodare y luegoo pondre el link de mi blog para q lo vean gracias

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

    ResponderEliminar
  66. oye potro sabes tengo un problema con las imagenes q puse porq al momento de pasar se queda pegada la uno y al rato es q cae la dos....como puedoo hacer para todas caigan rapido???xfavor

    ResponderEliminar
  67. muchas gracias por tus consejos! :D me vendrán muy bn! XD SPERO HACER MI LBLOG FAMSOO!!!!! XDD UN BESO A TOD@s! OS QIEROOOO!!! :)

    ResponderEliminar
  68. alex, ¿a qué te refieres con que se queda pegada y se caen la otra?

    alexiaah! ;), gracias a ti por tu visita!

    ResponderEliminar
  69. Hola,
    Lo primero muchas gracias por el tutorial, sencillo y bien explicado.
    Para firefox funciona bien pero con explorer no se muestra el slider, sino todas las imágenes a la vez una detrás de otra.
    ¿hay alguna manera de poder solucionar eso?

    Un saludo.

    ResponderEliminar
  70. Hola David,

    Yo lo he probado con Internet Explorer 8 y funciona sin problemas.

    ResponderEliminar
  71. Hola Potro.. Desde ya agradezco tu tiempo para compartir... me parecio excelente tus aportes y los comentarios de los demas !! me quedo una duda cuando en el Post vos pones ... descargar este prog... y Subirlo a un Host ??? como lo hago ? lo demas esta Ok entiendo pero No se como empezar ... cuales son los primeros pasos ?

    ResponderEliminar
  72. Hola Julio Cesar,

    Mira este video que explica cómo descomprimir archivos:
    http://www.youtube.com/watch?v=vltkaCxzn6w

    Luego, para subirlo a un hosting puedes hacerlo en Google Sites o Dropbox.

    ResponderEliminar
  73. Ante todo felicidades por el blog. Es de mucha utilidad para los que estamos empezando.
    Tengo una duda:
    ¿Se pueden redondear las esquinas mediante código? ¿O directamente lo hago subiendo PNGs transparentes ya con las esquinas redondeadas?
    ¡Gracias por todo!

    www.oc16.blogspot.com

    ResponderEliminar
  74. Hola Abo,

    Agrega esto en los estilos, es decir, en lo que se agregó en el segundo código:


    #CoinSlider, .coin-slider a, .cs-title{
    border-radius:20px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    }


    Saludos.

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

    ResponderEliminar
  76. No me funciona. Lo añado justo antes de ]]b:skin, pero no cambia nada.

    ResponderEliminar
  77. Supongo que usas Internet Explorer, en ese navegador los redondeados no funcionan es por eso que no ves el cambio, pero si entras desde un navegador más moderno como Chrome o Firefox verás que tiene las esquinas redondeadas.

    ResponderEliminar
  78. Vale, ya he solucionado el problema de las esquinas redondeadas de otra forma. Aún así seguía sin funcionarme con ningún navegador. Ahora el problema "mayor" que tengo es que el slider no funciona con IE. Dios mío, no hay manera. Es como si no encontrara el *.js.
    ¡Muchas gracias por todo!

    ResponderEliminar
  79. Este es el error que me da:

    Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
    Fecha: Sun, 3 Apr 2011 20:11:54 UTC


    Mensaje: Se esperaba un identificador, una cadena o un número
    Línea: 484
    Carácter: 1
    Código: 0
    URI: http://oc16.blogspot.com/

    En la línea 484 está el primer }); del primer bloque de código que hay que insertar.
    ¿Qué narices puede ser?

    ResponderEliminar
  80. El código para redondear sí funcionaba pues vi tu blog desde Chrome cuando mencionaste que no te servía y se veía muy bien.
    Lo otro debe ser por algo que modificaste, no lo sé, pues el slider en sí es compatible con todos los navegadores.

    ResponderEliminar
  81. Que tal viejo.. antes que nada, al igual que los miles de seguidores de su pagina, quiero felicitarlo y agradecerle por sus post que son de inmesa ayuda para nosotros..

    En cuanto a este slider, no se porque no funciona en IE, ya repeti todo infinidad de veces y nadamas no.. en Firefox funciona perfectamente..

    Ayuda compadre.. porfa

    ResponderEliminar
  82. Hola Amixtlan,

    El slider es compatible con todos los navegadores, pero no me mencionas en cuál blog lo has puesto para de esa forma pueda verlo yo desde la versión de IE que tengo y comprobar si se trata de tu navegador o si ciertamente hay alguna incompatibilidad.

    ResponderEliminar
  83. Hola potro me sucede los mismo ke Amixtlan.
    Lo ultimo que probe fue dejar el codigo original por si habia cambiado el ultimo, obviamente las imagnes son mas grandes pues el contenedor se redujo..
    El js esta alojado en un site de google utilizado como contenedor de archivos..
    El blog es
    losconceptos.blogspot

    ResponderEliminar
  84. Hola Jesus,

    Acabo de probar el slider en la misma plantilla que usas y no tuve ningún problema en IE por lo que me hace pensar que debe ser por alguna modificación que pudiste haberle hecho a la plantilla. Tal vez sería que el slider lo pusiste con un ancho de 900 cuando el ancho de tu plantilla es de 860. O que los estilos los pusiste antes de:
    ]]>
    </b:template-skin>

    Y no antes de ]]></b:skin>
    O que se fue un caracter de más en la URL del script.
    No lo sé, podrían ser varios motivos en los ajustes que tengas realizados en la plantilla. Quizá lo más conveniente sea probar con otro slider para ver qué resultados tienes.

    ResponderEliminar
  85. hola de nuevo...
    como los demas tengo un problema con esto...

    como tengo un blog de pruebas lo he intentado me visualiza bien pero las imagenes que yo uso (pequeñas de 124x175 por ejemplo) las veo todas extendidas por el espacio que ocupa el gadget en forma de mosaicos, te pregunto si cambiando las medidas en el codigo como lo explicas deberian verse bien, pero tambien en algun momento usare unas medidas de 251x175 y entonces la imagen me la cortaria???

    desde ya espero que me entiendas y gracias por tu tiempo XD

    ResponderEliminar
  86. aah tambien una duda general...
    estar agregando varias cosas al codigo de mi blog puede llegar a traer problemas???
    claro teniendo en cuenta que vaya poniendo los codigos que das bien...

    ResponderEliminar
  87. Si usas la medida pequeña y lo ajustas como se explica entonces no se vera en mosaico, se verá bien, pero si después usas una imagen más grande sí se cortará, es por eso que deben usarse imágenes del mismo tamaño.

    En cuanto a la duda que tienes no debe pasar a mayores siempre y cuando todo lo coloques como se indica, y lo que ya no uses quitarlo para no hacer pesado el blog. Por supuesto siempre se recomienda hacer un respaldo de la plantilla antes de hacer un cambio por si algo saliera mal puedas regresar al estado anterior.

    Saludos.

    ResponderEliminar
  88. hola potro ...una pregunta
    se puede quitar los efectos al pasar las imagenes?
    es que estoi usando otra galeria JQuery pero si que me da problemas
    http://archivos-manga.blogspot.com/2011/04/naruto-535_1315.html
    gracias de antemano

    ResponderEliminar
  89. No que yo sepa, sólo sé que se puede seleccionar sólo un tipo de efecto pero no eliminarlo.

    ResponderEliminar
  90. Gracias por el aporte lo que yo hice fue que lo deje así
    .post-body img {max-width:99%;}
    .coin-slider { overflow: hidden; zoom: 1; position: relative; }
    .coin-slider a{ text-decoration: none; outline: none; border: none; }
    ]]>
    y oculte el anterior y siguente para que fuera que no ocupara espacio y fuera como un banner, Saludos!!

    ResponderEliminar
  91. Disculpa, ahora veo que con Internet Explorer no sale el banner aunque vuelva y le agregue el codigo.

    ResponderEliminar
  92. ¿En dónde lo has puesto para que pueda echarle un vistazo?

    ResponderEliminar
  93. Potro muy buenas, muy buen aporte pero fíjate que si me funcionó en Chrome pero en IE me aparecen las imagenes para abajo y no asi como tendria que ser, no se si tengo algun script que me este dando ese problema, te agradecería me respondieras este comentario para saber que puedo hacer, mi blog es http://exajutiapa.blogspot.com

    ResponderEliminar
  94. Necesitaría verlo puesto por completo en tu blog para poder echarle una mirada y ver cuál podría ser el problema.

    ResponderEliminar
  95. Hola, estoy tratando de lograr este efecto en mi blog, apenas me familiarizo con el html, y seguro no lo he buscado bien(ctr+F) pero no encuentro la parte "]]>" en la plantilla de blogger, no sé si se deba a que aún uso la plantilla clásica. Cuál podría ser el problema? Gracias de antemano :)

    ResponderEliminar
  96. Hola µεlι§α,

    Revisa de nuevo, todas las plantillas tienen esa parte, debe estar antes de </head>

    ResponderEliminar
  97. Hola, gracias :) pues por más que lo busco, juro que no lo encuentro. Sería mucho pedir si le echaras un pequeño vistazo a la plantilla (http://designisnotdead.fileave.com/BlogSkins359810.txt). Ya esta prediseñada así que igual y no tiene los mismos datos que las de blogger. Este es el link del blog: http://design-notdead.blogspot.com/ Gracias y perdón por la molestia.

    ResponderEliminar
  98. Creí que cuando te referías las plantillas clásicas te referías a la Mínima y todas aquellas, pero no hay problema, entonces en tu caso puedes agregar el código antes de:

    </style>

    Lo demás iría en el lugar que sigue indicando, esas partes me parece que sí las tienes.

    ¡Saludos!

    ResponderEliminar
  99. Potro sabes que cuando quiero instalar el slider me salda 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.

    Error 500"

    Otra duda , en caso que quiera agregar el slider en las entradas tambien , tendria que copiar los codigos de arriba dos veces en la plantilla?

    ResponderEliminar
  100. Hola Hugo,

    ¿Estás poniendo el último código dentro de la Edición HTML de la plantilla? Porque sólo así quizá obtengas el error, si lo pones como se indica dentro de un elemento HTML/Javascript no debe pasar nada.

    Para agregar más de un slider mira el comentario #45

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

    ResponderEliminar
  102. oks, en estos días volveré a intentarlo, muchas muchas gracias :)

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

    ResponderEliminar
  104. Hola potro , tenias razon. Pero ahora tengo el problema de que las imagenes son mas pequeñas que el slide y aparecen 3 o 4 veces en el mismo , por lo que te queria preguntar de que manera puedo ajustar el tamaño de las imagenes para que se vean bien en el slide.

    La otra consulta que te hago es , como hago para que el slide se vea unicamente en la portada del blog , por que vi que cuando entras a una entrada tambien se visualiza , gracias por tu ayuda potro!

    ResponderEliminar
  105. Puedes cambiar el ancho y alto del contenedor como se explica en la entrada, o puedes poner imágenes más grandes, ya sería a opción tuya.
    Para que sólo se vea en la portada mira esta entrada.
    Saludos.

    ResponderEliminar
  106. Potro, me salen las imágenes inmensas, ¿hay alguna manera que cuadren en el contenedor?
    Mil gracias, y perdóname por ser tan preguntona. Gracias.

    ResponderEliminar
  107. ¿Exactamente dónde lo has puesto? Porque he entrado a tu blog y no lo veo :/

    ResponderEliminar
  108. Ays, Potro, porque dejé la cosa desmontada. Ahora te digo, lo acabo de poner para que lo veas:
    Puedes ver el resultado en esta entrada http://www.chg-events.com/2011/05/comienza-la-gira-kinder-cereali.html

    Lo que hice fue descargarme el archivo que pusistel, subirlo a Google Sites, pegar los códigos siguientes en su respectivo lugar. Y finalmente, en lugar de poner el último paso en un gadget (también lo hice y me salían inmensas las fotos), lo puse en la entrada del enlace.

    Sólo puse dos fotos de prueba. Ambas fotos las tengo subidas en el blog, pero decidí poner el enlace proporcionado en Google Sites, quitándole el final de ?attredirects=0&d=1 e incluí el enlace de entradas y una descripción, y eso que ves es el resultado.


    Dime algo.
    Mil gracias por tu ayuda.
    Muaks

    ResponderEliminar
  109. Es porque las imágenes que has puesto son inmensas, necesitas hacerlas más pequeñas o establecer dentro del código de la imagen un ancho menor:
    <img src="URL de la imagen" width="400"/>

    Por otro lado, en muchas plantillas los sliders no funcionan bien cuando están dentro de una entrada, eso depende de cada plantilla y sus estilos.
    De cualquier forma, cuando se pone en las entradas debes hacerlo desde la pestaña Edición de HTML y no en la redactar, y tampoco cambiar a la pestaña Redactar una vez que se ha puesto.

    Además de eso he visto que arriba de esto:
    /* Menú
    ----------------------------------------------- */

    Has puesto un script, los scripts nunca van en esa área, siempre van antes de </head>

    Saludos.

    ResponderEliminar
  110. Hola mira yo subi mi el archivo a un hosting esta es una url valida http://www.mediafire.com/?053njgha1efxx1h ??????????

    ResponderEliminar
  111. Ese hosting te da un link para descargar el archivo, no para ejecutarlo.
    Prueba con otro como Google Sites o Dropbox.

    ResponderEliminar
  112. Si gracias potro me quede con Dropbox pero ahora tengo el problema aumente ancho 750 x el alto 600 y no me sale el texto que le puse que puedo hacer?

    ResponderEliminar
  113. No lo sé, quizá no le aumentaste en width en color verde, necesitaría verlo para poder decirte.

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

    ResponderEliminar
  115. Mira aqui te dejo el link http://cityvilleextreme.blogspot.com/p/ganadores-mejor-zoologico.html de lo que te había comentado solo aparecen letras pequeñas al cambiar de imagen y no aparece el texto

    ResponderEliminar
  116. Al ponerlo has eliminado las etiquetas SPAN que encierran el texto descriptivo, es por eso no salen.
    Siempre que pongas códigos dentro de una entrada sigue las indicaciones de aquí:
    http://ciudadblogger.com/2009/11/como-poner-los-codigos-correctamente-en.html

    ResponderEliminar
  117. Hola Potro, te explico este Slider lo inserto sin problemas en Blogger siguiendo los pasos que dices arriba.........Ahora tengo un nuevo dominio que no es muy popular es Webs.com , entonces en este domomio es muy diferente porque no veo el codigo de la plantilla y desconosco en que parte insertar estos codigos...........Si tienes algun conocimiento de donde insertar los codigos en ese dominio te agradeceria....... De todas maneras gracias....

    ResponderEliminar
  118. Te la deberé Jordan, ya que únicamente pruebo los trucos en Blogger. Saludos.

    ResponderEliminar
  119. Tengo problemas con el menú horizontal parece q es el mismo problema que pasa si fuera un slide swf se sobrepone y no deja seleccionar la opción por que sale detras del slide. Con swf le puedo colocar value transparent pero acá no se como, te agradezco.

    ResponderEliminar
  120. No mencionas en cuál blog tienes el problema, pero puedes probar ponerle un z-index al menú.

    ResponderEliminar
  121. Muy buenas,
    como siempre unos post muy interesantes y a los que podemos sacarle mucho jugo. estoy intentando hacer una variacion en Slider, de forma que , o bien al hacer click en una de las diapositivas, se me abra la imagen en una ventana modal, o bien, hacer que a se habran todas las imagenes en una ventana moda como la de la siguiente direccion.
    http://www.ajaxshake.com/es/JS/231561/pasar-imagenes-con-efectos-unicos-y-jquery-coin-slider.html
    He probado varias cosas, utilizando a la vez de coin slider el shadowbox, pero creo que o bien no son compatibles, o bien me falta o sobra algo en el codigo. POtro , tienes alguna sugerencia??
    Mil gracias de antemano y te animo a seguir deslumbrandonos con tus conocimientos.

    Saludos

    ResponderEliminar
  122. Me temo que no son compatibles, habría que ver si existe ya algún slider que incluya las ventanas modales. Si me entero de algo te aviso ;)

    Saludos.

    ResponderEliminar
  123. Muchas gracias Potro, lo acabo de poner y funciona a la perfección, como siempre!! Qué bien queda!!

    ResponderEliminar
  124. Hola a todos...esto esta magnifico y bien facil de usar, pero tengo una pregunta, como puedo quitar los numeros que salen abajo de las imagenes?
    me salen todos los 33 numeros para ir a cada imagen, podria quitarlos y que solo salieran en las imagenes el "anterior y siguiente"?...se mira feisimo la retaila de numeros :)...alguna idea?..Gracias
    http://lorasspanish-boops.blogspot.com/

    ResponderEliminar
  125. Hola Lora, ¿en qué parte del blog lo has puesto? porque entré pero no lo vi al menos no en la portada.

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

    ResponderEliminar
  127. Las imágenes deben ser del tamaño del contenedor, en la parte azul dice qué tamaño es. Funciona con cualquier hosting siempre y cuando sea la URL de la imagen correcta.

    ResponderEliminar
  128. Buen dia Potro. Mi nombre es Roberto Guadalupe ,tengo un problema con mi blog , cada vez q quiero entrar me sale un cuadro que dice : " Un script en esta provocando que el explorador web se ejecute cn lentitud. El equipo podria dejar de responder si el script se sigue ejecutando" Como podria solucionar este problema o como identifico aquel script problematico, ya que se detiene y no puedo hacer nada y lo mismo sucede con los que visitan mi pagina. El problema es con internet explorer con Mozilla firefox ando bien . Muchas gracias esperando su respuesta. Este es mi blog
    http://rguadalupe.blogspot.com/

    ResponderEliminar
  129. Buen día Roberto:

    No veo que tengas muchos scripts, así que seguro el culpable puede ser uno de los gadgets de contadores que usas, esos siempre suelen ser problemáticos. Te recomiendo que los quites uno a uno hasta que identifiques cuál es el que está causando problema.

    ResponderEliminar
  130. POTRO EN MI WEB ME SALE UNO ENCIMA DEL OTRO MIRA: www.sergiokou.com a que se debe?

    ResponderEliminar
  131. No veo que tengas puesto este slider en ese blog.

    ResponderEliminar
  132. Felicitaciones por tu blog.

    He instalado el coin slider de la manera que indicas, pero al instalarlo como un gadget lateral, las imágenes me salen cortadas.
    He realizado las modificaciones al contenedor y las imágenes que he subido son todas iguales de 300 x 244 px.

    Si pongo el gadget en la parte superior del blog funciona perfecto, pero el problema aparece al ponerlo en el lateral.

    Otra consulta, si deseo que no aparezcan las flechas de navegación y que se pueda pausar la imagen al poner el cursor encima los cambios serían:

    hoverPause: true,
    navigation: false

    Te agradecería muchísimo tu ayuda, mi blog es http://www.gastronomiasolar.es

    ResponderEliminar
  133. Hola Andrés,

    Gracias por las felicitaciones!
    Recuerda que si cambias el tamaño del slider debes cambiarlo en la parte azul que dice:
    width: 565,
    height: 290,

    Y además en la parte en color verde; todos esos valores debes modificar para que el cambio sea efectivo.

    Lo otro que mencionas es correcto de la forma como lo has puesto, sólo pon una coma (,) después de false:

    hoverPause: true,
    navigation: false,

    ResponderEliminar
  134. Hola potro

    me podrias ayudar porfavor, mi problema es que quiero que la ubicacion de SLIDER este ala misma altura q los gadgets, ps mira en este blog estoy probando el slider, pero me sale arriba ¬¬
    http://blogprueba2l.blogspot.com/

    ya q quiero hacer uno = a este blog ..

    http://blogdpruebal.blogspot.com/

    muchas gracias....

    ResponderEliminar
  135. Hola yagami,

    Arrastra el gadget que quede justo encima de las entradas, verás que se abrirá un espacio arriba de ellas y podrás colocar ahí el gadget.

    Saludos.

    ResponderEliminar
  136. Hola Potro.

    Asi lo he hecho, como te comenté quiero mostrar imágenes de 300 x 244 px.

    En la parte azul del código he modificado a:
    width: 300,
    height: 244,

    y el código verde lo he cambiado por:
    width: 280

    He verificado y esta correcto en la plantilla, es más, si subo el gadget a la parte superior del blog funciona correctamente. El problema es al ponerlo como gadget lateral, el contenedor ahí aparece recortado.

    He cambiado las variables: hoverPause y navigation, ahora funciona como quería, gracias.

    Te agradecería si le das una mirada al blog y me comentas cual es la causa de este problema. http://gastronomiasolar.es

    Gracias

    ResponderEliminar
  137. Hola Potro, aquí de nuevo molestándote.
    He puesto un par de botones con movimiento según tu entrada de los botones de redes sociales, yo los he usado para redireccionar a otros sitios con otras imágenes.
    Funcionan perfectamente, pero nuevamente sale recortado el ancho.
    En este caso no importa mucho, ya que los textos son cortos.
    Para que lo aprecies he dejado el color de los bordes, luego los cambiaré por el color del fondo del blog, así resultarán invisibles y asunto arreglado.
    Parece que hay algún problema en la plantilla que cuando quiero poner gadgets con movimiento en la zona lateral me trunca el ancho.
    Sin embargo he puesto un gadget de fanbox de twitter y ahí si me aparece completo.
    La verdad no sé como arreglarlo, si pudieses ayudarme estaré super agradecido.

    ResponderEliminar
  138. Lo de los botones que funcionaban tan bien, los he tenido que retirar, ya que no aparecian los gadgets del twitter. Intentaré hacerlo de otro modo

    ResponderEliminar
  139. Saludos Potro

    Como ves estoy revisando varios de tus métodos de mostrar galerías de imágenes. Este también me ha llamado la atención de nuevo por su sencillez. Sin embargo echo de menos en falta que el efecto, en lugar de ser tan 'retro', sea algo más suavizado. ¿Se podría utilizar un efecto de fade out y fade in al navegar sobre esas imágenes?

    ResponderEliminar
  140. Andrés, vale, si te decides a seguir con ese método y tienes problemas deja el comentario en la otra entrada para no desviarnos del tema de este post. En cuanto al slider, sólo tuve tiempo de ingresar desde Chrome y al menos ahí se ve completo, no lo he visto recortado, no sé si lo estés viendo con otro navegador, si es así prueba verlo con otro para descartar que no sea una cuestión del navegador.

    ResponderEliminar
  141. Muchas gracias por verlo.
    De momento lo he solucionado metiendo el coin slider en una tabla de 1x1 con el ancho que necesitaba, por eso lo has visto funcionando bien.
    No sé si esa es una buena solución.
    En firefox y chrome funciona, en IE no, pero no importa.
    Gracias Potro por todo

    ResponderEliminar
  142. Ya he solucionado ambos problemas.
    Puse el coin slider dentro de una tabla de 1x1 con el ancho que necesitaba y funciona como lo has visto.
    En Chrome y Firefox funciona, en IE no, pero no importa.
    Muchas gracias

    ResponderEliminar
  143. Svalin, hay otros sliders aquí mismo en Ciudad Blogger que tienen un efecto más sencillo. Por lo pronto con este sólo ofrece estos efectos:
    random, swirl, rain, straight

    Para usar uno de ellos sólo agrega debajo de delay: 3000, esto:
    effect: '',

    Entre las comillas agrega el efecto que quieres, por ejemplo:
    effect: 'rain',

    ResponderEliminar
  144. Buen dia potro! realmente soy novato, pero tengo un problema con este tipo de galeria, mi problema es que por google chrome si aparece correcta la galeria pero por Explorer aparecen las imagenes una arriba de otra... me podrias ayudar!? gracia de antemano!

    ResponderEliminar
  145. A mi me ha ocurrido lo mismo y con Google Chrome. He probado varios slider y ninguno me ha funcionado. He subido el archivo a dropbox y a cx.com poniendo el archivo como publico y poniendo el enlace que me ofrece el hosting, pero nada de nada. Me aparecen las imágenes unas sobre otras... La verdad es que está muy chulo es slider pero no he podido con el... y mira que he implementado cosas que has ofrecido en esta web. De todos modos y aprovechando que escribo te doy las gracias por el trabajo que haces que nos hace a muchos a mejorar y mucho nuestras webs. Os dejo aquí la mía para quien quiera ver el producto de muchos de los consejos y tutoriales ofrecidos por Potro.

    www.bunburyclub.com

    ResponderEliminar
  146. Buen día Alcanzando Naciones,

    No sé con qué versión lo hayas revisado, pero al menos el slider como tal es compatible con IE8, incluso ingresando a esta entrada con ese navegador puedes constatar que sí funciona ahí.
    Si igual usas IE8 y en tu blog no se ve bien entonces debe ser un conflicto con la plantilla o algo similar, pero el script como tal repito, sí funciona en IE8

    Saludos!

    ResponderEliminar
  147. Hola :: Bunbury España ::,

    Si te sucede en todos los navegadores entonces el problema puede ser un conflicto entre sus versiones de jQuery:
    http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

    Saludos y gracias por tu comentario!

    ResponderEliminar
  148. Ya estuve viendo precisamente ese artículo y sustituyendo las versiones por la más nueva, pero aún así seguía dándome el mismo problema. Gracias de todos modos por el comentario.

    ResponderEliminar
  149. en mozilla y chrome si funciona, pero en Internet Explorer 8 no, http://todoporta2009.blogspot.com/

    ResponderEliminar
  150. Tengo IE8 y con ese veo perfectamente el slider de ejemplo de esta entrada rodrigo.

    ResponderEliminar
  151. bueno si he visto el tuyo en internet explorer y si se ve, pero en el mio no T_T no se que pasa

    ResponderEliminar
  152. hola! como lo puedo poner en una de google sites? al inicio como cabecera?

    ResponderEliminar
  153. Como te mencionaba hace rato, ni idea con Google Sites :/

    ResponderEliminar
  154. Hola Potro jejeje de Nuevo yo

    Te escribo en esta entrada ya k busco algo relacionado con las imagenes ya k busque en tu blog y no encontre lo siguiente; espero me puedas dar soporte ejjeje ya deberia donar algo verdad jejeje, lo k ocurre es k necesito una imagen con varios Links para ser mas especifico quiero poner un mapa de Mexico pero k cada estado tenga un link (Enlace) al pasar el mause por encima y te lleven a una entrada referente al estado, ya k tengo un pequeño proyecto para fomentar el Turismo en Mexico y quisiera k las personas entraran al estado k fueran a visitar por medio del mapa osea k de una manera me serviria como un MENU, pero no tengo ni la menor idea como se hace encontre lo siguiente el cual es un ejemplo mas claro de lo k nesecito, pero logico k en vez de ese mapa seria uno de mexico, pero la imagen esta genial te dejo el LINK:

    http://www.cssplay.co.uk/menu/imagemap

    al pareser es con CSS, espero no este muy complicado ejjejeje

    Saludos Amigo

    ResponderEliminar
  155. PS: Por cierto el efecto de la segunda imagen es la k se ve mejor o al menos llama mas la atencion

    ResponderEliminar
  156. Hola kriec,

    Lo que necesitas es mapear la imagen, mapear significa que marcarás áreas en una imagen para que cada área tenga un enlace distinto.
    Se puede hacer manualmente pero es un tanto confuso, pero por suerte hay sitios online que lo hacen por ti. Busca algún generador de mapeados de imágenes y encontrarás algunos sencillos.
    Hace días que tengo en mente publicar una entrada sobre ese tema pero siempre se me cruza otra cosa y ya no lo hago. A ver si lo apunto para esta semana que viene.

    Saludos.

    ResponderEliminar
  157. Hola Potro, cuanto tiempo sin entrar por aquí, aunque sigo cada una de tus entradas.
    No sé si mi pregunta es la correcta para este post, disculpa si no es así, no sabía donde hacerla.
    Hace unos días por petición popular cambié mi plantilla por una mas profesional, aún tengo varios cambios que hacer no obstante esta viene definida en su presentación inicial bajo el header con fotografías estilo slider con texto. Las fotografías me van que ni al pelo por el contenido de mi blog, pero quisiera eliminar el texto que en ellas aparece, que por otro lado no sé si está proteguido por el autor o no.
    Si puedo eliminar el texto donde he de hacerlo?. Muchas gracias
    La Plantilla es Revize y mi Blog redecohogar.blogspot.com

    ResponderEliminar
  158. Hola Cristina,

    Qué gusto verte de nuevo por estos lados.
    Para eliminar el texto del slider sólo tienes que buscar dentro de la plantilla la parte del slider y quitar los textos que corresponden a cada una, por ejemplo, una de ellas tiene esto:

    <h3>This is featured post 1 title</h3>
    <p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p>

    Todo eso debes quitarlo para que sólo aparezcan las imágenes sin nada más.
    Los créditos siempre se pueden quitar, después de <div id='footer'> los verás, sólo que el autor siempre pide que se dejen a modo de agradecimiento por el tiempo invertido en la creación de la plantilla.

    Saludos.

    ResponderEliminar
  159. Gracias Potro por tu pronta respuesta, jajajaja si es que por algo eres el rey...
    Quité el texto siguiendo tus instrucciones y ahora no funciona el slider, se ha quedado la primera fotografía fija y no pasan las 5 restantes. A que se puede deber?. Ufff.
    Gracias y que tengas un buen día.
    Con cariño
    Cristina

    ResponderEliminar
  160. Bien, entonces ponlo de nuevo como estaba, luego, ya que esté todo como antes busca esta parte y agrega todo lo que está en negrita:

    .jdGallery .slideInfoZone{display:none; position:absolute;z-index:10;width:100%;margin:0;left:0;bottom:0;height:120px;background:#654118;color:#fff;text-indent:0;overflow:hidden}
    * html .jdGallery .slideInfoZone{bottom:-1px}
    .jdGallery .slideInfoZone h2{display:none; padding:0;margin:0;margin:2px 5px;font-size:14px;font-weight:bold;color:#fff !important}
    .jdGallery .slideInfoZone p{display:none; padding:0;font-size:12px;margin:2px 5px;color:#eee}


    Veamos si con eso funciona y se dejan de ver los textos.
    Buen día para ti también!

    ResponderEliminar
  161. Hola de nuevo Potro. Agregé lo que está en negrita y todo ok, pero cuando pasan las imágenes y posicionas el puntero sobre las fotos aparece texto haciendo referencia al post de la foto y al cliclear como es lógico da error de entrada. He intentado borrarando del código This is featured post 1 title y a class='open' href='SLIDER-1-URL-HERE' title='This is featured post 2' pero sin éxito. Hay alguna solución o me recomiendas partir de 0 con una plantilla básica de blogger y adaptarle tu código de slinder???.
    Gracias de nuevo
    Un abrazo
    Cristina

    ResponderEliminar
  162. No hay que ser tan drásticos para cambiar de plantilla. Si te da error es porque no has puesto la URL del enlace, es decir, se supone que las imágenes deben enlazar a una entrada, y donde dice SLIDER-1-URL-HERE es donde debes poner ese enlace. Si no quieres que abra nada entonces en lugar de una URL pon el signo de gato #

    Un abrazo.

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

    ResponderEliminar
  164. He pensado que lo mejor será colocar mis propias fotos facilitando así al lector cliclear sobre ellas e ir directamente al post.
    Tengo no obstante dos preguntas.
    Donde puedo encontrar las medidas de ancho y alto de las fotos que se ven con el slider?
    He aprovechado el menú horizontal de la plantilla pero me gustaría que al cliclear sobre ellas se vean solo las entradas y no el slider, como puedo hacerlo?

    ResponderEliminar
  165. Las imágenes deben ser de 610px de ancho por 318px de alto.
    Para que el slider se vea sólo en la portada agrega antes de </head> esto:

    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <style type='text/css'>
    .fullbox_excerpt {
    display: none;
    }
    </style>
    </b:if>

    ResponderEliminar
  166. hola el side no me funciona a que hostin tengo que subir el archivo que descarge aqui en la pag

    ResponderEliminar
  167. mi pag www.salsaenlaweb.com
    email salsenlaweb@gmail.com

    ResponderEliminar
  168. En cualquiera que te dé un enlace directo, por ejemplo Dropbox:
    http://ciudadblogger.com/2010/04/como-usar-dropbox.html

    Pero antes, debes corregir un error que tienes en los estilos de tu plantilla:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    ResponderEliminar
  169. Potro gracias por todo lo que has aportado a tantos blogueros como yo, quisiera comentarte 2 cositas, 1º tengo un problemilla con coin slider, es que si tengo shadowbox no me funciona y 2º he googleado por ahí y me ha maravillado lo que he visto en "http://css-tricks.com/3412-anythingslider-jquery-plugin/" quisiera saber si podrías hacer esto para que los blogueros novatos podamos incluir este slider en nuestros blogs, un saludo.

    ResponderEliminar
  170. Hola UN GOMERO,

    El slider no debería interferir con Shadowbox, pues ninguno tiene relación con algún script que ambos usen. Quizá tenga que ver en la colocación de los códigos, tendría que ver tu blog con los códigos puestos para saber qué puede estar pasando.

    Saludos.

    ResponderEliminar
  171. esta es la entrada que quiero publicar: "http://gimnasioseltemplo1y2.blogspot.com/2011/10/spinning-step-bailoterapia-body-pump.html", este es mi blog: "http://gimnasioseltemplo1y2.blogspot.com/"
    y esta es mi plantilla: "http://dl.dropbox.com/u/46271849/mi%20plantilla.xml", te estaría muy agradecido si me ayudases, un saludo

    ResponderEliminar
  172. El problema podría ser que usas tres versiones distintas de jQuery:
    http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

    Sí dejas sólo una podría funcionar.

    ResponderEliminar
  173. hola!, yo quiero uno asi, para blogger, pero no voy a subir a un hosting..
    no hay esos estilos me canse de buscar, no me gusta no me convece picasa..
    es para crear asi en las entradas

    ResponderEliminar
  174. No es necesario subirlo a un hosting, los script siempre se pueden alojar en las plantillas:
    http://ciudadblogger.com/2010/02/como-alojar-scripts-en-la-plantilla.html

    Y Picasa me parece que es la forma más eficiente de subir las fotos pues todas las que subimos desde Blogger su suben ahí, pero sino te convence puedes usar el alojamiento que prefieras.

    ResponderEliminar
  175. Muchas gracias, me ha valido de mucho tu ayuda, ahora si me funciona shadowbox con coin slider aunque no consigo hacer que los documentos de google-dock funcionen con shadowbox aunque las imegenes y videos si lo hacen.
    http://gimnasioseltemplo1y2.blogspot.com/

    ResponderEliminar
  176. Es que ese es un documento, si tuviera la terminación .HTML sí podrías hacer que se abra como una página Web, pero no es el caso.

    ResponderEliminar
  177. Hola Potro
    Lo pude hacer y quedo bonito
    permasalud.blogspot.com
    Pero no cambie el URL de Enlace, para que esta esa opcion? solo agregue la url de la imagen!
    Gracias

    ResponderEliminar
  178. Hola Jaime,

    Eso es por si quieres que la imagen enlace a alguna entrada o alguna página. Sino quieres que enlace a ninguna parte cambia donde dice URL del enlace por un signo de gato #

    Saludos.

    ResponderEliminar
  179. Hola, Potro! Acabo de poner este truco y funciona a las mil maravillas. Gracias!
    Lo puse que aparezca solo en la página principal, para no alentar el blog.
    Solo una pregunta: es que veo que el efecto de transición de una imagen a la otra es mucho más lento y notorio en mi blog que aquí en tu entrada (mis recuadros de transición son como muy grades); y esto, a pesar de que las imágenes tienen menos pixeles que las tuyas, e incluso las optimicé antes de subirlas a Picassa (las 6 juntas me suman 126K).
    Pero aún así veo este efecto como lento. ¿Será que es mi blog es el que está lento, o es solo que el script es algo pesado?
    De todas formas, gracias por este truco, pues me ha gustado y funciona bien.
    Saludos!

    ResponderEliminar
  180. (Ah, disculpa: estoy en sermonescristianos.blogspot.com).

    ResponderEliminar
  181. Hola! Soy yo de nuevo. Es que acabo de verificar que este slider en mi blog no me funciona en IE. Me aparecen todas las imágenes en columna, una abajo de la otra, pero no como slider.
    Puedo ver que no es el script en sí, porque aquí en tu entrada sí puedo verlo funcionando bien aún en IE. Así que por consiguiente, debe ser algo malo con mi blog.
    ¿Tendrás alguna idea de por qué no me funciona bien y cómo solucionarlo?
    Ojalá y me puedas ayudar.
    Gracias de antemano.

    ResponderEliminar
  182. Hola de nuevo Vicky,

    Yo creo que el mío se aprecia más rápido porque está en un iframe, no sé qué tenga que ver pero igual lo noté justo con un slider que publiqué ayer. Supongo que se trata del iframe, a menos que sea porque he puesto los scripts directo en la plantilla, pero fuera de eso no he hecho nada diferente a lo que explico en la entrada.

    Con Internet Explorer no sé qué pase, ya sabes lo raro que se comporta siempre ese navegador. En tu plantilla parece estar todo bien, al menos no pude percatarme de algo inusual.
    Podrías probar poner los scripts después de <head> tal vez eso haga que lea los scripts pues parece que no los logra identificar.
    Igual prueba poner los estilos del slider arriba de:
    /* Tabs
    ----------------------------------------------- */

    Espero que algo de eso pueda arreglarlo, porque no se me ocurre otra idea de qué pueda estar pasando.
    Saludos.

    ResponderEliminar
  183. Hola Potro. Primero quiero agradecerte inmensamente por haberte tomado la molestia de revisar mi blog y la plantilla para ver si algo andaba mal. No sabes cuánto agradezco toda tu ayuda y tu gran disposición y amabilidad. Por eso es que haces que Ciudad Blogger sea una preciada joya para tantos bloggeros, incluyéndome a mí.
    Seguí tus recomendaciones y ya se arregló el problema con el IE. Te cuento, por si alguien tuviese el mismo conflicto y puedas aconsejarle igualmente.
    Primero puse los estilos antes de Tabs y eso no resultó. Pero cuando puse el script justo después de donde empieza Head, entonces fue que funcionó bien en IE. Al parecer era como supusiste, que no se leía bien el script, si es que estaba más abajo.
    Después, para ver si mejoraba la velocidad de la transición, alojé el script en la plantilla, pero no noté gran diferencia. Traté también de ponerlo en un iframe, pero no me resultó (quizás porque no lo hice bien, o porque el slider no está en una entrada, sino en un gadget. No sé.).
    Pero lo importante es que ahora sí funciona en IE (aunque algo lento, pero estoy contenta de que funcione).
    Solo me queda la duda de que como ahora el script queda antes de todos los metatags que traía la plantilla, y de los otros que yo le adicioné; entonces me pregunto si eso estorbará un poco a que los robots buscadores lean con facilidad esos metatags.
    Muchísimas gracias, sinceramente, por toda tu valiosa ayuda.
    Saludos!

    ResponderEliminar
  184. Pues qué buena noticia que sí se haya reparado el problema con IE. Por la velocidad igual no te preocupes, recuerda que puedes configurarla en el script (delay: 3000).
    Con los metatags no hay inconveniente, pero aun así puedes poner el script más abajo, haciendo pruebas podrás ver si sigue funcionando aun poniéndolo después de los metatags.

    Saludos y muchas gracias por tu amable comentario.

    ResponderEliminar
  185. Seguiré tus consejos. Gracias por todo y saludos!

    ResponderEliminar
  186. Hola potro me puedes decir a que servidor subis el archivo e estado probando con varios pero no me funciona, meto todo como dice en el tutorial pero no me funciona no se que onda.

    ResponderEliminar
  187. ya pude lei en un comentario que los subias a dropbox probe y ya me anda!

    ResponderEliminar
  188. Estimado Potro...
    Recién ayer mismo he descubierto tu Blog y la verdad que enseñas de maravilla. Mucho se aprende contigo.

    Te quiero hacer una consulta porque no he dado hecho con esta animación. Copié tal cual todo, pero las imagenes me las pone una debajo de la otra y sin ninguna transición. Si tienes ganas y tiempo podrías ver si en mi blog tengo alguna incompatibilidad.

    Esperare tu respuesta. Gracias

    ResponderEliminar
  189. Hola Quién te lo dijo...,

    Con gusto lo veo, pero es necesario que el código esté puesto en el blog para poder saber qué puede estar pasando.

    Saludos.

    ResponderEliminar
  190. Potro, disculpame pero no te entendí lo que me pedís que el código esté en el blog.

    Sds.

    ResponderEliminar
  191. Me refiero a que debes poner el slider tal como se explica, aunque no funcione déjalo, pues sólo con los códigos puestos puedo ver dónde está el problema.

    Saludos.

    ResponderEliminar
  192. Hola Potro:
    Es que si lo dejo mal sería una mala impresión para aquellos que ingresan al blog. ¿Como nos podríamos poner de acuerdo en la hora para que lo puedas ver, o si te parece mejor que lo haga en un blog de prueba y te dé la dirección para que lo veas?.

    Dime que te parece que haga.
    Saludos

    ResponderEliminar
  193. Hola Potro, nuevamente yo acá, es quería comentarte lo que me pasa.
    Resulta que he intentado probar distintas alternativas según estuve leyendo acá mismo (todas) y, el problema lo tengo con el Internet Explorer 8. He probado con Chrome y Mozzila y funciona bién el efecto, pero no con IE. Sigue poniendo las imagenes una debajo de la otra.

    Perdón por las molestias.
    Saludos

    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.

 
Ir Arriba Ir Abajo
I Ciudad Blogger