Galería de Videos con Coda Slider

9 de noviembre de 2011 210 comentarios ,
AVISO
Esta galería de videos ya no funciona, se recomienda buscar otra opción.

La otra vez veíamos cómo poner una galería de imágenes con Coda Slider, y dado a las posibilidades que tiene el script pensé que podríamos hacer una galería de videos con este mismo slider sólo haciendo unas pequeñas modificaciones.

El resultado es una galería de videos con jQuery que permite pasar de un video a otro de forma deslizante haciendo click en las miniaturas que se encuentran debajo. A esta galería podemos añadirle hasta 7 videos con las medidas actuales que posee.


El procedimiento es similar al otro slider, 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[

$(function() {
$("#main-video-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í coloca donde se indica las URLs de los archivos que subiste previamente.
Luego antes de ]]></b:skin> coloca los estilos de la galería:
/* Coda Slider (Video)
----------------------------------------------- */
#page-wrap {
width: 490px; /* Ancho del contenedor general */
min-height: 354px; /* Alto del contenedor general */
margin: 0 auto;
position: relative;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGHP5KFoVligD70JwnyaKSClCv2KyCTgeTH7h7_hzAhy2ZaulgT83N6cgBzDAZYoxfgjnSRBAHywedVBAjXw7Ig31TBQgkSTe8foy7UFaNKn2bRLKV06igH7JQKGjySe5ADhwnTCKWohk/s490/vid-bg.png) top center no-repeat;
}
.slider-wrap {
width: 450px;
position: absolute;
top: 20px;
left: 20px;
}
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer {
position: relative;
overflow: hidden;
width: 450px; /* Ancho del contenedor de los videos */
height: 274px; /* Alto del contenedor de los videos */
margin-bottom:7px;
}
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 450px; }
.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: 16.6%; float: left; }
#movers-row div a.cross-link { float: right; }
.cross-link { display: block; width: 58px; margin-top: -10px; position: relative; padding-top: 3px; z-index: 100; }
El tercer paso es entrar en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript (para la interfaz antigua), o Diseño | Añadir gadget | HTML/Javascript (para la interfaz nueva). Ahí pega este código:
<div id="page-wrap">
<div class="slider-wrap">
<div class="csw" id="main-video-slider">
<div class="panelContainer">

<div class="panel" title="Panel 1">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_UNO" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 2">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_DOS" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 3">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_TRES" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 4">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CUATRO" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 5">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CINCO" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 6">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SEIS" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 7">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SIETE" frameborder="0" allowfullscreen></iframe>

</div></div>

</div></div>
<!-- Estas son las MINIATURAS de los videos -->

<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_UNO/1.jpg" width='58px'/></a>

<div id='movers-row'>

<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_DOS/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_TRES/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CUATRO/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CINCO/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SEIS/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#7'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SIETE/1.jpg" width='58px'/></a></div>

</div>
</div></div>
Coloca donde se indica la ID del video de YouTube. La ID del video es toda esa serie de caracteres que aparecen al final de la URL del video, por ejemplo:

URL video

Como puedes ver, la ID del video debes colocarla dos veces, una es para el video, y otra para la imagen en miniatura del video.

También puedes poner videos de otros servicios, sólo debes eliminar un código como este:
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE" frameborder="0" allowfullscreen></iframe>

Y en su lugar deberás poner el código de tu video, que deberá medir 450px de ancho y 274px de alto. También deberás cambiar la URL de la imagen de la miniatura:
<img class='nav-thumb' height='40px' src="URL de la imagen" width='58px'/>

Es una galería de videos sencilla pero que puede verse muy bien arriba de las entradas del blog, y si la usamos sólo para videos de YouTube entonces será menos complicado.


210 comentarios en:

