TRUCOS y
TUTORIALES
para tu blog
No, no vendemos
camisetas... aun
Camiseta Ciudad Blogger

Coda Slider: Galería de imágenes con miniaturas

2 de noviembre de 2011 | Número de comentarios208 comentarios
AVISO
Este slider ha dejado de funcionar por razones que aun desconozco, se recomienda usar algún otro slider dentro de la categoría de Slideshows.

Al igual que el TriSlider desconozco si este sea el verdadero nombre de este slider, yo lo he llamado así porque el autor (CSS Tricks) ha dicho que usa el plugin Coda Slider, así que ha sido más sencillo nombrarlo de esta forma.

Pero el nombre es lo de menos, lo que gusta de este slider, es que muestra las miniaturas de las imágenes para poder navegar desde ellas, y el efecto deslizante con el que avanzan.


Para poner este slider de imágenes necesitaremos uso de jQuery, así como tres scripts más pero no te preocupes que no son tan pesados como parece.
Bien, primero descarga este archivo, descomprímelo, sube los archivos a un hosting y luego pega este código antes de </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
<script src='URL del archivo jquery-easing-1.3.pack.js'/>
<script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>
<script src='URL del archivo coda-slider.1.1.1.pack.js'/>

<script type='text/javascript'>
//<![CDATA[
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;

theInterval = function(cur){
clearInterval(theInt);

if( typeof cur != 'undefined' )
curclicked = cur;

$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function() {
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 6 == curclicked )
curclicked = 0;

}, 3000);
};