" Galería de Videos con Coda Slider "

  1. Eres un genio hace tiempo buscaba algo asi?

    Una pregunta como puedo cambiar la plantilla de mi blog cargando una o desde el diseñador de blogger no veo la opcion de cargar.

    Gracias

    ResponderEliminar
    Respuestas
    1. yo se kmo mira mi blog tengo 11 años y si lo puedo hacer

      Eliminar
    2. yo se kmo es facil mira mi blog yo lo hice tengo 11 años y si lo puedo hacer

      Eliminar
  2. Hola Potro... una vez estuve buscando este truco pero al ver que no lo encontré pues desistí de mi búsqueda.
    Ahora que lo publicas de seguro que voy a implementarlo.
    Gracias y saludos Potro !!!

    ResponderEliminar
  3. Excelente entrada Potro.Cuando la necesite la implementare. Exitos.

    ResponderEliminar
  4. Muy buena la entrada justo tengo un blogg de vídeos veré como me queda cuando tenga algo de tiempo
    Saludos Potro, ya te escribiré luego para que me ayudes con un efecto que quiero poner

    ResponderEliminar
  5. excelente.
    una pregunta. Solo vale para los videos de youtube?
    ¿se puede aplicar a los videos que subimos a blogger?

    ResponderEliminar
  6. Gracias Tilu Osorio.

    En la nueva interfaz de Blogger entra en 'Plantilla'. Del lado superior derecho verás un botón que dice 'Crear copia de seguridad/Restablecer'. Da click ahí y podrás subir la plantilla que quieres.

    Saludos.

    ResponderEliminar
  7. Hola Robinson Char,

    Siento haberte hecho esperar con esta entrada, pero dicen que es mejor tarde que nunca :P
    Ojalá sea de tu agrado la video-galería y que te quede espectacular!

    Saludos.

    ResponderEliminar
  8. Muchas gracias no habia querido hacer click hay por que decia Restablecer.

    Gracias

    ResponderEliminar
  9. Jean Escalante, ahí estará para cuando la necesites ;) saludos.

    Jhonnysan, si tienes un blog de videos entonces te vendrá com anillo al dedo. Nos cuentas cómo te fue ;)

    ResponderEliminar
  10. Potro esta pregunta es la que te queria hacer desde hace meses. Mi pregunta es si existe una plantilla como la xvideos.com que solo publican el video y se mira una pequeña que al darle clic muestra el video completo. Gracias potro eres el No. 1

    ResponderEliminar
  11. gym, puedes usarlo para videos de cualquier servicio como YouTube, Vimeo, Metacafé, etc. Con los videos subidos directamente desde Blogger no lo he probado, pero sería cuestión de que pongas el código de uno y ver los resultados.

    ResponderEliminar
  12. Chiknaui.Mikistli Joel Molina Reyes, saludos!

    Gilberto Hernandez, muchas gracias, qué bueno que te ha gustado!

    ResponderEliminar
  13. Que buen aporte, le buscare lugar en mi nuevo blog, me ahorrara mucho espacio.

    Potro tengo una duda, es posible esconder el formulario de comentarios en ciertas entradas por ejemplo esconderlo segun la etiqueta. Que no sea con paginas estaticas, ya que quiero que las entradas que estan resumidas en la pagina principal sean las que no tengan el formulario de comentarios, pero las que estan escondidas si tengan el formulario.

    Gracias por el aporte y por sus respuestas.

    ResponderEliminar
  14. videosxxx, pues no conozco todas las plantillas que existen porque son miles y miles, pero en Btemplates hay una que es para videos, tal vez esa te sirva:
    http://btemplates.com/2011/blogger-template-simplevideoblog/demo/

    ResponderEliminar
  15. Hola zzz,

    Se pueden esconder los comentarios de forma individual, sólo tienes que editar la entrada (o página independiente) y dentro del Editor de entradas verás un link que dice "Opciones de entrada", ahí puedes deshabilitar los comentarios para esa entrada. Si usas la nueva interfaz entonces verás esas opciones del lado derecho del Editor de entradas.

    Saludos!

    ResponderEliminar
  16. Potro: Una Pregunta>>
    Como se puede hacer como tipo carrusel de los post que hay en un blog como la de aqui...fijate que este muestra como 6 post y luego pasan otros 6, y asi... porfass potro si sabes algo ...gracias!!!

    http://btemplates.com/2011/blogger-template-blogger-store/demo/

    ResponderEliminar
  17. Excelente mas facil de lo que crei, Muchas gracias Potro.

    ResponderEliminar
  18. Una consulta Potro (demás esta decir que este truco esta genial), se pueden colocar más de 7 videos? Es decir, que los thumbs se alinean en una segunda o tercera fila por debajo del reproductor? Supongo que solo hará falta aumentar el heigth no?

    Gracias!

    ResponderEliminar
  19. Potro disculpa que te pregunte algo que creo que solo tu sabes, como sabes publico videos para mayores de edad hay unos videos que estan alojados userporn, y cuando posteo uno de esos al dar clic en play abre otra ventana, quisiera saber si eso no es spam. por que no quiero que me eliminen mi blog.

    para que mires de dejo mi web : http://wwwpavasfamosas.blogspot.com/

    ResponderEliminar
  20. Muy buena Potro no se cual agregar a mi blog el de imagenes o este jeje.
    Un abrazo!

    ResponderEliminar
  21. Hola, cómo hago para que este slider no se sobreponga en mi blog, y como hago para agregar este slider en una entrada y no en un gadget, porque cuando lo agrego en una entrada se distorciona..

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

    ResponderEliminar
  23. Microboy90, aquí hay uno parecido:
    http://ciudadblogger.com/2011/10/carrusel-de-imagenes-con-scriptaculous.html

    ResponderEliminar
  24. Thank you for comment Beben Koben :)

    ResponderEliminar
  25. Exel, podría ser, yo sólo lo he intentado haciendo más ancho el gadget, estando más ancho puedes agregar más miniaturas pero hay que modificar la separación entre ellas. Cambiando el height podría resultar pero honestamente nunca se me ocurrió probarlo así.

    ResponderEliminar
  26. videosxxx, pues sí, de hecho está prohibido cualquier tipo de gadget que abra publicidad sin que el usuario la haya solicitado, esto es penalizado tanto en sitios para adultos como en sitios para todo público.

    ResponderEliminar
  27. Soul, si los videos se sobreponen quizá tengas que aplicar alguna transparencia:
    http://ciudadblogger.com/2011/03/cuando-los-videos-se-sobreponen.html

    Los gadgets casi siempre se ven distintos en las entradas porque los estilos de las entradas son distintos a los de la sidebar y demás. Y como cada plantilla es diferente también cada caso es distinto.

    ResponderEliminar
  28. cuando aplico la tranparencia de &wmode=transparent no pasa nada, sigue igual...lo he hecho en cada link de youtbe...especificame lo q' debo hacer, porfavor! ayudaaaa!!!!!!!!!!!!!

    ResponderEliminar
  29. Hola..! una cosulta,¿que hosting gratuito recomiendan usar con blogger?

    ResponderEliminar
  30. Soul, necesitaría ver en cuál blog lo has puesto.

    Tutoriales Gaston El Internauta, Google Sites o Dropbox están bien.

    ResponderEliminar
  31. Esta impecable ademas podes dejar cargando uno mientras ves el resto +10.
    A proposito Potro queria saber si esto es posible: en este blog pudieron portar un generador de links de este sitio por lo que veo en php.
    Mi pregunta es si se puedo poner esto en mi blog, lo mas seguro como un archivo php dentro de una pagina estatica de blogger y subido x ejemplo a dropbox.
    Desde ya muchas gracias Potro que estes bien.

    ResponderEliminar
  32. como puedo poner varios playlist como estos en una entrada o pagina de mi blog.

    ResponderEliminar
  33. Martín Rocha, ninguno de los dos sitios están hechos en Blogger, ellos pueden usar PHP sin problema.
    En Blogger supongo que podrías usarlo si subes tu archivo PHP a un hosting (en Dropbox no te servirá), pero ignoro cómo funcione pues sobre ese lenguaje de programación sé poco por no decir nada.
    Saludos.

    ResponderEliminar
  34. InterTech Designs, es sólo uno por página, cuando se ponen más de uno no funciona correctamente.

    ResponderEliminar
  35. te mande un correo potro soy Suamy Eden, revisa tu inbox

    ResponderEliminar
  36. con respecto al complemento para la transparencia "&wmode=transparent" en qué parte del código se debe agregar porque también tengo el mismo problema.???'

    ResponderEliminar
  37. hola potro:

    eres de gran ayuda! para la comunidad bloggera xD hoy escugriñando en tu blog
    medi cuenta aqui en esta pagina http://ciudadblogger.com/p/ventas.html que aldar clic en contratar ahora se abria algo como un popup y me parecio buenisimo me gustaria saber como puedo agregar algo asi similar a my blog. ?

    gracias de ante mano :)

    ResponderEliminar
  38. Hola Potro necesito ayuda con otro tema estaba viendo este post tuyo http://ciudadblogger.com/2011/09/personalizar-la-cabecera-en-las-vistas.html

    y lo intente pero mi imagen no queda centrada como hago para que quede enmedio??

    ResponderEliminar
  39. Hola Sonoradata,

    La misma solución se explica en esa entrada, ahí dice exactamente dónde debe ponerse:
    http://ciudadblogger.com/2011/03/cuando-los-videos-se-sobreponen.html

    Si continúas con el problema deja en esa entrada la dirección de tu blog donde has puesto el código de la transparencia al video, para que allá, en esa entrada, podamos darle el seguimiento adecuado.

    Saludos.

    ResponderEliminar
  40. Hola Carlos Martinez,

    Eso lo hice con Shadowbox; está atractivo el efecto ¿no? :)

    Buen fin de semana.

    ResponderEliminar
  41. Hola Natalia Ore,

    Deja la pregunta en esa entrada para no desviarnos del tema de este post ;)
    Ahí en un comentario explica lo que sucede y agrega la dirección de tu blog para que veamos cómo puede solucionarse.

    Saludos.

    ResponderEliminar
  42. potro tengo una duda xD hay alguna forma de hacer que el tamaño de la fecha de las noticias de mi blog sea mas pequeña? es que es muy grande y resalta mas de lo que me gustaria, y en el diseñador de plantillas solo me permite cambiar el color. gracias.

    ResponderEliminar
  43. como hago para incrustarlo en una entrada como lo insertaste aqui en el ejemplo?... vi en el codigo de fuente que usaste iframe pero en el otro blog donde esta insertado como conseguiste una plantilla donde no hubiera nada? y en el otro blog que insertaste me supongo que es un gadget que usaste para que solo se viera en entradas??.. agradeceria mucho tu ayuda :D

    ResponderEliminar
  44. Hola CampamentoWeb,

    Sí puede modificarse el tamaño y los estilos de la fecha; sólo agrega debajo de:
    .date-header span {

    Esto:
    font-size:12px;

    ResponderEliminar
  45. Hola Edgar,

    Mira esta entrada de Vagabundia, ahí verás cómo dejar una plantilla en cero:
    http://vagabundia.blogspot.com/2010/08/blogger-ultra-super-minimizado-1-parte.html

    A esa plantilla en blanco le pones el slider, y la URL de ese blog es la que pondrás en el iframe.

    ResponderEliminar
  46. He llegado a tu blog buscando un par de soluciones para la remodelación absoluta del mio, y al final, venga pasar de un post a otro, me ha servido para mil cambios -y unos cuantos que he probado por curiosidad pero que no he llegado a dejar jeje-
    Muchísimas gracias por las entradas!!

    ResponderEliminar
  47. Hola de nuevo Potro:
    Te pido que veas mi alojamiento en mi blog http://franciscoadame.blogspot.com no esta centrado y no obedecen las miniaturas a los imagen en vídeos.
    Un Saludo

    ResponderEliminar
  48. Hola Potro, aunque mi duda no tiene nada que ver con esta entrada me gustaría saber cómo podría crear el css de la plantilla de este blog: http://planetaurbe.tumblr.com/
    Me refiero a ese efecto de folios descolocados detrás de la página central del blog. Me encantaría poder incorporarlo a mi diseño. Muchas gracias.

    ResponderEliminar
  49. Hola El Potro! Despues de toda la enorome ayuda que me proporcionastes... me doy cuenta que no hay ninguna plantilla magazine que se salve del Internet Explorer... He probado en 3 PC's y las fotos se quedan aplastadas y los textos desformados.. eso tiene algun tipo de solucion? O sera mejor que me olvide de plantillas magazine ?

    Te dejo mi Blog: http://ganardinerotrabajandoadistancia.blogspot.com/

    Ojala... ojala se pueda hacer algo,

    Muchas Gracias!

    ResponderEliminar
  50. Hola, mi comentario no tiene nada que ver con este post.
    Quieriendo hacer lo que publicaste hace ya, mucho tiempo (efecto de opacidad con desvanecimiento a tus imágenes)
    No me sale, no me modifica nada.
    Me gustaria que despues me digas como hacerlo bien.
    Te dejo mi blog.
    www.lloraresplacer.blogspot.com
    Besos :) & esta pagina es lo maximo.

    ResponderEliminar
  51. Excelente, práctico y funcional! Gracias por el truco.
    Tengo un blog de videos, así que esto sería ideal en mi caso. Solo quería consultar algo antes de intentar ponerlo en mi blog.
    Es que veo que aquí tus videos duran todos menos de 2 minutos; claro está, porque es solo un muestrario.
    Pero en caso de que se trate de videos de más duración, ¿funcionaría entonces lento este slider, o eso no tiene nada que ver con el funcionamiento mismo del script?
    Es que en mi caso algunos videos tendrían como 15 o 20 minutos de duración; y otros, menos tiempo.
    Ah, todos son insertados de Youtube.
    Gracias de antemano por la información.
    Saludos!

    ResponderEliminar
  52. Hola Laura,

    ¡Bienvenida a Ciudad Blogger!
    Siempre es grato saber que lo que hay en este sitio puede ser útil para alguien. Qué bueno que te estés atreviendo a hacer cambios en tu blog y que estés encontrando las respuestas que esperabas.
    Cualquier duda que tengas por aquí estaremos ;)

    Buen inicio de semana.

    ResponderEliminar
  53. Hola FRANCISCO ADAME RODRIGUEZ,

    La galería de videos la veo centrada respecto al ancho del blog.
    Las miniaturas de los videos sí corresponden al video asignado, pero sucede esto, te explico:
    YouTube ofrece siempre 3 miniaturas para cada video. En esta galería para no complicarnos hemos seleccionado siempre la primer miniatura, pero ésta no siempre se ve como la del video grande, así que pareciera que no es del video que hemos insertado.
    No obstante nosotros podemos seleccionar la miniatura que queramos, eso se hace cambiando el número que está al final de cada URL de la imagen, por ejemplo, en la miniatura del primer video tienes esta URL:

    src="http://img.youtube.com/vi/5qt9D0Wqvnc/1.jpg"

    Si te fijas verás que al final hay un número 1, ese número indica que mostrará la primer miniatura, si lo cambias a 2 entonces mostrará la segunda y con el 3 mostrará la tercera.

    Puedes cambiarlo cuando lo desees y ese proceso tendrías que hacerlo para cada miniatura. Siguiendo el primer ejemplo la URL de la imagen quedaría así:

    src="http://img.youtube.com/vi/5qt9D0Wqvnc/2.jpg"

    ResponderEliminar
  54. Hola Fran Rodríguez,

    En las plantillas de Diseñador lo veo complicado porque sus contenedores ya tienen posiciones que son casi casi intocables. Es distinto en otro tipo de plantillas por ejemplo en la Mínima donde podemos jugar con las posiciones libremente, pero con las otras plantillas todo es diferente.

    ResponderEliminar
  55. Hola NE,

    No veo los textos deformados ni las imágenes aplastadas, pero lo que sí veo es que los títulos se muestran cuando se supone no deberían mostrarse.
    Hay muchas plantillas magazine que sí son compatibles con IE, pero hay que probarla antes de decidirse por una pues muchas en particular son un tanto antiguas y ya ni siquiera tienen soporte para ese navegador.

    ResponderEliminar
  56. Hola Mechhita,

    He publicado como 2 o 3 métodos para el desvanecimiento de las imágenes, no sé a cuál te refieras.
    Deja el comentario en esa entrada para no desviarnos del tema de este post, y para saber cuál fue el método que aplicaste.

    Buen inicio de semana :)

    ResponderEliminar
  57. Hola Vicky,

    El script del slider no debe verse afectado con el tiempo de duración de los videos, en todo caso sólo afectaría la rapidez con la que carga el video, pero no del slider como tal.
    O sea que, sería igual que si lo pusieras incrustado en una entrada, si el video es largo posiblemente tarde en cargar más todo el contenido del video sin importar si usas un slider o no.

    Saludos!

    ResponderEliminar
  58. Gracias por la aclaración, Potro. Voy a probar, a ver qué tal me va.
    Saludos!

    ResponderEliminar
  59. Hola Potro, sigo tu blog desde hace poco tiempo y me está siendo de gran ayuda para personalizar blogs. Con este gadget estoy teniendo un problema, y es que no sé si es que es incompatible con Orbit Slide, pero cuando he instalado el Coda Slider el primero no me aparece. Este es el blog: http://lacombamagazine.blogspot.com/ ¿Habría solución para hacerlos compatibles? Un saludo y muchas gracias por tu gran trabajo.

    ResponderEliminar
  60. Hola Administrador,

    Ahora mismo no veo puesta la galería en el blog, pero lo que puede estar pasando es que ambos gadgets usan una versión de jQuery distinta y ahí puede estar el conflicto. Deja sólo la versión más reciente de jQuery, con eso no debería haber problemas:
    http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

    Saludos y gracias por comentar.

    ResponderEliminar
  61. Hola Potro:
    Esta todo correcto. OK
    GRACIAS

    ResponderEliminar
  62. Hola ya puse el complemento de transparencia "&wmode=transparent" después de los links de youtube y continúo con el mismo problema de que este gadget se sobrepone.
    Y además las imágenes grandes ahora aparecen negras, con las miniaturas no hay problema.

    Esta es la url: http://b2b-trento.blogspot.com/

    Esto lo he agregado en un HTML/Javascript es decir en forma de gadget... Pero quisiera saber cómo puedo agregarlo como entrada, ya que lo he intentado pero se distorciona..
    Además si lo agrego como gadget aparecería en todas las páginas y eso no deseo.

    ResponderEliminar
  63. Hola, he agregado el complemento de transparencia "&wmode=transparent" pero sigo con el mismo problema de que este gadget se sobrepone.
    Además ahora las imágenes de los videos se ven negras, con las miniaturas no hay problema.´

    La url es: http://b2b-trento.blogspot.com/

    Quisiera saber cómo poner el CosaSlider como una ENTRADA, lo intenté pero se distorciona todo; aparte si lo pongo como gadget aparecerá en todas las páginas del blog y eso no deseo...

    ResponderEliminar
  64. Hola Sonoradata,

    Antes del &amp;wmode=transparent agrega un signo de interrogación, por ejemplo, este video que te quede así:

    <iframe width="450" height="274" src="http://www.youtube.com/embed/k_KZtJ7rMHc?&amp;wmode=transparent" frameborder="0"></iframe>

    En las entradas los gadgets no siempre quedan bien, eso depende de cada plantilla. Pero si lo haces debes hacerlo siempre en la pestaña Edición de HTML y no en la de Redactar, de hecho ni siquiera debes cambiar a la vista de Redactar una vez que esté puesto, de lo contrario se agregan códigos como espacios o deja de funcionar.

    De cualquier forma, si lo pones en la sidebar puedes hacer que no aparezca en otras páginas:
    http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

    ResponderEliminar
  65. Donde puedo subir los archivos que descargue?? :DDD

    ResponderEliminar
  66. Pues hay varios hostings, uno muy bueno es Google Sites, en el buscador de aquí podrás encontrar un tutorial que habla sobre cómo subir archivos ahí.

    ResponderEliminar
  67. Hola,

    Sigo tu blog, y me ha gustado mucho la aportación, porque buscaba algo así para mi blog. Yo lo quiero para poner diversos vídeos en mis posts, es decir, colecciones de vídeos, por ejemplo de aperturas de ajedrez o documentales sobre el mismo tema. Para que no haya conflicto, ¿debería cambiar la y agregarla en el estilo de #MOVERS-ROW #PAGE-WRAP #MAIN-VIDEO-SLIDER y cambiar la función con la nueva id del main-video-slider? ¿Para eso debería cargar el script en el post?
    GRacias de anetamano

    ResponderEliminar
  68. No me funciona mira el post:

    http://www.ajedrezalaescuela.com/2010/12/presentacion.html

    ResponderEliminar
  69. Hola Diego,

    Tienes varias versiones de jQuery en tu blog, eso causa incompatibilidad entre ellas y por ende deja de funcionar. Tienes que dejar sólo la versión más reciente:
    http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

    ResponderEliminar
  70. potro cierto que puedo usar en vez de videos cualquier codigo dentro de esos div como por ejemplo un menu o una lista de enlaces? :3

    ResponderEliminar
  71. puedes hacer un tutorial en español y para blogger de este slide porfa *.* http://www.rafaeldesigner.com.br/blog/?UorUPOPY

    ResponderEliminar
  72. o ete *.* http://www.gayadesign.com/diy/presentation-cycle-cycle-with-a-progressbar/

    ResponderEliminar
  73. Lo he puesto en uno de pruebas y ahora se ve bien, pero las miniaturas no:
    http://pruebaajedrez.blogspot.com/2011/11/prueba-coda-slider.html

    ResponderEliminar
  74. Sirius, sí, puedes usar cualquier código ahí dentro. El primer slider que mencionas ya está explicado aquí, te dejo el enlace:
    http://ciudadblogger.com/2011/03/trislider-otro-slider-con-jquery.html

    ResponderEliminar
  75. Hola Diego,

    Es por los estilos de tu plantilla. Cambia esta línea:
    .nav-thumb { border: 1px solid black; margin-right: 5px;}

    Por esto:
    .nav-thumb {
    border: 1px solid black;
    margin-right: 5px;
    margin-top: 20px;
    margin-left:0 !important;
    margin-bottom:0 !important;
    padding:0 !important;
    }

    ResponderEliminar
  76. HOLA :D! muy interesante el blog
    venia buscando esto desde hace tiempo pero soy una completa ignorante
    ya que subo los archivos los enlazo
    copio todos los codigos
    :/
    y cuando pongo los videos estos aparecen de arriba hacia abajo y me tapan todo el blog :S! ya probe con diferentes plantillas y 2 de mis blogs :(

    ayuda, por favor.

    ResponderEliminar
  77. Hola ♥ あれはんどら, ¿en cuál blog lo has puesto?

    ResponderEliminar
  78. una pregunta alguna personna puede aserme una pagina para que la jentes descargue musicas en mi pagina y suvir video porque yo no comprendo nadas agreemen en facebook http://www.facebook.com/Eldominicanito31

    ResponderEliminar
  79. gracias potro c: aunque sueño con un tutorial en español para este menu cyrcle *.* http://www.gayadesign.com/diy/presentation-cycle-cycle-with-a-progressbar/

    ResponderEliminar
  80. Atoamusic.com, no creo que alguien vaya a hacerte un blog por ti, pero si nos dices qué necesitas podemos ayudarte a que lo hagas.

    Sirius, a ver si después que salga con las entradas pendientes que tengo lo pruebo. Saludos.

    ResponderEliminar
  81. Potro puedo hacer lo mismo para Vimeo???

    ResponderEliminar
  82. Sí Marcoatl, puedes usarlo también para esos videos, sólo que las miniaturas de las imágenes tendrías que hacerlas tú mismo.

    ResponderEliminar
  83. Hola! Muy bueno, gracias por compartirlo!

    Solo quisiera hacerte una consulta: se ve la "cajita" donde debería aparecer el vídeo y las miniaturas, pero encima de ella aparecen el primer vídeo seguido de todos los demás y las miniaturas al fondo, descuadrando el blog. ¿Sabes a qué se puede deber? Llevo un rato buscando algún fallo y no logro encontrarlo.

    Muchas gracias! Enhorabuena por tu blog!

    ResponderEliminar
  84. Por cierto, la dirección del blog es esta: http://hoygancar.blogspot.com/

    Es el mismo problema que comentan arriba, los vídeos se superponen al resto de cosas que haya por debajo.

    Gracias!!

    ResponderEliminar
  85. Hola adrian_tpt,

    En tu caso el problema es que te ha faltado ponerle el http:// en las URLs de los archivos, por lo tanto no funcionan.
    Lo has puesto así:
    uveseis.com/hoygancar/jquery-easing-1.3.pack.js

    Y debe ser así:
    http://uveseis.com/hoygancar/jquery-easing-1.3.pack.js

    ResponderEliminar
  86. Qué bueno!! Muchísimas gracias!!

    Podría pasar horas sin reparar en ese detalle...

    Lo dicho, muchas gracias por tu atención!! Seguiremos probando gadgets a ver cuanto tardo en cargármelo de nuevo :D

    ResponderEliminar
  87. potro estate atento de los codigos no funcionan bien con plantillas distintas a blogger osea plantillas modificadas no funciona bien

    ResponderEliminar
  88. Tan sólo en Btemplates hay 3,850 plantillas, imagínate si hiciera un código distinto para cada una de ellas.
    No, no se puede, por eso me baso en los códigos de las plantillas de Blogger y/o plantillas personalizadas que conservan los nombres de los contenedores originales.

    ResponderEliminar
  89. Ok amigo claro yo te entiendo esta bien amigo, pero por favor ustedes pueden crear una GALERIA DE VIDEO pero que seaa como un carrusel de fotos... que se mueve de izquierda a derechaa si me entiende amigo

    ResponderEliminar
  90. No conozco alguna con esas características, pero si me entero de una la prueba y en cuanto tenga tiempo lo publico.
    Saludos.

    ResponderEliminar
  91. Ok amigo gracias.
    Bueno queremos decirte todos los que conformamos RadioReggaetoon en España el dia de hoy queremos desearles Feliz Navidad y Un prospero año nuevo a ti POTRO y a todos los visitantes de tu pagina que esta Navidad y este nuevo año sea todo bendiciones y mejoraciones en sus vidas Dios les Bendiga

    ResponderEliminar
  92. Muchas gracias RadioReggaetoon. Que pases también una feliz Navidad en compañía de tus seres queridos y que Dios los llene de bendiciones :)

    ResponderEliminar
  93. Muchas gracias amigo. Bueno aqui en España ya son la 1 y 30 de la madrugada me imagino que en su pais todavia no es navidad pero igual que la pases bien amigo

    ResponderEliminar
  94. No era pero ya lo es, aunque en España supongo que ya debe haber acabado la Navidad, aun así espero que la hayas pasado muy bien :)

    ResponderEliminar
  95. Asi amigo por aca lo sigo celebrando jajajaja. Bueno le queria hablar sobre un temita pero me gustaria hacerlo en privado como podemos hablar en privado y asi seguimos mas en contacto

    ResponderEliminar
  96. Pasando las fiestas habilitaré de nuevo el formulario de contacto, ahora lo he tenido que deshabilitar porque en estas fechas me ocupo bastante, pero pasando todo el ajetreo de las fiestas estará nuevamente abierto ese medio de contacto :)

    ResponderEliminar
  97. Ok amigo entonces estare atento a la apertura de ese formulario para poder hablar amigo, cierto amigo potro.... ehhh.. ustedes tienen algun post sobre como poner una radio parecido a una barra navegadora entiende

    ResponderEliminar
  98. No. Todas las opciones que hemos publicado están en la sección Música en el menú de las categorías.
    Saludos.

    ResponderEliminar
  99. HOLA POTRO ,ENCANTADO DE HABLAR CONTIGO.HE COPIADO TODO SEGUN DICES EN EL TUTORIAL Y ME SALEN TODOS LOS VIDEOS HACIA ABAJO Y SEGUIDAS TAMBIEN HACIA ABAJO LAS MINIATURAS.LAS DEJO UNOS DIAS EN LA PAGINA PRINCIPAL PARA QUE LE ECHES UN OJO Y ME DIGAS QUE HE HECHO MAL.MI BLOG ES:

    http://amscbleon.blogspot.com/

    ResponderEliminar
  100. Hola COFRADIA,

    Lo que sucede es que un poco arriba de donde pegaste los estilos hay una llave de cierre que has eliminado sin querer:
    .rightarrowclass{
    position: absolute;
    top: 6px;
    right: 5px;
    .comentarios-cb {
    background: #000B0B; /* Color de fondo */
    border:1px solid #000B0B; /* Borde */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin-bottom:20px;
    }

    Si te fijas ahí en medio está faltando un }
    Aquí hay más información sobre ello:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    Quizá también haga falta que elimines las versiones de jQuery que tienes repetidas:
    http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

    ¡Saludos!

    ResponderEliminar
  101. gracias amigo, entiendo entonces que me falta }
    despues de right: 5px;
    Un saludo y gracias por tus ayudas a todos nosotros.

    ResponderEliminar
  102. hola , he cerrado la llave como te dije y ahora solo se ven dos videos desplegados , todavia tengo algo mal.Entre en la pagina de las versiones y los conflictos y he conseguido la acualizacion , la pegue y al buscar jquery/ solo me salen 2. Uno es el de la linea que acabo de pegar y otro esta en la linea de abajo(es uno de los codigos que descargue en el hosting te lo pego para que lo veas

    src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js'/>
    src='http://gsgd.co.uk/sandbox/jquery/easing/'/>

    ¿tengo que modificar la segunda linea tambien? y si es asi que tendria que poner en su lugar?UN SALUDO

    ResponderEliminar
  103. De hecho no sólo es tener la última versión de jQuery, sino tener sólo una versión de ellas, en tu caso la tienes repetida:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

    Pero además, los archivos que había que subir al hosting no los has subido. Si das click en una de las URLs que pusiste, por ejemplo, esta:
    http://gsgd.co.uk/sandbox/jquery/easing/

    Verás que no abre el script, esa es la página del sitio que provee el script, pero de ninguna manera lo ejecuta.
    Necesitas subirlo a tu propio hosting, puedes usar Dropbox para esos fines:
    http://ciudadblogger.com/2010/04/como-usar-dropbox.html

    Saludos.

    ResponderEliminar
  104. grandioso amigo , ha salido todo a pedir de boca.Tienes en mi un fan incondicional.Te seguire dando la lata,seguro.¿Esto mismo lo puedo poner en otra pagina del blog? si es asi ¿donde puedo encontrar el tutorial que me indique por donde ir? UN ABRAZO ENORME DESDE ESPAÑA.

    ResponderEliminar
  105. Gracias COFRADIA :)
    Sólo puedes poner uno por página, de otra manera deja de funcionar si hay más de uno.
    Saludos!

    ResponderEliminar
  106. Hola, lo he instalado correctamente solo que resulta que me queda muy centrado.

    Pienso que puede ser lo de position: absolute, como podría hacer para ponerlo mas a la izquierda?

    Muchas gracias. Si no incumplo una norma dejo el link donde se puede ver:
    take-a-l00k.blogspot.com

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

    ResponderEliminar
  108. Otra pregunta es como ponerle transparencia a este slide, y si se dan cuenta en la parte derecha de la pantalla queda un espacio vacío.

    Alguna solución para poder subir los widgets?

    Muchas gracias y felices reyes

    ResponderEliminar
  109. The Mister Ec, en esta parte cambia lo que está en negrita:
    #page-wrap {
    width: 490px; /* Ancho del contenedor general */
    min-height: 354px; /* Alto del contenedor general */
    margin: 0 auto;

    Por esto:
    margin:0 50px;

    Eso hará que se recorra el gadget, si lo quieres más a la derecha cambia ese 50px por un valor más alto.
    Lo de la transparencia no me ha quedado claro pues yo lo veo bastante bien o.O
    ¿Qué widgets deseas subir y a dónde?

    ¡Feliz Día de Reyes!

    ResponderEliminar
  110. Gracias por la info, a lo que me refería es lo siguiente:
    Si te das cuenta en la parte derecha de mi blog, las pestañas featured videos, recent posts estan desplazados hacia abajo por la acción del gadget Coda Video Slider.

    Hay alguna forma de subirlos a su posición original?

    La segunda cuestión era si este slider tendrá problemas con los DropMenu y Las paginas de presentación debido a la transparencia, si es así como puedo ponerle transparencia al video.
    Vi un tutorial tuyo, pero no me aclaro para extrapolarlo aquí.

    Un saludo y gracias!

    ResponderEliminar
  111. Quizá si pones el gadget arriba d elas entradas se acomode todo, lo que pasa es que donde lo has puesto es el crosscol del blog, así que tiene que ocupar todo ese ancho y esa altura. Prueba arrastrar el gadget que quede justo arriba de las entradas.
    Lo de la transparencia mas que al gadget es a cada video que tengas, en esa entrada que mencionas se explica en qué parte del código del video se aplica:
    http://ciudadblogger.com/2011/03/cuando-los-videos-se-sobreponen.html

    Saludos.

    ResponderEliminar
  112. Muchas gracias Potrito mio! xD

    El gadget ya estaba colcado encima de las entradas, para arreglarlo lo que hice fue un truco que se llama "desbloquear restricciones de blogger".

    Consiste en buscar en tu codigo HTML

    showaddelement=’no’

    Y los reemplazaremos por:

    showaddelement=’yes’

    Eso hará que nos muestre elementos que antes no estaban,que estaban bloqueados.
    Con eso y con mucha suerte pude encontrarle unn hueco ;).

    Ya la ultima pregunta Potro, siento ser tan pesado pero es que te explicas muy bien xD (pelota)

    En el ejemplo que pones:
    title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/XSGBVzeBUbk?rel=0&wmode=transparent" frameborder="0" allowfullscreen>
    iframe>

    El rel=0 no aparece en los videos de este tutorial, paso de el?

    Muchas Gracias.

    ResponderEliminar
  113. El rel=0 es únicamente para que al terminar el video no muestre videos relacionados, puedes ponerlo o quitarlo, realmente es opcional ;)
    Saludos.

    ResponderEliminar
  114. Hola Potro, un pregunta porque los vídeos que yo subo desde mi ordenador no se reproducen en los dispositivos de apple, pero si lo coloco desde youtube entonces si se ven, a que tu crees que se deba

    ResponderEliminar
    Respuestas
    1. ¿Te refieres a que el video, sin subirlo a YouTube no se ve, pero subiéndolo a YouTube sí se ve?
      Debe ser por el formato en el que tienes tus videos, si es que entendí bien el problema.

      Eliminar
  115. hOLA DE NUEVO AMIGO , me ha surgido un problema en mi galeria de videos.Despues de unos dias he decidido cambiar los videos que contenia y ahora solo puedo ver el primero ,los demas no se deslizan , solo se ven las miniaturas¿sabes a que puede deberse?

    ResponderEliminar
  116. CREO QUE ES POR EL CONFLICTO DE jquery/ ¿VERDAD? LO QUE DUDO AHORA ES SI TENGO QUE DEJAR TODAS LAS VERSIONES ACTUALIZADAS O BORRAR TODAS ,ANTIGUAS Y NUEVAS , Y SOLO DEJAR UNA.

    ResponderEliminar
    Respuestas
    1. Siempre se deben quitar todas las versiones tanto antiguas como las repetidas. Pero antes de guardar cambios da Vista Previa para cerciorarte que todo funciona.

      Eliminar
  117. que version de las actuales tengo que dejar , me salen tres o cuatro y quite la que quite me deja de funcionar algo.Me he trabado en este punto y no soy capaz de salir.

    ResponderEliminar
    Respuestas
    1. Entonces es posible que algunos de los trucos requieran de una versión en particular, si es así me temo que tendrás que prescindir de este gadget.
      Aquí hay más información sobre las versiones de jQuery:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
  118. Muy buenas.
    Navegando por internet me encontre con tú articulo.
    Me parecio fantastico y lo use en mi proyecto web.
    pero tengo un problema. El primer video se ve perfectamente y la imagen de miniatura tambien.
    pero en los sucesivos solo se ve la miniatura, pero el video no siempre da el mismo mensaje "SE HA PRODUCIDO UN ERROR VUELVA A INTENTARLO MÁS TARDE" podria ser algo puntual pero probe con varios video y simpre me pasa lo mismo?
    Sabrias el por que?

    ResponderEliminar
    Respuestas
    1. Hola paxarin, tendría que ver dónde lo has puesto, para ver si se trata de un error en el ID del video, o si es un problema con la colocación de todo el gadget.
      Saludos.

      Eliminar
  119. HELLO POTRO!
    COMO PONER MARCOS A VIDEOS QUE QUIRO SUBIR DESDE MI ORDENADOR? COMO HACER GALERIA DE VIDEOS CODA SLIDER CON VIDEOS QUE NO SON DE YOUTUBE, SINO QUE ESTAN EN MI MAC?

    GRACIAS

    ResponderEliminar
    Respuestas
    1. Hola MARTA,

      Cualquier archivo que quieras que se visualice en la red debe estar antes subido y disponible en la red. Si lo tienes en tu ordenador debes subirlo a algún hosting o un servicio como el de YouTube, pero sí es indispensable que lo subas para que pueda mostrarse en Internet, sino sólo tú lo verías.

      Saludos.

      Eliminar
  120. Hola potro, este es un excelente aporte ya q me dedico a crear videos :P pero tengo una duda. puedo aparte de modificar el tamaño del contenedor puedo aumentar el tamaño del video? ya q me parece un poco chico y hasta el reproductor mas chico de youtube es mas grande que lo que este slide me permite.

    Gracias potro!

    ResponderEliminar
    Respuestas
    1. Claro ZABU, dentro del código de cada video (en el último código) verás que aparecen las medidas width="450" height="274" , esas las puedes modificar para que el video tenga las proporciones que quieras.
      Saludos.

      Eliminar
  121. Hola buenas, estoy intentando poner este código para una aplicación en facebook, pero el tercer paso me está liando, yo lo he puesto en el body del index y no funciona, me salen los videos uno abajo del otro. Te agradecería mucho que me ayudaras.
    Saludos!!

    ResponderEliminar
    Respuestas
    1. Si lo estás poniendo en un sitio que no es Blogger entonces quita estas partes del script:
      //<![CDATA[


      //]]>

      Eliminar
  122. Hola!!, me encanta tu página, y desde cuando ando aplicando tus trucos a otro de mis blogs...En fin, venía a hacer mi primera consulta haha ...Verás lo que pasa es que hice todo lo que decías y salió el reproductor, lo único malo es que al querer seleccionar las imagenes en miniatura para pasar a los otros videos no se puede :C...Bueno, sólo en ocasiones deja que le de click a la segunda imagen para reproducir el video...¿Qué puedo hacer?

    ResponderEliminar
    Respuestas
    1. Hola Con-tacto UDA, qué gusto que te estén siendo útiles los recursos de este blog :)
      ¿En cuál blog has puesto la galería de videos?

      Eliminar
    2. En este: http://contactouda.blogspot.com/ :D

      Eliminar
    3. Lo que pasa es que tienes dos versiones de jQuery y debes tener sólo una:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

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

    ResponderEliminar
  124. Potro, ayúdame.
    Las imágenes en miniatura de los videos me aparecen bien, pero en la pantalla grande de arriba en vez de aparecer un solo video, aparecen todos uno encima de otro y me ocupen todo el alto del blog. ¿Por qué pasa eso?

    ResponderEliminar
    Respuestas
    1. Haría que ver en dónde lo has puesto.

      Eliminar
    2. No te preocupes, amigo. Al final he decidido no ponerlo en mi blog ;)
      Saludos.

      Eliminar
  125. Buenas tardes, ¿hay alguna manera de modificar el aspecto? Quiero decir, que sea un poco más alargado y mas bajo. Es que intenté modificar los parámetros que vienen indicados como alto y ancho para el contenedor etc.. pero debajo quedaba como un cuadrado negro y tampoco es que la apariencia fuese muy bonita. Gracias

    ResponderEliminar
    Respuestas
    1. Pues cambiando los valores donde se indica es como se cambia, quizá tengas que jugar con varios valores hasta que encuentres los apropiados para que te quede con las medidas que deseas. Saludos!

      Eliminar
  126. Nada, al final lo quité porque ralentizaba mucho la página y se me bloqueaba todo y en su lugar puse un reproductor de música jejejejej. Gracias

    ResponderEliminar
    Respuestas
    1. Jajaja ok, me parece bien que optes por la rapidez de la carga :)

      Eliminar
  127. Hola El Potro, estoy iniciandome en esto y a ver si me ayudas, te pongo la dire del blog de pruebas que he hecho para este visor de videos:
    http://blog-belen-pruebas.blogspot.com.es/
    Como puedes ver no me sale el visor sino los videos, las miniaturas y los titulos pero todo por separado.
    Tb en la parte de arriba me sale visible todo el texto, que en el blog definitivo queda oculto por una foto, no se si tb me sale alli. A ver si tu detectas que es lo que hago mal.
    Mi idea es que este visor aparezca solo en la pagina de videos, no en la principal. Entiendo que lo que tengo que hacer es poner los 2 primeros trozos de codigo en la parte de personalizar plantilla, y el tercero en la pagina en que quiero que aparezca el visor.
    En la prueba he puesto el tercer trozo en las dos paginas, y si, me salen pero como te decia.
    Muchas gracias, espero tu respuesta.

    ResponderEliminar
  128. perdon, en mi consulta me he equivocado, donde decia "poner los 2 primeros trozos de codigo en la parte de personalizar plantilla", queria decir en plantilla edicion de HTML.

    ResponderEliminar
    Respuestas
    1. Hola NX, el código de los estilos de debe pegar antes de ]]></b:skin> no antes de <b:skin><![CDATA[/*
      Se parecen, pero no son iguales ;)

      Eliminar
    2. muchas gracias por tu respuesta tan rapida, es eso que decias.

      ahora ya he conseguido ponerlo bien pero han surgido otros problemillas con el visor al añadir cosas a esa entrada/pagina, si quieres pasarte por mi blog de pruebas te lo he dejado alli explicado en la pagina principal.
      http://blog-belen-pruebas.blogspot.com.es/

      y ahora ademas estaba probando tb lo de abrir los links EXTERNOS en otra ventana, probando diferentes soluciones que he visto, lo de target blank y target parent, pero creo que ya la he liado y no sabia restablecerlo ni vale la pena, me hare otro nuevo.
      pero de momento a ver si me ayudas a resolver lo que te planteo en el blog, y esto de los links externos seguire probando a ver si lo resuelvo yo.

      gracias otra vez!

      Eliminar
    3. Hola de nuevo NX, quizá el problema es que la galería la estás poniendo en las entradas, cuando es así no se debe cambiar a la pestaña Redactar, pues al hacerlo se desordenan los códigos:
      http://ciudadblogger.com/2009/11/como-poner-los-codigos-correctamente-en.html

      Independientemente de eso, sólo se puede poner una galería por página.
      Saludos.

      Eliminar
    4. no veo mi respuesta, a lo mejor sale dos veces pero lo repito:
      muchas gracias por tu ayuda, lo he hecho como me dices, poniendo primero el texto y luego el visor y me sale bien.

      eres muy amable atendiendo a todas nuestras dudas. yo intentare leer bien todos los tutoriales antes de preguntar algo, pero es que esto es lo primero que hago relacionado con codigos, HTML y todo eso y aun me suena a chino.

      muchas gracias!!!

      Eliminar
    5. Qué gusto que ya haya salido bien NX, gracias por tu comentario.

      Eliminar
  129. Has un video por favor!! no entiendo nada!!

    ResponderEliminar
  130. POTRO, LO QUE PASA ESQUE EL GADGET ME APARECE CORRECTO Y TO PERO AL MOMENTO DE CAMBIAR EL VIDEO NO CAMBIA Y MI URL SE CAMBIA:
    ME EXPLICO:
    MI BLOG ES ESTE :http://bullanoticias12.blogspot.com
    Y AL MOMENTO DE SELECCIONAR OTRO VIDEO PASA ESTO : http://bullanoticias12.blogspot.com/#7
    ACTUALIZE JWEQUERY O COMO SE DIGA Y NADA AGRADECRIA TU AYDA :D

    ResponderEliminar
    Respuestas
    1. No lo veo puesto, pero sí veo que usas Scriptaculous, un script que no es compatible con jQuery.http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

      Eliminar
  131. solo carga el primer videos le doy clic en los demás videos peor no los carga

    ResponderEliminar
    Respuestas
    1. Ya no funciona eddi, cuando tenga noticias sobre el slider se los comunico.

      Eliminar
  132. Primero que nada un gran saludo Potro por el gran trabajo que haces en ayudarnos sin ánimos de lucro. bueno mi pregunta concierne para ver si puedes echarle un vistazo a este trabajo http://elbalcondejaime.blogspot.com/2011/02/video-galeria-en-el-blog-muestra-listas.html y podrias, no se repararlo sera, porque ya que lo pongo en mi blog que la gente cambia para la lista de reproduccion los videos no se ven y marcan un error. Y queria saber si me podias echar una manito con eso. la galeria de video no se encuentra en este momento en mi blog. espero su respuesta.

    ResponderEliminar
    Respuestas
    1. No sabría cómo ayudarte Thais Arion, nunca he usado esa galería :(

      Eliminar
  133. Hola de nuevo Potro:
    Solo me funciona el video principal, el resto nada solo aparecen las miniaturas.
    http://franciscoadame.es
    Saludos

    ResponderEliminar
    Respuestas
    1. Ya no funciona FRANCISCO, ignoró que pasó que a todos de repente nos dejó de funcionar :(

      Eliminar
  134. Excelente ejemplo y muy bien explicado, pero existe una gran complicación. El problema es cuando se desea mostrar videos que tienen otro signo = (igual) despues del id, por ejemplo este video: http://www.youtube.com/watch?v=_5bdHhATCww&feature=relmfu

    En esos casos no se puede mostrar y me gustaría saber si hay alguna solución, te lo agradecería mucho Potro.
    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Danilex, la galería ya no está funcionando, por eso el aviso al inicio de la entrada. Procuraré buscar otro método alternativo para un resultado similar.
      Saludos.

      Eliminar
  135. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  136. Hola GENIO!!! quería preguntarte si tenés idea de otra opción para galería de videos. estoy haciendo mi blog y esto me copa tenerlo así tengo un top 7 interesante para que la gente vea!

    abrazo y graciaaaas!!! estoy haciendo mi blog con todos tus tutoriales!
    capo totaaaal! beso!

    ResponderEliminar
    Respuestas
    1. No Musa Framboise, pero procuraré buscar una para publicarla pronto :)
      Saludos.

      Eliminar
  137. Hola,

    Recuerdo haber visto un slider de imágenes muy sencillo, aquí en tu blog, bastante practico, que era fácil de personalizar en cuanto a medidas, reproducción automática, velocidad de reproducción,... Lo estoy buscando y no lo encuentro, lo necesito para hacer un slider de vídeos pequeño como este(Esta en la derecha al final del todo): http://www.elegantthemes.com/preview/Aggregate/
    Lo malo de este slide es que reproduce automáticamente y si pones a reproducir un vídeo pasa al otro y se sigue reproduciendo de fondo.

    Si sabes de que slide te estoy hablando pásamelo, por favor.

    Un saludo y muchas gracias por todo, estoy empezando a montar mi blog y veo que me va ser muy útil tu blog.

    ResponderEliminar
    Respuestas
    1. Hola, no sé bien de cuál sea el slider que buscas, pero aquí están todos los que se han publicado:
      http://ciudadblogger.com/search/label/Slideshows

      Eliminar
    2. Hola, gracias por la respuesta, este sábado y domingo intentaré hacer algo, ya que durante la semana curro y no me da tiempo.
      Viendo "Slider automático para mostrar las últimas entradas (Easy Slider)", era el que recordaba, pero ahora veo que no es lo que yo necesito, pero gracias a este post he podido llegar a este: http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider, que es lo que necesito. Lo malo es que no se como adaptarlo o añadirlo a mi blog. Podrías echarme un mano con esto por favor?. Comentas que harás otro slider de videos, más o menos para cuando lo publicaras?.

      Un saludo y muchas gracias por todo

      Eliminar
    3. No sabría decirte, aun tengo varias entradas pendientes por publicar.
      El slider de esa página es el mismo sólo que sin ser automático, en el segundo demo verás que es el mismo, el primero no lo he probado así que no sabría decirte.
      Saludos.

      Eliminar
  138. Que tal amigo. Al Kiosco que me ayudaste a hacer quisiera incorporarle VIDEOS de YouTube como tienes en este Entrada o similar. NO SE SI SE PUEDE EN EL MISMO FORMATO DE TABLA QUE AQUÍ. Necesito me aconsejes como podría, en principio se me ocurrió llegar a ellos desde el menú de la barra, poner en la pestaña VIDEOS como tengo la otra pestaña que dice REVISTAS. Espero tus comentarios. Gracias

    ResponderEliminar
    Respuestas
    1. ¿Que el video se muestre en miniatura desde la portada? No se puede ni con este ni con otro sistema, lo más parecido que encontrarás en Blogger será que tome una imagen del video y la ponga, pero no se reproducirá hasta ingresar a la entrada.
      Saludos.

      Eliminar
  139. Hola potro, veo que arriba dices que ya no funciona,,, pero sabes si éste puede funcionar en blogger?? y de ser así,,, podrías explicar donde colocar cada cosa en la plantilla? http://www.forosdelweb.com/f4/contenedor-videos-1011042/

    ResponderEliminar
    Respuestas
    1. Hola Javier, no sé si pueda implementarse, tengo un par de sliders para videos que tengo que probar, incluiré este también, el primero que funcione publicaré, sólo dame un poco de tiempo.
      Saludos.

      Eliminar
  140. :) Gracias Potro ( El), por supuesto que tienes todo el tiempo del mundo,,, si supieras todo el tiempo que me has ahorrado y ayudado,,, Yo lo quiero pq en mi página de vídeos me tarda mucho en cargar y la gente pasa por encima y no espera pero claro que esperaré. Gracias por adelantado!!

    ResponderEliminar
    Respuestas
    1. Pues yo no aseguraría que la galería de videos pueda ayudarte en la velocidad de carga del blog, pero ya cuando esté lista alguna de ellas la probarás y verás qué tal ;)

      Eliminar
  141. Oye, pues yo pensaba que si se rebaja el numero de componentes de la página lo haría,,, que sería mas rápida, pq solo va lenta en carga esa, la de los videos. Ey!! pues cuando lo mires supongo que se podrán cargar vídeos desde viewbix.com, es decir con su forma o su botonera. :)

    ResponderEliminar
    Respuestas
    1. De hecho un slider podría hacerlo más lento, pues tienes que cargar la libería que lo haga funcionar (por ejemplo jQuery), además del script propio de la galería, los estilos y todos los códigos de los videos, así que no veo cómo pueda reducirse la velocidad, todo lo contrario...

      Eliminar
  142. Oye,, es que yo tengo ya esos enlaces puestos,,, aunque tengo una copia en html que la puedo reponer,,, o te refieres solo al youtube?? por favor mira a ver si tal como lo tengo o estoy perdiendo pq los cambios los hice hace 5 días y a lo mejor estoy en tiempo de arreglarlo.http://www.muraldecoracion.com/p/videos.html

    ResponderEliminar
  143. -Es que me decías lo del PR, que me puede bajar si cambio los enlaces de los vídeos ¿o no era eso?. Respecto a lo otro de no poder acelerar la página... bueno,,, tendré que poner el slider si o si, pq he de poner vídeos. Ya veremos el resultado ;)

    ResponderEliminar
    Respuestas
    1. No veo en esta entrada que hablemos algo sobre los enlaces, realmente me pierdo :(
      Pero si logro captar la idea, dentro del blog puedes cambiar lo que quieras, lo que afectaría el PR es si cambias de dirección del blog.

      Saludos.

      Eliminar
  144. Querido Potro, queria saber si esto funciona para un web comun y corriente?
    de ser asi muy buen aporte, muchisimas gracias

    pd: mi pregunta va referida a un cartel que dice "AVISO
    Esta galería de videos ya no funciona, se recomienda buscar otra opción."

    ResponderEliminar
    Respuestas
    1. Hola La Suiza, no sé decirte con certeza, en teoría sí debe funcionar para una página web, pero yo sólo lo he probado en Blogger.

      Eliminar
  145. Hola.

    Me gustaría hacerte una pregunta.

    Tengo un blog. Se llama. Chungorris y esta empezando. Yo también te pregunte (dudo que te acueredes)como emití vídeos en directo desde blogger. L blog era que tostón

    Esta pregusta es .
    Cuando vuelto un vídeo al blog no se me ve ni desde Tablet, móviles , o cosas de apple.¿¿¿existe algún código httml o de otro tipo para los vídeos y que se vean???

    David

    ResponderEliminar
    Respuestas
    1. Hola chungorris, lo que pasa con los dispositivos móviles es que no leen archivos en flash, y muchos videos son en flash. La mejor opción es que subas tus videos a YouTube, de esa manera el código no será un flash sino un iframe y cualquier dispositivo podrá reproducirlo sin problemas.

      Eliminar
  146. Hola potro, enhorabuena por la web. Tengo dos dudas, este código, vale para una web normal ¿no?, no está preparado para un blog especialmente... Y otra cosa, me intento bajar los archivos y no me deja. ¿Habría alguna otra manera de conseguirlos?. Gracias y un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Rafa, no sé si viste el aviso pero este slider ya no funciona al menos en Blogger, en sitios web no lo sé.
      Los puedes descargar aquí:
      https://sites.google.com/site/ciudadbloggerfiles/Home/Coda-Slider.zip?attredirects=0&d=1

      Eliminar
  147. OLA!! saludos y Exitos.
    Mi pregunta es como ponerle una galería de vídeos, pero a la misma entrada e buscado mucho y no encuentro uno que realmente funcione.

    ResponderEliminar
  148. Hermano eres un genio, puedo colocar en ves de video imagenes, gracias este es mi correo jhoan.salaverria@gmail.com. te agradeceria muchisimo si me ayudas por favor

    ResponderEliminar
  149. Hermano eres un genio, puedo colocar en ves de video imagenes, gracias este es mi correo jhoan.salaverria@gmail.com. te agradeceria muchisimo si me ayudas por favor

    ResponderEliminar

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

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

 
Ir Arriba Ir Abajo
I Ciudad Blogger