// DOM Ready
$(function() {
$("#main-photo-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});

theInterval();
});
//]]>
</script>
Ahí agrega donde se indica las URLs de los archivos que subiste previamente.
Ahora antes de ]]></b:skin> pega los estilos:
/* Coda Slider
----------------------------------------------- */
#page-wrap {
width: 500px; /* Ancho del contenedor general */
min-height: 420px; /* Alto del contenedor general */
margin: 0 auto;
position: relative;
background: url(http://lh3.googleusercontent.com/-T3CeFMv7TuY/TrG39iTPVMI/AAAAAAAAB30/Xj01daCeVD0/s501/bg.png) top center no-repeat;
}
.slider-wrap {
width: 419px;
position: absolute;
top: 40px; left: 40px;
background:#DADADA;
}
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer {
position: relative;
overflow: hidden;
width: 419px; /* Ancho del contenedor de las imágenes */
height: 285px; /* Alto del contenedor general */
margin-bottom:7px;
}
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px;}
#movers-row { margin: -39px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data {
background: url(http://lh4.googleusercontent.com/-eGusptX3R34/TrG4KBNKsQI/AAAAAAAAB4E/T5eyooRo_hs/s10/transpBlack.png);
padding: 10px;
height: 40px;
margin-top: -60px;
position: relative;
z-index: 100;
color: #FFF; /* Color del texto de las descripciones */
}
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -16px; position: relative; padding-top: 10px; z-index: 100; }
.active-thumb { background: transparent url(http://lh6.googleusercontent.com/-NCDDHCav-NU/TrG4Hv2KO8I/AAAAAAAAB38/Wsgxy7dTeEU/s14/icon-arrow.png) top center no-repeat; }
Después entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript, si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript. Ahí pega la estructura del slider:
<div id='page-wrap'>
<div class='slider-wrap'>
<div class='csw' id='main-photo-slider'>
<div class='panelContainer'>

<div class='panel' title='Panel 1'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen UNO' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 2'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen DOS' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 3'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen TRES' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 4'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen CUATRO' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 5'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen CINCO' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 6'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen SEIS' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


</div></div>
<!-- Estas son las MINIATURAS -->

<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src='URL de la imagen UNO' width='60px'/></a>

<div id='movers-row'>

<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src='URL de la imagen DOS' width='60px'/></a></div>

<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src='URL de la imagen TRES' width='60px'/></a></div>

<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src='URL de la imagen CUATRO' width='60px'/></a></div>

<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src='URL de la imagen CINCO' width='60px'/></a></div>

<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src='URL de la imagen SEIS' width='60px'/></a></div>

</div>
</div></div>
Por último coloca las URLs de las imágenes donde se indica, así como la URL de los enlaces.
Puedes modificar la velocidad con la que cambian las imágenes en la parte marcada en color naranja, ahí pon el número en milisegundos, aunque la primera imagen siempre tardará un poco más en cambiar.
Al slider le caben seis imágenes, y aunque se podría ampliar, la recomendación es dejarlo como está, a menos claro que quieras trabajar mucho.

Como ves es un gadget llamativo, útil para mostrar contenido destacado o para una galería de imágenes, y arriba de las entradas quedará muy bien.

208 comentarios :

  1. Potro, sé que es básico, pero no sé cómo se hace el subir los archivos a un hosting... ¿Me podrías dar unas nociones de ello? gracias

    ResponderEliminar
  2. Buen dato Potro, aunque yo ya uso uno. Aunque quizás me entusiasme con este. Gracias! :D

    ResponderEliminar
  3. Hola potro sabrías como hago para hacer un tipo de galeria como el de esta página, http://www.ps3argento.com.ar/ que muestra las imágenes pero al pasar el ratón muestra los titulos y tiene un efecto muy bueno justo lo que necestio me podrías ayuda por favor gracias.

    ResponderEliminar
  4. Potro como se haria para que fuese automatico colocando las ultimas entradas del blog....??

    ResponderEliminar
  5. Potro como la verdad solo confio en tus tutos por eso te pregunto como puedo poner el Comments Box de facebook en mi blog.

    y tambien ahi mismo los comentarios normales de blogger.

    mi web es wwwpavasfamosas.blogspot.com

    ResponderEliminar
  6. De acuerdo con @FaceTV .

    Potro la verda no tengo hosting para subir los archivos y me da un poco de flojera hacerlo jeje pero será que tu los subes a algún lado?

    ResponderEliminar
  7. Muy buena potro por la entrada
    Saludos

    ResponderEliminar
  8. Muy buena Potro quizás la ponga en mi web.
    Un abrazo!

    ResponderEliminar
  9. No sin MyMakeUp, no es complicado, por suerte con Google Sites es fácil, y con Dropbox mucho más ;)

    ResponderEliminar
  10. Panchito, al menos es una opción para tomar en cuenta en caso de que después quieras cambiar la que ya tienes :)

    christian neyra, que muestre los títulos no, pero es muy parecido al menú tipo acordeón con Mootools.

    ResponderEliminar
  11. FaceTV, sólo he visto uno que haga eso, hay una adaptación de ese tipo de slider automatizado en Pizcos.net, por ahí lo puedes encontrar.

    videosxxx, te agradezco la confianza, aunque sigo sin poder hacer ese tutorial ya que no tengo verificada la cuenta de Facebook y eso me impide hacer varias cosas. Pero en Vagabundia hay un tutorial sobre ello, seguro te servirá.

    ResponderEliminar
  12. BGeek, hombre a mí también me da flojera, así que nos quedaremos todos sin slider.

    ResponderEliminar
  13. Jhonnysan, Saludos!

    Josemi, otro abrazo para ti!

    ResponderEliminar
  14. Potro ...como puedo poner un cuadro para que dejen comentarios donde incluya botones de TW y FB,que no sean de el que trae blogger,sino meterle una nueva caja de otro lado!! alguna idea...gracias,esperando respuesta!!

    ResponderEliminar
  15. Hola tengo una preguta pero no es sobre este post.
    yo tenia una cuenta en adsense y fue eliminada pero mi blog tiene mucho trafico entonces puse otra cuenta como administradora de ese blog crees que pueda volver aplicar con esa otra cuenta otros datos por ejemplo mi hermano ECT. ?

    ResponderEliminar
  16. potro mis padres me han dejado poner publicidad de adsense !! pero para eso dicen que me cree una cuenta de paypal para estar mas seguro de que no estafen. entonces al crearme la cuenta de paypal tengo dos opciones: una normal o para empresas. ¿cual opcion escojo? y una vez obtenida mi cuenta de paypal, ¿adsense me puede transferir el dinero a mi cuenta de paypal?

    ResponderEliminar
  17. gracias potro, pero mejor sigo con tu web no confio en vagabundia.


    y una pregunta si cambio plantilla pierdo visitas?

    ResponderEliminar
  18. Microboy90, hay algunos gestores de comentarios que puedes usar, el más popular es Disqus, sin embargo, antes de que te decidas a usarlo debes saber que si lo usas y luego lo eliminas, todos los comentarios que se hayan hecho con Discus no se verán en Blogger, y lo mismo al revés, los comentarios de Blogger que se hayan hecho antes no se verán en Discus.

    ResponderEliminar
  19. ilnd, puedes enviar la solicitud, pero habría que ver por qué motivos te eliminaron tu cuenta, de eso dependerá mucho si te la aceptan o no, al igual que si aceptan si tu blog es apto para poner AdSense.

    ResponderEliminar
  20. CampamentoWeb, AdSense no paga por medio de PayPal, así que eso no te servirá de nada, al menos no para cobrar tu dinero de AdSense. Los medios de pago dependen de cada país, si ingresas a tu cuenta de AdSense podrás ver cuáles son los métodos de pago que tienes disponibles.

    ResponderEliminar
  21. videosxxx, pues no deberías no hacerlo, yo he aprendido demasiado de Vagabundia al igual que casi todos.

    El cambio de plantilla no debe afectar, siempre y cuando la plantilla esté bien formada, si es así no debe pasar nada.

    ResponderEliminar
  22. EXCELEEEEEEEEENTE!! JUSTO BUSKSVA ALGO ASI!
    muchas gracias le voi a dar algun uso bueno ;) saludos

    ResponderEliminar
  23. hola Potro, como estás? :)

    una pregunta offtopic: hay alguna forma de editar la plantilla para que el blog se adapte al tamaño de la pantalla/ventana? algo así como la nueva interfaz de gmail...

    gracias ;)

    ResponderEliminar
  24. Potro disculpa que te moleste pero pero sera que existe un gadget que muestre automaticamente las ultimas entradas y con su imagen, gracias y disculpa por las molestias

    ResponderEliminar
  25. digo las entradas mas nuevas para que me entiendas gracias y disculpa nueva mente

    ResponderEliminar
  26. POTRO... xq no me aparece el cuadro de comentarios en todos los posts? xq no en todos me aparece..k es lo k pasa? ayuda porfavor!!!

    ResponderEliminar
  27. VacilandoUnRap, mientras no cambies la plantilla por treintava vez pon todo lo que quieras :D

    CristJian, sí, pero es algo de trabajo, tienes que cambiar las medidas de todos los contenedores, pasarlas de pixeles a porcentajes. Igual hay plantillas que ya no así, es más fácil que te descargues una y la personalices.

    ResponderEliminar
  28. ok gracias pero si mi cuenta fue eliminada de adSense con otro email y despues elimino ese email u hago otro email administrador de ese blog puedo aplicar con los mismos datos que la eliminada o tiene que ser el diferente computador o en dferente datos. (mi cuenta fue eliminada por varios clicks invalidos)

    ResponderEliminar
  29. Muy bueno, para las galerías en un post.

    Saludos, saludos.

    ResponderEliminar
  30. videosxxx, con imagen tengo uno pero es por categorías, aunque se puede modificar para que aplique a todas las entradas, ahí en los comentarios se explica qué modificar:
    http://ciudadblogger.com/2011/05/ultimas-entradas-por-categorias-con.html

    ResponderEliminar
  31. Microboy90, ¿en Disqus? No sé, lo he probado casi nada. Si son los comentarios de Blogger entonces revisa si algunas entradas tienes configurado para que no aparezcan los comentarios (Editar entrada > Opciones de entrada).

    ResponderEliminar
  32. ilnd, si fue por clicks inválidos va a estar complicado porque ya tienen un registro de tu IP. Sería más conveniente que abrieras otra cuenta desde otro equipo y desde esa cuenta abras otro blog, luego mandas la solicitud, ya que te la aprueben (si lo hacen) pones los anuncios en tu blog, pero claro siempre existirá el riesgo que te la eliminen, aunque algunos han hecho ese procedimiento y continúan con su cuenta, pero claro, jamás volvieron a hacerse auto-clicks.

    ResponderEliminar
  33. mmm interesante eso.. donde puedo encontrar algunas?? por lo menos para revisar el código y editarlo ;)

    ResponderEliminar
  34. Pepée Pilato, saludos!

    CristJian, pues de hecho en las plantillas antiguas de Blogger hay una o dos, y pues personalizadas debe haber en btemplates.com

    ResponderEliminar
  35. Potro esta es una pregunta fuera del tema del post, por ende me gustaría que la eliminaras después de responder a la pregunta, la pregunta es: ¿Como teva con ClickBank?, ¿es rentable?.

    Hasta podrías crear un post explicando como funciona esto y cuales han sido tus resultados.

    ResponderEliminar
  36. Me encanto!!!. . . ahora de allí, a que me salga. . .creo, que recibirás noticias miás prontito.

    ResponderEliminar
  37. POTRO,si aparecen asi como me dijistes,pero en todas las entradas esta asi,y yo no hice ningun cambio de no permitir comentarios,no se que paso,pero parece que 1x1 tengo que darle "permitir" comentarios,como le hago pa que aparesca en todos!! de una ves...gracias espero respuesta!!

    ResponderEliminar
  38. Haniel Baez, pues te respondería si alguna vez hubiese usado ClickBank pero no ha sido así, quizá piensas que uno de los sitios que se promocionan en los banners es mío, pero no ;)

    ResponderEliminar
  39. Anne, eso me agrada, ya sabes que siempre es un gusto leerte por aquí ;)

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

    ResponderEliminar
  41. todo-sonandoporbailar.blogspot.com Por que me quedo asi? Sera por que todabia no le puse eso de URL del archivo jquery-easing-1.3.pack.js???????

    ResponderEliminar
  42. Microboy90, en la antigua interfaz: Configuración > Comentarios > Comentarios > Mostrar. En la nueva interfaz: Configuración > Entradas y comentarios > Mostrar comentarios > Mostrar.
    Si no los muestra todos de jalón tendrás que hacerlo uno por uno... :/

    ResponderEliminar
  43. ninguno, todos los pasos y todos los archivos son necesarios para que el slider funcione y se vea bien.

    ResponderEliminar
  44. Pss es que ya lo hice asi como dices,pero no salen... yo creo que tiene que ser 1 x 1 en mas de 3mil entradas?? wuaaaaaa

    ResponderEliminar
  45. Eso suena a que tendrás mucho trabajo.

    ResponderEliminar
  46. me encantan los slider, el problema es que siempre que creo que ya tengo el diseño del blog totalmente terminado, aparece un slider tan bueno como este. Y es ahí donde me rompo la cabeza para ver de que manera lo puedo implementar.

    Gracias por el aporte potro, voy a tomarme el finde para ver si lo puedo poner en funcionamiento.

    ResponderEliminar
  47. Hola Potro

    Saludos antes k nada y k estes bien Amigo y mi Pregunta es la siguiente:

    Este se puede Utilizar con Scriptaculous y Prototype, y si es asi nos lo podrias compartir para Poderlo Utilizar. (Lo k ocurre k no me se el truco o no me sale, algo e de estar haciendo mal, claro k con este no lo e intentado Jejejejj)

    Muchas Gracias Potro

    ResponderEliminar
  48. muy bueno esto potro heee la verdad nos ayuda mucho alos administradores ya que esta bien explicado namas lo de los hostin podria ser megaupload o fileserver?? felicidades heee

    ResponderEliminar
  49. Hola Potro primero que nada darte las gracias por compartir tus conociemientos de verdad gracias dios t cuide y bendiga.
    Mira mi consulta es la siguiente disculpa si no va con el titulo, pero la inquietud que tengo es que quiero aprender como poner un banner en un reproductor de TV y como poner adsense en el mismo reproductor.

    Amigo mil gracias por tu ayuda dios te ilumine.

    ResponderEliminar
  50. Como puedo hacer pero para ponerlo dentro de una entrada o una pagina?
    Gracias Potro de antemano por tu respuesta!!!!!!!!!

    ResponderEliminar
  51. ayuda no pudo aser q este slidar se muevan las imagens no mas se qda en una pero ya le meti todas y nada potro espero q me puedas ayudar

    ResponderEliminar
  52. EpideMia, es difícil elegir entre tantos, pero esa es la parte divertida, que hay variedad, casi casi como una dulcería :)

    ResponderEliminar
  53. kriec, si has usado el hack para que sea compatible con Scriptaculous debe funcionar, a menos que sea de esos que se resisten al truquillo.

    ResponderEliminar
  54. ticherking13, ninguno de esos, necesitas uno que te dé un link para visualizar o ejecutar el archivo, no un link para descargarlo. Como hosting puedes usar Googles Sites. Saludos.

    ResponderEliminar
  55. Linda, muchas gracias por tu amable comentario. Desafortunadamente para eso no te puedo ayudar ya que eso infringe las políticas de AdSense y pueden eliminarte la cuenta si lo haces.
    Saludos.

    ResponderEliminar
  56. Jk-ch!, es el mismo procedimiento sólo que el último código iría dentro de la entrada, pero, muchas veces los sliders no se ven muy bien ahí por los estilos de las plantillas.

    ResponderEliminar
  57. hertey, ¿y en cuál blog lo has puesto...?

    ResponderEliminar
  58. lo e puesto en mi blog de blogspoot mira aqui esta la pag cheka www.electroanimejp.blogspot.com esta en construccion pero chekala
    pero no recoren las imagenes no se q aya echo mal o q onda por q yse todo deacuerdo al proedimiento

    ResponderEliminar
  59. Aunque yo buscaba alguno como el de la página de la UEFA. Ese es muy atractivo, he encontrado unos parecidos pero demasiados simples.

    ResponderEliminar
  60. buen slide :D

    oye man sabes como puedo hacer que las imágenes al momento de cargar aparezcan como cuadriculas

    asi como esta:
    https://lh3.googleusercontent.com/-ugVKNmkYM_U/To0jijNX33I/AAAAAAAADls/1QIFUi-by4E/s210/4UXOh.png

    ResponderEliminar
  61. ¿Varias imágenes en una sola pasada? No creo que funcione así :/

    ResponderEliminar
  62. oie potro sabes si se puede hacer con videos y sin cambiarse automaticamente? *.*

    ResponderEliminar
  63. Justo el sábado estaba trabajando en esa posibilidad pero se me cruzaron unos imprevistos y ya no pude continuarlo. Trataré de resolverlo hoy, si funciona lo publico en la próxima entrada.

    ResponderEliminar
  64. Hola Potro me gustaria poder agrandar la imagen y ajustar achicando mas el contenedor,pero cambio las medidas y se forman como dos cuadros. hay alguna regla para cambiar el tamaño?gracias
    http://probandoparanohacermacana.blogspot.com/

    ResponderEliminar
  65. vero84, si cambias el tamaño debes cambiar el tamaño de las imágenes que está en el tercer código, debes cambiar el tamaño que está dos veces en el segundo código, y las medidas de top: 40px; left: 40px;
    No hay una regla general pues depende de cada caso y las medidas que se apliquen, pero puedes ir jugando con los valores y dando Vista Previa hasta que quede bien con el tamaño que deseas.

    ResponderEliminar
  66. Hola Potro, quisiera saber como hago para que al hacer click en la imagen grande, esta me redireccione a una pagina, osea como colocarle un link a las imagenes grandes.
    De antemano, muchas gracias por tu ayuda!!

    ResponderEliminar
  67. Black, jajaja, no te burles del nombre, mira que me maté pensando en cómo ponerle :P

    ResponderEliminar
  68. Hola George, en donde dice URL del enlace puedes poner el enlace que quieras.

    ResponderEliminar
  69. Gracias Potro por tu respuestas, he intentado colocar este slider en mi blog de prueba, no salen las imagenes que deben, ni los links para redireccionar, espero me puedas ayudar, porque una vez que me salga esto podre editarlo y reducirlo a 3 imagenes, que es lo que pretendo.
    Mi blog de prueba es el sgte:
    http://miotroblogmiotroblog.blogspot.com/
    espero puedas brindarme tu ayuda. Gracias

    ResponderEliminar
  70. Hola de nuevo George,

    Hay un error de Blogger que de vez en cuando aparece y nos hace sufrir con estas cosas que no hacen más que confundirnos.
    Se trata de las comillas, por alguna razón a veces las comillas simples no le gustan, y al usarlas nos pones las mayúsculas en minúsculas y con eso basta para que las cosas dejen de funcionar.
    Repite el último paso, borra todo el código de tu gadget y ponlo de nuevo, pero antes de guardar cambia todas las comillas simples por comillas dobles, por ejemplo, que esto:
    <div class='panelContainer'>

    Quede así:
    <div class="panelContainer">

    Después de hacer eso ahora sí pon tus enlaces y tus imágenes, ya funcionando podrás personalizarlo como deseas.

    ResponderEliminar
  71. Muchas gracias por tu ayuda Potro, logre corregir el error y lo personalice reduciendolo solo a 3 imagenes como quería.
    Pero alli va otra inquietud: que puedo hacer para colocar mas de un gadget de imagenes?
    necesito colocar en la ventana 9 gadgets, pero al probar con 6, solo aparece correctamente la primera, el resto aparece distorcionado. Aqui te dejo nuevamente el blog de pruebas.
    http://miotroblogmiotroblog.blogspot.com/
    Que Dios te bendiga por toda la ayuda que nos brindas!

    ResponderEliminar
  72. Sólo puedes colocar un slider por página, pues aunque podría modificarse para poner más de uno la verdad es que se haría mucho muy lenta la carga del blog y eso no sería nada benéfico ni para tus visitantes, ni para el posicionamiento en Google.

    Bendiciones para ti también!

    ResponderEliminar
  73. Y podrías apoyarme modificando el código, es que no veo otra opción para hacer mi pagina.
    Quiero hacerla en base a esta web:
    http://www.abercrombie.com/webapp/wcs/stores/servlet/CategoryDisplay?catalogId=10901&storeId=11203&langId=-1&topCategoryId=12202&categoryId=87663&parentCategoryId=87658
    Si tu tienes alguna idea de como hacer eso en blogger, seria bueno me lo comentaras. Gracias nuevamente!!

    ResponderEliminar
  74. No hay que perder de vista que Blogger sigue siendo una plataforma para blogs, así que si bien podemos imitar algunas cosas de las páginas Webs nunca tendremos las mismas funciones.

    Para agregar otro slider pega debajo de:
    $("#main-photo-slider").codaSlider();

    Esto:
    $("#main-photo-slider2").codaSlider();

    Luego agrega de nuevo el tercer código, pero donde dice:
    <div class='csw' id='main-photo-slider'>

    Cámbialo por:
    <div class='csw' id='main-photo-slider2'>

    Con eso deberá funcionar con dos, el problema es que si navegas en el segundo slider entonces también se mueven las fotos del primero.
    Saludos.

    ResponderEliminar
  75. Saludos, Potro, tu aporte esta excelente, quisiera saber si existe alguna manera de que el Slider se quedará en una página y no se moviera entre todas las páginas?

    ResponderEliminar
  76. Saludos Delgado, no he entendido bien, ¿me puedes explicar un poco más lo que quieres?

    ResponderEliminar
  77. Saludos,

    Es decir, cuando coloco el Gadget, me sale en toda y cada una de las paginas que tiene el blog, no hay alguna manera de que se queda únicamente en la página principal?

    Y esta última duda salió de ayer, las imágenes no se cambian entre si queda fija en la primera...

    Realmente agradezco mucho tu ayuda.

    ResponderEliminar
  78. Gracias por los detalles Delgado. Sí es posible hacer que se muestre sólo en la portada, de hecho aquí hay una entrada que dice cómo ocultar elementos en distintas partes del blog, el que utilizarías sería el de ocultarlo en todas partes menos en la portada:
    http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

    Si las imágenes no están cambiado entonces debe haber un problema ya sea en la colocación de los códigos o de incompatibilidad con algún otro script. Necesitaría ver dónde lo has puesto para así darte una respuesta más precisa.

    Saludos.

    ResponderEliminar
  79. Potro, seguí las instrucciones al pie de la letra y las imágenes no cambian, te dejaré el enlace al blog para saber que podría ser, nuevamente gracias.

    http://tic-ipdd.blogspot.com

    ResponderEliminar
  80. portro disculpa, pero es que cuando agreago las URL de las imagenes no mes la muestra, sabes porq?

    ResponderEliminar
  81. Al igual que en el TriSlide no se porq no me muestra las imagenes, las agrego y todo pero nada tienes alguna idea?

    ResponderEliminar
  82. Hola de nuevo Delgado,

    No has puesto ninguna imagen en el slider, debes poner donde se indica la URL de la imagen.

    Saludos.

    ResponderEliminar
  83. Hola Héctor,

    Tal vez Blogger te está dando el mismo problema que nos da a varios. Mira el comentario #73, probablemente eso te sirva.

    Saludos.

    ResponderEliminar
  84. Potro, ya coloqué las imágenes e igualmente sigue sin moverse, subí los archivos a Dropbox (los que estaban en rar), pero ahora ya no se que hacer, saludos y disculpa tanta molestia.

    ResponderEliminar
  85. Hola Delgado,

    Lo que sucede (y no me había fijado) es que usas un menú que requiere Scriptaculous, un script que no es compatible con jQuery, el script que se usa para esta galería.
    Tienes que decidirte a usar uno de ellos dos, o bien, aplicar un hack que permita usar ambos al mismo tiempo:
    http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

    Saludos, y no es ninguna molestia ;)

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

    ResponderEliminar
  87. Hola potro, gracias por el aporte pero , tengo una duda tengo uno parecido a este pero este lo que haces es que al publicar un nuevo post se coloca automaticamente en el post, mi problema con este gadget es que quiero que tome la primera imagen.-..

    espero me ayudes gracias

    ResponderEliminar
  88. Hola Kevinsk8,

    Este slider no tiene la habilidad de mostrar el contenido de forma automatizada, se tiene que hacer manualmente para poner el contenido que se desea mostrar.

    Saludos.

    ResponderEliminar
  89. Hola Potro Por Q Mi Slider Se Queda Estancado En Una Sola Imagen Y No Muestra Mas Aunque La Flechita Que Indica Q Imagen Se Esta Viendo Si Avanza......ESPERO ME AYUDES .....GRACIAS POR TUS TUTOS SON BUENÍSIMOS, GRACIAS A TI HE HECHO MIS BLOGSS...!

    ResponderEliminar
  90. Holaaa Se ME OLVIDAVA MIRA ESTE ES MI BLOG http://www.websdetelenovelas.co.cc/

    ResponderEliminar
  91. Hola Mauricio,

    Puede ser porque tienes muchas versiones de jQuery en tu blog, elimínalas y quédate sólo con la más actual:
    http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

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

    ResponderEliminar
  93. Hola Alejandro,

    Hay un problema habitual en Blogger con las comillas de los códigos:
    http://ciudadblogger.com/2010/12/las-mayusculas-y-las-minusculas-en-las.html

    Para solucionarlo elimina el último código, ponlo de nuevo, pero esta vez cambia todas las comillas simples por comillas dobles.
    Eso hará que se vean las imágenes y funcione el slider.

    Saludos!

    ResponderEliminar
  94. hola potro necesito saber como hacer para que la galeria no avanze automaticamente..ayuda porfa y gracias de antemano

    ResponderEliminar
  95. Buenisimo potro!
    ya solucione el problema de que me aparezcan las imagenes ahora... siguen sin pasar una por otro, el slide cambia la flecha pero solo queda la primer imagen. ¿Que hago????

    Mi blog: www.gimnasiayesgrimadejujuy.com

    ResponderEliminar
  96. Hola L,

    Quita toda esta parte del script, pero eso hará que tampoco salgan los triángulos que señalan el video:


    var theInt = null;
    var $crosslink, $navthumb;
    var curclicked = 0;

    theInterval = function(cur){
    clearInterval(theInt);

    if( typeof cur != 'undefined' )
    curclicked = cur;

    $crosslink.removeClass("active-thumb");
    $navthumb.eq(curclicked).parent().addClass("active-thumb");
    $(".stripNav ul li a").eq(curclicked).trigger('click');
    theInt = setInterval(function() {
    $crosslink.removeClass("active-thumb");
    $navthumb.eq(curclicked).parent().addClass("active-thumb");
    $(".stripNav ul li a").eq(curclicked).trigger('click');
    curclicked++;
    if( 6 == curclicked )
    curclicked = 0;

    }, 3000);
    };

    ResponderEliminar
  97. gracias Potro =)
    es que estaba buscando una alternativa a este otro script http://flowplayer.org/tools/demos/scrollable/home.html ...(si pudieras hacer un post, seria Cheverisimo!) jaja pero por ahora
    muchas gracias lo voy a probar el Coda.

    ResponderEliminar
  98. Alejandro Baiud,

    Debes cambiar todas las comillas que encuentres, no sólo las de las imágenes, pues con los nombres y clases de los contenedores sucede el mismo problema.
    Ponlo de nuevo para que pegues otra vez el original con las letras mayúsculas, cambia todo, y luego pones las imágenes.

    Saludos.

    ResponderEliminar
  99. Que onda Potro, acabo de leer en uno de los comentarios que solo es posible una galeria por pagina y con pocas fotos para que no se alente el blog, como recientemente me acabo de enterar que la pagina web SLIDE.COM cerrara pues estoy preocupado porque yo tengo varios Slide en mi blog entonces cuando se llegue el fecha del cierre de ese sitio perdere todos mis Slide, de casualidad conoces algun sitio similar a SLIDE para crear galerias Online? se bien que ahi muchas pero son para -Webmaster- entonces tendria que ponerme a estudiar bastante pues de diseño no se absolutamente nada jajaja.-

    ResponderEliminar
  100. Hola Leonardh.,

    Hay una online que además permite usar tus fotos de Picasa, quizá pueda interesarte:
    http://ciudadblogger.com/2011/02/cooliris-galeria-de-imagenes-en-el-blog.html

    ResponderEliminar
  101. Potro me encanta! Pero no entiendo la parte de la URL del enlace? cual seria? las fotos las subo a google site tambien?

    ResponderEliminar
  102. Ya entendi como era...:) igual algo salio mal, porque las miniaturas se ven todas pero las imagenes no corren...lo hice en un blog de pruebas, lo podras chequear Potro? Mil gracias!!! (las fotos no las subi a google site, las subi a blogger...sera eso?
    http://blog-de-pruebas-de-bren.blogspot.com

    ResponderEliminar
  103. Hola Bren, no veo ningún slider ahí o.O

    ResponderEliminar
  104. Si...perdon Potro, me gano la ansiedad y probe otra cosa asi que lo saque...:P Deberias estar en un chat online permanentemente! jajaja! Estoy probando varios slide y no me sale bien ninguno :( Vi en los comentarios que puede ser un problema de las comillas?

    ResponderEliminar
  105. no funcionan los scripts ayuda sube denuevo

    ResponderEliminar
  106. Bren, debería, pero si estuviera en chat permanente mi familia se divorciaría de mí :P
    En algunos casos puede ser eso, mira esta entrada para que veas si es el mismo problema y sepas cómo resolverlo:
    http://ciudadblogger.com/2010/12/las-mayusculas-y-las-minusculas-en-las.html

    ResponderEliminar
  107. terra nova tv, todos los archivos están funcionando correctamente.

    ResponderEliminar
  108. Potro como lo ago para cambiar el tipo de fuente del texto que aparece en las imagenes?

    saludos

    ResponderEliminar
  109. Debajo de:
    color: #FFF; /* Color del texto de las descripciones */

    Agrega el tipo de fuente, por ejemplo:
    font-family:Arial;

    ResponderEliminar
  110. POTRO NO LOGRO HACER QUE SE MUEVAN LAS IMAGENES , SOLO QUE QUEDA EN LA PRIMERA , ESTOY TRATANDO DE AYUDAR A UN AMIGO CON SU BLOG Y ESTE SLIDER ES PERFECTO : / TE DEJO EL BLOG SALUDOS

    http://amsdigital.blogspot.com/

    ResponderEliminar
  111. No veo que tengas este slider ahí, sólo el Orbit y funciona muy bien.

    ResponderEliminar
  112. hey amigo intento colocarlo y pues coloco imagenes de photobuck y no me las aggara ayudeme.

    ResponderEliminar
  113. amigo este es mi proyect http://eurekarock75.blogspot.com/ y no me a cuadrado, las imagenes q coloco de photobuck, sale q estan eliminadas. pero no es haci... ayudeme.

    ResponderEliminar
  114. Pues ahí no lo vi así que ignoro cómo hayas puesto la URL de tu imagen, pero siempre que se trate de imágenes lo mejor es subirlas a Picasa que es el servicio donde se alojan las imágenes de nuestro blog:
    http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

    ResponderEliminar
  115. donde pide solamante el en lace, que enlace lleva?? no entiendo gracias!!

    ResponderEliminar
  116. Hye solamente me aparesen la primera imagen :s que es lo que pasa

    ResponderEliminar
  117. Mne todos estos slides tienen problemas ya los he probado todos asta lo de los videos y no funcionan tienen errores disculpa pero es verdad :s

    ResponderEliminar
  118. Donde dice URL del enlace va la dirección Web de lo que quieras enlazar, puede ser la URL de una entrada, la URL de otro blog, o de donde quieras.

    ResponderEliminar
  119. jangel, de que funcionan funcionan, tan es así que los ejemplos que pongo están funcionando, y los comentarios de los lectores en su mayoría han tenido éxito al colocarlo.
    Si no te funcionan debes considerar que quizá no lo estás poniendo bien, que has omitido algún código, o que has añadido ya tanto que hay conflictos entre los scripts.

    ResponderEliminar
  120. Hola!
    me gustaría tener en mi blog un slider como el de esta web http://www.trecebits.com/ en el que la imagen no sea lo importante sino que aparezca en pequeño y el texto al lado. No lo he visto en las entradas que has colgado, ¿sabes cómo hacer algo así?

    Gracias

    ResponderEliminar
  121. Hola Beatriz,
    Aún no tengo un slider con esas características, pero dame unos días para preparar una entrada para colocar un slider similar al que mencionas.

    Saludos!

    ResponderEliminar
  122. Potro necesito ayuda no se que es URL del archivo jquery-easing-1.3.pack.js Salu2 !!

    ResponderEliminar
  123. FergieParaguay, esos archivos que descargaste, unos vez que los has descomprimido, debes subirlos a un hosting, ahí es donde obtendrás la URL de esos archivos.
    Este es uno muy sencillo de usar:
    http://ciudadblogger.com/2010/04/como-usar-dropbox.html

    ResponderEliminar
  124. amigo pues nuevamente le escribo es q pues eh puesto el silder porq me gusta para mi web pero es de esto de lo q le hablo :/ hago todo perfecto pero nada :'( ayudameeeeeeeeeeeeeeeeee http://eurekarock75.blogspot.com/

    ResponderEliminar
  125. ayudaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    ResponderEliminar
  126. Hola Eureka Rock 75,

    Quita el último código y ponlo de nuevo, pero esta vez cambia las comillas simples por comillas dobles:
    http://ciudadblogger.com/2010/12/las-mayusculas-y-las-minusculas-en-las.html

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

    ResponderEliminar
  128. EN este link : http://ciudadblogger.com/2011/11/coda-slider-galeria-de-imagenes-con.html

    El codigo que tendria que poner antes de head con para que sea compatible seria este ? Es que se me desconfiguran las imagenes si pongo este codigo y los otros me quedan en la primera imagen y ya actualize el jqwery

    LINK DE COMO PONGO ANTES DE HEAD : https://sites.google.com/site/hilandolavidablog/crear/prueba.js

    Si es asi no me anda me salen las imagenes separadas. Los links los pongo ( los .js) pero ahora copie el codigo y le agrege lo de el HACK...

    Y si no estoy usando el hack me anda bien el slider pero no se mueven. Es decir andan mal siempre... Como seria el codigo que tengo que poner antes de head.

    ResponderEliminar
    Respuestas
    1. El código que va antes de </head> es todo el script que hace que funcione el slider.
      No sé a qué te refieras con que sea compatible, ¿usas Scriptaculous, o usas alguna versión antigua y/o repetida de jQuery?

      Si usas Scriptaculous entonces el parche se aplica después de:
      <script type='text/javascript'>
      //<![CDATA[

      Todos los $ que hay debajo son los que se tienen que cambiar.
      Si el problema es por las versiones de jQuery entonces mira esta entrada:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Si nada de eso lo soluciona dime en cuál blog lo has puesto, porque sin ver los códigos que tienes me es difícil poderte dar una respuesta.

      Eliminar
    2. http://hilandolavida.blogspot.com Este es el blog el slider esta abajo de todo. Puse lo de esta entrada : http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html y la de Scriptacolous Con Jquery y cambie el $ en los siguientes lugares :

      jQuerycrosslink.removeClass("active-thumb");
      jQuerynavthumb.eq(curclicked).parent().addClass("active-thumb");
      jQuery(".stripNav ul li a").eq(curclicked).trigger('click');
      theInt = setInterval(function() {
      jQuerycrosslink.removeClass("active-thumb");
      jQuerynavthumb.eq(curclicked).parent().addClass("active-thumb");
      jQuery(".stripNav ul li a").eq(curclicked).trigger('click');

      y en jQuery(function() {
      jQuery("#main-photo-slider").codaSlider();
      jQuerynavthumb = $(".nav-thumb");
      jQuerycrosslink = $(".cross-link");
      jQuerynavthumb

      Cambie a la nueva verción y no pasa nada.

      Eliminar
    3. Lo que quiero saver me falto remplazar en un lugar ? del codigo ?

      Eliminar
    4. Hola de nuevo Vero.
      Pero en ese blog no veo que uses Scriptaculous. A lo que me refiero es, que ese hack es sólo cuando se usa Scriptaculous y Prototype al mismo tiempo, pero ese no es tu caso, así que no hace falta aplicar el hack. Aun así, si revisas todo el script, verás que se te han escapado unos $

      Lo que parece que ha sido el problema inicial, no es nada de los scripts, sino un problema de Blogger que tiende a cambiar las mayúsculas por minúsculas y eso hace que dejen de funcionar muchas cosas.
      Elimina el último código, el que va en el HTML/Javascript, ponlo de nuevo copiando el código de esta entrada, no de tu antiguo código, y luego, cambia todas las comillas simples (todas) por comillas dobles.
      Eso deberá resolver el problema, pero antes, recuerda terminar el hack, o dejarlo como estaba antes.

      Saludos.

      Eliminar
    5. Este comentario ha sido eliminado por el autor.

      Eliminar
    6. Al fin andubo ! Cree un blog de pruebas para probar http://hilandolavidaprueba2.blogspot.com Pero tiene dos errores, Tiene como en BLANCO la parte de imagenes en miniatura y una imagen en miniatura de la primera imagen del slider arribba a la izquierda , Me di cuenta que las imagenes en miniatura estaban en blanco por el alto/ancho del contenedor de las imagenes y si pongo el alto y ancho del tamaño de las imagenes se va mas para arriba, Potro saves que altura y ancho se pondria para que queden bien ?

      Width de las imagenes : 400

      Heigth de las imagenes : 339

      Gracias ... Creo que esta sera la ultima pregunta para corregir mi slider !

      Eliminar
    7. Sigue habiendo un problema con las mayúsculas. Había que poner todo de nuevo del original, o sea, copiarlo de nuevo de esta entrada justamente para que no se fuera pegado algún error.
      Si te fijas, esta línea que tienes:
      <div class="panel" title="panel 1">

      Esa tiene el panel 1 en minúscula todo, cuando debería ser así:
      <div class="panel" title="Panel 1">

      Como esa hay varias. Parece insignificante, pero esos detalles son los que pueden hacer que algo funcione bien o no funcione :/

      Eliminar
  129. Este comentario ha sido eliminado por el autor.

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

    ResponderEliminar
  131. ahmmm El Potro una pregunta no se si hay algun Slideshows que se actualice solo las entradas... porque estar haciendo cada rato manualmente cansa un poco... no se si podria hacerlo...

    ResponderEliminar
    Respuestas
    1. No hay muchos, pero ya después publicaré alguno que sea automático.

      Eliminar
  132. Gracias El Potro Ojala lo publiques pronto :3

    ResponderEliminar
  133. El Potro porque me sale de esta manera ?= miralo http://pruevasssssss.blogspot.com/ en que estoy fallando ?=

    ResponderEliminar
    Respuestas
    1. Hola David, elimina el tercer código, luego copialo de nuevo de esta entrada, pero esta vez, cambia todas las comillas simples por dobles, por ejemplo, donde dice:
      div class='panel' title='Panel 1'

      Cambiaría a:
      div class="panel" title="Panel 1"

      Debes cambiar todas las comillas de ese último código.
      Saludos.

      Eliminar
  134. El Potro Sigo teniendo el mismo problema http://pruevasssssss.blogspot.com/ cambie las comillas simples por dobles del tercer codigo en que estoy fallando ...

    ResponderEliminar
    Respuestas
    1. No está completo ese código, si lo revisas bien verás que le hacen falta partes.

      Eliminar
  135. ahmm El Potro vi que al fina l habia algo que me habia olvidado poner pero al ponerlo se borrava O_O ponia vista previa i otra ves al habrir el html ya no estava el div></div Porque ?=

    ResponderEliminar
  136. El Codigo queria ponerlo completo pero no me dejo la pajina... a que se deve ese problema ?=

    ResponderEliminar
    Respuestas
    1. Copia de nuevo el código, es decir, quita el que tienes (el del gadget), luego copia el código de esta entrada y pégalo, antes de guardar cambia las comillas simples por las dobles, así deberá funcionar.

      Eliminar
  137. Copie otra ves cambie por dobles comillas i ahora sale esto http://pruevasssssss.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola de nuevo David. No es poner dos comillas simples, sino poner comillas dobles. Es decir, no se trata poner dos veces este caracter:
      '
      Sino poner este:
      "

      Uno es una comilla simple, y el otro es el normal, el que encontramos por todas partes.

      Eliminar
  138. Hola potro, antes de nada felicitarte por el tuto y por los otros que tienes que seguro que iré viendo, pues tienes cosas interesantes.

    Con respecto a este tengo dos problemillas:

    Uno es con la primera imagen de las miniaturas pues está ligeramente desplazada hacia arriba.

    El otro es con la banda transparente de la leyenda que come mucha imagen, conseguí reducirla en css, bajando el margin-top de -60px a -45px pero no me convence el efecto. No se si reduciendo la transparencia pero ¿en donde?

    Te dejo la url por si le hechas un vistazo: http://amigurumis-ganchillo-y-mas.blogspot.com.es/2012/03/lorem-ipsum-dolor-sit-amet-consectetur.html (Está en pruebas esta entrada)

    Gracias de antemano.

    ResponderEliminar
  139. Hola Marian,

    El gadget de por sí tiene un poco subida la primera miniatura, es por la estructura que tiene. En tu blog se nota más por los estilos de tu plantilla, pero si tus imágenes en general no tuvieran padding entonces no se apreciaría tanto.

    La banda es una imagen semitransparente, por lo que para modificar su transparencia tendrías que editarla con un programa que te permita trabajar con PNG.

    Saludos y gracias por tu comentario :)

    ResponderEliminar
    Respuestas
    1. Ok gracias por tu rápida respuesta. A ver que hago

      Eliminar
  140. Buenas Potro.

    Me gusta mucho este slider, pero ¿será posible ponerle un link a las imágenes para que dirijan a una entrada?

    Se que recientemente hiciste un post de un slider con ñas últimas entradas pero me gustaría poder escoger las entradas que quiero que aparezcan.

    Muchas Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Victor, de hecho donde dice en color rojo URL del enlace, va el enlace que quieras, ya sea a una entrada, una etiqueta, etc.
      Saludos.

      Eliminar
    2. Muchas Gracias Potro.

      Perdón por ser tan distraido, seguro aplicaré esto en mi blog.

      Gracias de nuevo.

      Saludos!

      Eliminar
  141. Saludos. Soy un blogger aficionado. He creado varios blogs aplicando scripts y otras cosas pero aun me falta mucho... me gustaría saber como implementar de manera correcta en mi blog este slideshow. Esta es mi pagina http://reftroniconline.blogspot.com Se me descuadran las imagenes y no tengo idea de porque... Espero me puedas ayudar....

    ResponderEliminar
  142. Por cierto apenas estoy construyendolo. estoy buscando ideas.... :D

    ResponderEliminar
    Respuestas
    1. Hola Emmanuel, no sé en qué navegador lo estés viendo pero yo aprecio el slider bastante bien (Chrome)

      Eliminar
  143. Si... me puse a hacer algunas correcciones, y era porque lo tenia los jquery en mediafire, los subi a dropbox y se corrigio el problema.... ahora solo debo ajustar un poco el tamaño... gracias, esta excelente tu pagina... me has dado nuevas grandes ideas... antes era muy dedicado a las enseñanzas de Oscar, imagino sabes quien es, Oscargp, pero despues de ver tu pagina me he quedado asombrado la cantidad de estrategias. Que Dios te bendiga enormemente....

    ResponderEliminar
  144. Saludos. Potro como hago para que el contenedor interior quede pegado de la parte superior. Es decir que este centrado, pero dezplazado todo lo que esta adentro del contendor Page-Wrap quede pegado del borde superior....? agradezco tu ayuda.....

    ResponderEliminar
    Respuestas
    1. No lo he hecho Emmanuel, quizá baste con poner la parte del código de las miniaturas (la que se indica en color azul) arriba de donde van los códigos de los videos, sería cosa que pruebes con alguna de esas ubicaciones y mires el resultado.

      Eliminar
  145. Lo resolvi Potro, comparto la manera....

    .slider-wrap {
    width: 379px;
    position: absolute;
    top: 0px; left: 60px;
    background:#ffffff;
    }


    En los estilos lo unico que hice fue modificar la distancia del top a 0px y lo movi un poco mas a la izquierda a 60px.

    Lo necesitaba asi ya que quite la imagen externa del contenedor y lo puse en blanco.

    Quedo asi:
    http://reftroniconline.blogspot.com/

    Gracias. Estas entre mis favoritos... Saludos.

    ResponderEliminar
    Respuestas
    1. Entonces entendí mal, creí que querías que las miniaturas estuvieran arriba o.O

      Eliminar
  146. Hola Potro..tu Blog es espectacular.
    Hoy voy a probar algo que siempre he querido colocar en los Blgos que tengo,despues te digo como me fue.
    Me gusta leer primero,las personas deberian entender eso.

    Te tengo en mis marcadores y en mi Blog..Eres demasiado Bueno
    :-) besotes desde venezuela..

    ResponderEliminar
  147. Hola Potro..tu Blog es espectacular.
    Hoy voy a probar algo que siempre he querido colocar en los Blgos que tengo,despues te digo como me fue.
    Me gusta leer primero,las personas deberian entender eso.

    Te tengo en mis marcadores y en mi Blog..Eres demasiado Bueno
    :-) besotes desde venezuela..

    ResponderEliminar
    Respuestas
    1. A mí también me gusta eso JFBluePlanet. Gracias por tu comentario y esos besotes, otros para ti :)

      Eliminar
  148. Hola Potro,

    Muchas gracias por este gran aporte, eres el mejor ;). Lo único que el Slider me está dando problemas para redimensionarlo y que quede bien de ancho y alto. Cada vez que intento modificar cualquier ancho o alto del código HTML se descoloca todo el Slider.

    ¿Alguna forma para solucionarlo y poder redimensionar? | Mi blog: http://www.guildwars2-hispano.com/

    Gracias!

    ResponderEliminar
    Respuestas
    1. Tienes que jugar con las medidas hasta que quede al tamaño que desees. Es un tanto complicado, es por eso que he recomendado dejarlo tal como está, a menos claro que quieran trabajar un rato ;)

      Eliminar
  149. Hola Potro aplique el slider en mi blog, pero quedo todo alineado en forma vertical hacia abajo y fijo, no se que pueda pasar, ya pegue todo de nuvo, y no se soluciono, como lo puedo solucionar?

    ResponderEliminar
    Respuestas
    1. ¿En cuál blog lo has puesto Cecilia? Porque en el blog de tu perfil no lo veo puesto.

      Eliminar
  150. ayuda potro quiero este alider
    echame una mano
    http://www.smoothdivscroll.com/#toc

    ResponderEliminar
    Respuestas
    1. Hola dhayzon, por ahora no puedo prometerte publicarlo ya que tengo varios posts pendientes y poco tiempo para publicar.

      Eliminar
    2. gracias por la respuesta XD ya lo consegui me costo mucho pero ya esta en funcionamiento aun que no se nada de codigos css y jquery pero lo logre jeje me guie con varios de tus tutos

      Eliminar
  151. Hola Potro!
    Hice este slider para mi web y funcionaba perfectamente, pero no se porque hace un par de dias ha dejado de funcionar. He estado revisando mi plantilla pero no he relizado cambios y todo sigue estando igual que antes cuando si funcionaba...

    A parte he observado que el slider de ejemplo que tienes puesto tu en esta entrada tampoco funciona... se sigue moviendo la flechita blanca, pero el contenido no se desplaza, y aunque hagas click, no se abre ningun link ni hace nada de nada...
    Por que crees que puede ser?
    Muchas gracias y saludos!

    ResponderEliminar
    Respuestas
    1. Pues sí que es extraño porque tampoco he realizado cambios en donde tengo el slider, podría ser que alguna actualización del navegador no es compatible con los scripts. Tendré que investigar.

      Eliminar
  152. Potro auxilio... eh puesto este slider en mi blog y nada que funciona :( que sera... no me dejes morir, es quiero poner dichos slider, es decir, este y el de video. amigo espero su respuesta con urgencia. saludos...

    PD: el slider lo dejare puesto para que le heches un ojo. http://thaisarion.blogspot.com/

    ResponderEliminar
  153. potrooo... ayuda con este slider man, y el de video no fruncan.

    ResponderEliminar
    Respuestas
    1. Ya no funciona Thais Arion, no sé qué pasó que dejó de funcionar de un momento a otro. Ahora mismo pondré un aviso en la entrada.
      Saludos.

      Eliminar
    2. hola potro me gustan mucho los trucos que das aqui, ya hace tiempo vi esa galeria y pense en implementarla . lastima que ahora no funciona
      Tambien me toco ver esta (que supongo es la misma) y sigue en funcionamiento por si la quieres subir o comparar con la que aqui muestras

      http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

      (el que te muestro a mi si mefunciona correctamente en mozila y por lo que lei es una galeria gratuita )

      saludos

      Eliminar
    3. Hola otsaly, de hecho es el mismo script base y sí, ahí sí funciona, de hecho cuando esta dejó de funcionar recurrí a ese enlace que has dejado. Lo que es extraño es que sólo en Blogger no funciona, eso es lo que me tiene intrigado o.O

      Eliminar
  154. Hola Potro que tal? Nuevamente te molesto con otra interrogante. Fijate, quiero poner en una página estática las imágenes en miniatura de los juegos de mi blog para que el usuario haga clic en la miniatura para ir a la entrada donde esta el juego. Tambien habia pensado que en lugar que en la pagina principal aparezcan las últimas entradas, aparezca esta página que te digo. ¿Es factible hacerlo? ¿me ayudarías? Gracias,
    Amnerisls

    ResponderEliminar
    Respuestas
    1. Hola Amneris, no conozco una forma automática, pero al menos manualmente podrías usa una tabla, ahí poner las miniaturas de tus imágenes y que enlacen a la entrada correspondiente:
      http://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html

      Saludos.

      Eliminar
  155. Potro, me gustaría si me brindas un código para poner un galería de imágenes como la que hay en el sitio web de apple, o como la que hay en la tienda de chrome cuando te metes en un producto. (La que tiene los puntos abajo o arriba y asi las cambias) No se si me explico. Pero es algo así.

    ResponderEliminar
    Respuestas
    1. Hola Román Lier, por el momento las únicas galerías que he publicado están en la categoría "Slideshows":
      http://ciudadblogger.com/search/label/Slideshows

      Eliminar
  156. Hola Potro.

    He visto en esta web: http://www.brainzum.com/ un slider muy elegante, soy incapaz de encontrarlo por internet. ¿Seria posible añadirlo a blogger?

    ResponderEliminar
    Respuestas
    1. Hola jmqnick, ese no es un slider, no he visto algo parecido para Blogger, y ese al parecer está hecho en WordPress.

      Eliminar
    2. Encontrada una plantilla que lo implementa: http://demo.btemplates4u.com/2012/09/metro-simple-blogger-template.html

      Saludos.

      Eliminar
    3. Gracias, lo guardo en los marcadores y lo reviso en estos días ;)

      Eliminar
  157. Me explique mal, cierto no es un slider. Es bastante aparente, esperaremos a que alguien implemente algo similar en blogger.

    Gracias por tu tiempo.

    ResponderEliminar
  158. Hola Potro tanto tiempo, mi slider no pasa de la primera imagen , porque es ? Desde ya muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Vero, ¿has añadido algún otro gadget? ¿en cuál blog tienes el problema?

      Eliminar
  159. HOLA POTRO, bueno mira nesecito de tu ayuda. Yo quiero poner un Slideshow que se muestre solamente en inicio, osea que cuando entren a ver una entrada desaparesca el Slideshow. Si saves o tienes un post como expicar eso o si no porfavor este es mi correo no importa que se aga publico con permiso tuyo. pelaoxiko2@gmail.com

    ResponderEliminar
    Respuestas
    1. Mira esta entrada Pedro:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
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
¿Te gusta Ciudad Blogger?