Galería de videos para el blog

29 de octubre de 2012 204 comentarios ,


En esta entrada vamos a ver cómo crear una galería de videos de YouTube usando jQuery. Es una elegante galería a la que le caben 5 videos y que por sus dimesiones la pondremos debajo de la cabecera del blog. En realidad puedes ponerla en cualquier parte, pero se recomienda en esa área por los 765px que mide de ancho la galería.
Puedes verla funcionando en este demo.

Para agregar este slider de videos en tu blog entra en Plantilla | Edición de HTML y antes de </head> agrega los scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
/*hoverscroll v.0.2.4*/
(function($) {
$.fn.hoverscroll = function(params) {
if (!params) { params = {}; }
params = $.extend({}, $.fn.hoverscroll.params, params);
this.each(function() {
var $this = $(this);
if (params.debug) {$.log('[HoverScroll] Trying to create hoverscroll on element ' + this.tagName + '#' + this.id);}
if (params.fixedArrows) {
$this.wrap('<div class="fixed-listcontainer"></div>')
}
else {
$this.wrap('<div class="listcontainer"></div>');
}

$this.addClass('list');
var listctnr = $this.parent();
listctnr.wrap('<div class="ui-widget-content hoverscroll' +
(params.rtl && !params.vertical ? " rtl" : "") + '"></div>');
//listctnr.wrap('<div class="hoverscroll"></div>');

var ctnr = listctnr.parent();

var leftArrow, rightArrow, topArrow, bottomArrow;
if (params.arrows) {
if (!params.vertical) {
if (params.fixedArrows) {
leftArrow = '<div class="fixed-arrow left"></div>';
rightArrow = '<div class="fixed-arrow right"></div>';

listctnr.before(leftArrow).after(rightArrow);
}
else {
leftArrow = '<div class="arrow left"></div>';
rightArrow = '<div class="arrow right"></div>';

listctnr.append(leftArrow).append(rightArrow);
}
}
else {
if (params.fixedArrows) {
topArrow = '<div class="fixed-arrow top"></div>';
bottomArrow = '<div class="fixed-arrow bottom"></div>';

listctnr.before(topArrow).after(bottomArrow);
}
else {
topArrow = '<div class="arrow top"></div>';
bottomArrow = '<div class="arrow bottom"></div>';

listctnr.append(topArrow).append(bottomArrow);
}
}
}
ctnr.width(params.width).height(params.height);

if (params.arrows && params.fixedArrows) {
if (params.vertical) {
topArrow = listctnr.prev();
bottomArrow = listctnr.next();

listctnr.width(params.width)
.height(params.height - (topArrow.height() + bottomArrow.height()));
}
else {
leftArrow = listctnr.prev();
rightArrow = listctnr.next();

listctnr.height(params.height)
.width(params.width - (leftArrow.width() + rightArrow.width()));
}
}
else {
listctnr.width(params.width).height(params.height);
}

var size = 0;

if (!params.vertical) {
ctnr.addClass('horizontal');
$this.children().each(function() {
$(this).addClass('item');

if ($(this).outerWidth) {
size += $(this).outerWidth(true);
}
else {
size += $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right'))
+ parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
}
});
$this.width(size);

if (params.debug) {
$.log('[HoverScroll] Computed content width : ' + size + 'px');
}
if (ctnr.outerWidth) {
size = ctnr.outerWidth();
}
else {
size = ctnr.width() + parseInt(ctnr.css('padding-left')) + parseInt(ctnr.css('padding-right'))
+ parseInt(ctnr.css('margin-left')) + parseInt(ctnr.css('margin-right'));
}

if (params.debug) {
$.log('[HoverScroll] Computed container width : ' + size + 'px');
}
}
else {
ctnr.addClass('vertical');
$this.children().each(function() {
$(this).addClass('item')

if ($(this).outerHeight) {
size += $(this).outerHeight(true);
}
else {
size += $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom'))
+ parseInt($(this).css('margin-bottom')) + parseInt($(this).css('margin-bottom'));
}
});
$this.height(size);

if (params.debug) {
$.log('[HoverScroll] Computed content height : ' + size + 'px');
}
if (ctnr.outerHeight) {
size = ctnr.outerHeight();
}
else {
size = ctnr.height() + parseInt(ctnr.css('padding-top')) + parseInt(ctnr.css('padding-bottom'))
+ parseInt(ctnr.css('margin-top')) + parseInt(ctnr.css('margin-bottom'));
}

if (params.debug) {
$.log('[HoverScroll] Computed container height : ' + size + 'px');
}
}
var zone = {
1: {action: 'move', from: 0, to: 0.06 * size, direction: -1 , speed: 16},
2: {action: 'move', from: 0.06 * size, to: 0.15 * size, direction: -1 , speed: 8},
3: {action: 'move', from: 0.15 * size, to: 0.25 * size, direction: -1 , speed: 4},
4: {action: 'move', from: 0.25 * size, to: 0.4 * size, direction: -1 , speed: 2},
5: {action: 'stop', from: 0.4 * size, to: 0.6 * size},
6: {action: 'move', from: 0.6 * size, to: 0.75 * size, direction: 1 , speed: 2},
7: {action: 'move', from: 0.75 * size, to: 0.85 * size, direction: 1 , speed: 4},
8: {action: 'move', from: 0.85 * size, to: 0.94 * size, direction: 1 , speed: 8},
9: {action: 'move', from: 0.94 * size, to: size, direction: 1 , speed: 16}
}

ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
function checkMouse(x, y) {
x = x - ctnr.offset().left;
y = y - ctnr.offset().top;

var pos;
if (!params.vertical) {pos = x;}
else {pos = y;}

for (i in zone) {
if (pos >= zone[i].from && pos < zone[i].to) {
if (zone[i].action == 'move') {startMoving(zone[i].direction, zone[i].speed);}
else {stopMoving();}
}
}
}

function setArrowOpacity() {
if (!params.arrows || params.fixedArrows) {return;}

var maxScroll;
var scroll;

if (!params.vertical) {
maxScroll = listctnr[0].scrollWidth - listctnr.width();
scroll = listctnr[0].scrollLeft;
}
else {
maxScroll = listctnr[0].scrollHeight - listctnr.height();
scroll = listctnr[0].scrollTop;
}
var limit = params.arrowsOpacity;
var opacity = (scroll / maxScroll) * limit;

if (opacity > limit) { opacity = limit; }
if (isNaN(opacity)) { opacity = 0; }

var done = false;
if (opacity <= 0) {
$('div.arrow.left, div.arrow.top', ctnr).hide();
if(maxScroll > 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', limit);
}
done = true;
}
if (opacity >= limit || maxScroll <= 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).hide();
done = true;
}

if (!done) {
$('div.arrow.left, div.arrow.top', ctnr).show().css('opacity', opacity);
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', (limit - opacity));
}
}

function startMoving(direction, speed) {
if (ctnr[0].direction != direction) {
if (params.debug) {
$.log('[HoverScroll] Starting to move. direction: ' + direction + ', speed: ' + speed);
}

stopMoving();
ctnr[0].direction = direction;
ctnr[0].isChanging = true;
move();
}
if (ctnr[0].speed != speed) {
if (params.debug) {
$.log('[HoverScroll] Changed speed: ' + speed);
}

ctnr[0].speed = speed;
}
}

function stopMoving() {
if (ctnr[0].isChanging) {
if (params.debug) {
$.log('[HoverScroll] Stoped moving');
}

ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
clearTimeout(ctnr[0].timer);
}
}

function move() {
if (ctnr[0].isChanging == false) {return;}

setArrowOpacity();

var scrollSide;
if (!params.vertical) {scrollSide = 'scrollLeft';}
else {scrollSide = 'scrollTop';}

listctnr[0][scrollSide] += ctnr[0].direction * ctnr[0].speed;
ctnr[0].timer = setTimeout(function() {move();}, 50);
}

if (params.rtl && !params.vertical) {
listctnr[0].scrollLeft = listctnr[0].scrollWidth - listctnr.width();
}

ctnr
.mousemove(function(e) {checkMouse(e.pageX, e.pageY);})
.bind('mouseleave', function() {stopMoving();});

this.startMoving = startMoving;
this.stopMoving = stopMoving;

if (params.arrows && !params.fixedArrows) {
// Initialise arrow opacity
setArrowOpacity();
}
else {
// Hide arrows
$('.arrowleft, .arrowright, .arrowtop, .arrowbottom', ctnr).hide();
}
});

return this;
};

if (!$.fn.offset) {
$.fn.offset = function() {
this.left = this.top = 0;

if (this[0] && this[0].offsetParent) {
var obj = this[0];
do {
this.left += obj.offsetLeft;
this.top += obj.offsetTop;
} while (obj = obj.offsetParent);
}

return this;
}
}

$.fn.hoverscroll.params = {
vertical: false,
width: 400,
height: 50,
arrows: true,
arrowsOpacity: 0.7,
fixedArrows: false,
rtl: false,
debug: false
};
$.log = function() {
try {console.log.apply(console, arguments);}
catch (e) {
try {opera.postError.apply(opera, arguments);}
catch (e) {}
}
};
})(jQuery);

// Aplicar desde aquí el hack de compatibilidad con Scriptaculous en caso de ser necesario

$(function(){
$("#slidervideo-tabs a").click(function(){
var container = $("#slidervideo-content");
container.html("<img src='http://3.bp.blogspot.com/-IbCgBm3kukw/UI3nvBbvtUI/AAAAAAAADL0/lfqoLXFkhfU/s400/loading.gif' class='loading-vid' />");
var id = $(this).attr("href").slice(1);
loadvideo(id);
return false;
});
$("#slidervideo-tabs").hoverscroll({vertical:true,width:300,height:330,arrows:false});
$("#slidervideo-tabs li").hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});
loadvideo();
});

function loadvideo (hash){if(hash){hash = hash.slice(3);$("#slidervideo-content").html(video[hash]);$("#slidervideo-tabs li").removeClass("actVid");$("#slidervideo-tabs a[href=#vid"+hash+"]").parent().addClass("actVid");}else{$("#slidervideo-content").html(video[1]);$("#slidervideo-tabs li").removeClass("actVid");$("#slidervideo-tabs a[href=#vid1]").parent().addClass("actVid");}}
//]]>
</script>
Luego agrega los estilos antes de ]]></b:skin>
/* Galería de videos
----------------------------------------------- */
#slidervideo {
background:#000; /* Color de fondo */
clear:both;
margin:0 auto;
padding:5px;
width:765px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#slidervideo, #slidervideo-content, #slidervideo-tabs {height:350px;overflow:hidden;}
#slidervideo-content {color:#fff;float:left;text-align:center;width:460px;z-index:1;}
.loading-vid {display:block;margin:165px auto 0;}
#slidervideo-tabs {float:right;width:300px;margin:0;}
#slidervideo-tabs li {background:url(http://4.bp.blogspot.com/-qgLr9azZ3kk/UI3nvtqmjBI/AAAAAAAADMA/ASkdnSf4SWA/s000/tab_bg.jpeg) repeat-x top left;float:left;height:60px;padding:5px;width:290px;list-style:none;}
#slidervideo-tabs li a {padding:0 !important;border:0 !important;}
#slidervideo-tabs li.hover {background:#333;}
#slidervideo-tabs li.actVid {background:#555;}
#slidervideo-tabs li img.thumb-vid {background-color:#fff;float:left;height:52px;margin:0 8px 0 0;padding:5px;width:52px;}
#slidervideo-tabs li span.vidTit {
display:block;
color:#CD332D; /* Color de los títulos */
font-size:14px; /* Tamaño de los títulos */
font-weight:bold;
text-decoration:none;
}
#slidervideo-tabs li .vidDesc {
display:block;
color:#fff; /* Color de la descripción */
font-size:12px; /* Tamaño del texto de la descripción */
font-weight:bold;
text-decoration:none;
}
#slidervideo-tabs a {text-decoration:none;}
#slidervideo-tabs li.actVid .vidDesc {color:#fff;}
.ui-widget-content{float:right;}
.tabs-outer {background-image: none !important;}
#slidervideo-tabs li a:hover {background: none !important;}
Ahora en un elemento HTML/Javascript pega la estructura del slider, este gadget es el que pondrás debajo de la cabecera:
<script>
var video = [];
video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_1" frameborder="0" allowfullscreen></iframe>';
video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_2" frameborder="0" allowfullscreen></iframe>';
video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_3" frameborder="0" allowfullscreen></iframe>';
video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_4" frameborder="0" allowfullscreen></iframe>';
video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_5" frameborder="0" allowfullscreen></iframe>';
</script>
<div id="slidervideo">
<div id="slidervideo-content"></div>
<ul id="slidervideo-tabs">
<li><a href="#vid1"><img src="//i2.ytimg.com/vi/ID_video_1/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid2"><img src="//i2.ytimg.com/vi/ID_video_2/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid3"><img src="//i2.ytimg.com/vi/ID_video_3/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid4"><img src="//i2.ytimg.com/vi/ID_video_4/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid5"><img src="//i2.ytimg.com/vi/ID_video_5/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

</ul>
</div>
Agrega los IDs de los videos, sus nombres y su descripción y listo. La descripción deberá ser muy breve para que no tengas problemas de espacios.
Si no sabes cómo obtener la ID de un video abre el video en YouTube y mira en la barra de direcciones, los últimos caracteres son la ID que necesitas.


Toma en cuenta que la ID de cada video se agrega dos veces, uno es para que muestre el video y otra para la miniatura de las pestañas.

Es una galería que como funciona con jQuery deberás cerciorarte de no repetir la versión del script en caso de que ya tengas jQuery, y si usas Scriptaculous deberás aplicarle unos cambios, casi al final del primer código verás en color azul desde dónde deberás aplicárselos en caso de que lo necesites.


204 comentarios en:

" Galería de videos para el blog "

  1. Potro... Esta excelente...!
    Me interesa para ponerlo en el "HOME" de mi blog, pero aun no me decido para ponerlo!

    Saludos!

    ResponderEliminar
  2. o muy bien gracias por la información buen día :D

    ResponderEliminar
  3. primer comentario :)
    muy bueno he estado aplicando todo lo de tu sitio web en mi blog y se vee muy bien.

    http://inmueblecolombia.blogspot.com

    ResponderEliminar
  4. Que excelente publicación Potro, este post lo utilizaré, pues es muy bueno. gracias por compartirlo. Que tengas una buena noche... Saludos amigo. ^^

    ResponderEliminar
  5. Genial!!

    Ya hacía falta esta publicación.

    Gracias y saludos Potro!

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

    ResponderEliminar
    Respuestas
    1. Hola El Crack Loko, este es el que tengo de las más visitadas (con Analytics):
      http://ciudadblogger.com/2009/11/gadget-de-entradas-mas-visitadas.html

      Este es el que tengo de las últimas entradas (el primero), sólo hay que cambiar comments por posts
      http://ciudadblogger.com/2009/05/ultimos-comentarios-en-blogger.html

      Los botones es tan fácil como buscar el código en la plantilla y quitarlo.

      Pd. Recuerda que cuando el blog tiene material protegido por derechos de autor no se debe dejar la dirección del blog ;)

      Saludos.

      Eliminar
  7. Potro! Se le puede agregar mas videos, por que solo 5??

    ResponderEliminar
    Respuestas
    1. Se le puede agregar más, pero eso implicaría cambiar las dimensiones de todo, de los dos contenedores y de los videos, además se tendrían que añadir otras secciones de código, lo que haría un poco lenta la carga del blog.

      Eliminar
  8. Exelente potro gracias voy a ver la forma si se puede poner ej un html necesito esto xd..

    ResponderEliminar
  9. ... al final, optaré por usar esta librería, veo que da bastante más juego que Scriptacoulous.
    Un saludo y gracias de nuevo.

    ResponderEliminar
    Respuestas
    1. Scriptacoulous es bueno, pero no tiene tantos plugins como jQuery, y aunque pueden convivir juntos lo ideal sería tener sólo una para no cargar dos liberías distintas.
      Suerte :)

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

    ResponderEliminar
  11. Hola Potro,,, Malas noticias,,, no me va,,, después de hacerlo todo me salen las imágenes pequeñas y tal pero no me funciona ni la imagen principal y si pincho sobre las pequeñas que abre como si fuera para poner un banner o algo en una ventana de blogger. Resumiendo que ni idea de pq no va...

    ResponderEliminar
  12. No sé si tengo Scriptaculous o no,,, y si es así no sabría pegarlos. ¿sabes si es eso lo que me pasa?

    ResponderEliminar
    Respuestas
    1. No tienes Scriptaculous pero sí tienes 2 versiones de jQuery, así que si agregas este tendrás 3 versiones y debes tener sólo una. Si pones esta elimina las demás, al final de la entrada se menciona ese tema.

      Saludos!

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

    ResponderEliminar
  14. Una pregunta más, quería saber si hay manera de que un codigo se auto modifique con la url de la entrada o página donde se aplique

    ResponderEliminar
    Respuestas
    1. Hola Cristian, no sé si haya un código que lo haga solo, posiblemente sí pero no le veo mucho sentido siendo que el cambio lo harías cada varias semanas o meses así que bien podrías hacerlo manualmente sin necesidad de meterle scripts innecesarios a la plantilla.

      Lo otro depende como qué tengas en mente, necesitaría saber más detalles de lo que quieres hacer.

      Eliminar
    2. Bueno como por ejemplo el botón de me gusta de mi página solo cuenta los like´s que se dan a la url principal,la de la página de entrada y no se pone en ceros cuándo está en otra url de la página, ese sería un ejemplo de para que lo quisiera usa o tan siquiera saber como modificar el codigo del botón del like para que cuente los likes independientemente de la url de las entradas.

      Eliminar
    3. o bueno tambien quisiera saber si hay manera de programar el que la imagen de cabesera de mi página se cambia cada cierta fecha, que claro obiemente ya tendría las nuevas imágenes preparadas para que las sustituya.
      Esto se me ocurió por que yo cada que hay alguna festividad mundiál por ejemplo, diseño una portada a corde a la festividad.

      Eliminar
    4. Mira esta entrada para que veas cómo poner el botón "Me gusta" en las entradas del blog:
      http://ciudadblogger.com/2011/01/agregar-el-boton-me-gusta-de-facebook.html

      Eliminar
  15. Oye Potro,,, y me puedes decir cuales quitar,,, como localizarlas??? Sé que ésto excede de tú "compromiso" pero yo ni siquiera sabía que tenia 2. Sabes los que pasa??? que aunque tengo nociones ( cada dia más ) de muchas cosas de otras solo voy aprendiendo lo que "machaco" dia tras día. Bueno si me ayudas con ésto bien y si no tb,,, sé que haces mucho por todo el mundo y no puedo pedirte mucho más. Gracias!!

    ResponderEliminar
  16. Soy yo otra vez Potro,,, sabes??? es que no tengo claro si cuando he de montar algo con scrip he de montar cada uno con uno o si uno me vale para todos... puedes aclararme eso???

    ResponderEliminar
    Respuestas
    1. Hola Javier, recuerda dar click en el botón "Responder" para que todos tus comentarios se agrupen en un solo hilo y no estén dispersos ;)

      En el enlace que está al final de la entrada se explica cómo localizar esas versiones, sólo repásala para que entiendas qué debes quitar o qué no. La idea es que sólo tengas una versión de jQuery, por ejemplo, puedes quitar las demás y luego poner el código completo de esta entrada que ya incluye una de las últimas versiones, con eso no deberías tener problemas.

      Saludos.

      Eliminar
    2. Ok, lo hice funcionar,,,en otro blog,,,Recuerdas el enlace que te pasé del slide??? pues tenía un scroll vertical y mas vídeos,,, ¿se puede eso hacer aqui?

      Eliminar
    3. El scroll a mí no me funcionó bien, pero si quieres inténtalo, el link está en la entrada del Coda Slider.

      Eliminar
  17. Hola, Potro. Me gustaría crear esa franja inferior de color en la que tienes puestos los créditos del blog. ¿Me podrías indicar cómo hacerlo?

    ResponderEliminar
    Respuestas
    1. Hola, mira desde el comentario #11 de esta entrada:
      http://ciudadblogger.com/2012/03/seo-en-las-imagenes-del-blog.html

      Eliminar
    2. Vaya, creía que había funcionado, pero me acabo de fijar de que debajo de la franja queda un pequeño espacio blanco que me gustaría que desapareciese. ¿Puedes echarle un vistazo a mi blog e indicarme qué tengo que hacer? Disculpa las molestias, Potro.

      Eliminar
    3. Sólo se ve así en Firefox, aun así cambia el bottom:0; por bottom: -1px;

      Eliminar
  18. Ola potro una cosa:
    Mira hay alguna forma de cambiar esto:
    DOnde pone abajo de todo del blog para ver mas entrendas que pone entradas antiguas se le podria cambiar en nombre por mas entredas?
    Gracias

    ResponderEliminar
    Respuestas
    1. Mira esta entrada:
      http://ciudadblogger.com/2009/07/personalizar-los-links-entradas.html

      Eliminar
    2. Gracias potro me a ayudado muco.

      Mira e estado mirando este post:
      http://ciudadblogger.com/2010/06/botones-para-compartir-de-blogger.html
      Y me gustaria saber si hay alguna fomra de hacer esos botones mas grandes que en otros blog aparecen y son mucho mas grandes.
      Un saludo

      Eliminar
    3. No que yo sepa Tutto. Cualquier otra duda sobre ese tema haz la pregunta allá para no desviarnos del tema de esta entrada.
      Saludos.

      Eliminar
  19. Hola, como haces para ponerla exactamente como la tienes en el blog de prueba?
    Cuando lo hago en el mio me sale en vertical y, cuando le das a un video sale arriba del todo.
    ¿Que hago?

    ResponderEliminar
    Respuestas
    1. Tendría que verlo puesto en tu blog para saber qué anda fallando.

      Eliminar
  20. Hola Potro, gracias por tus artículos. Te quería comentar que mi blog, a la hora de cargarse cambia el diseño de las letras 3 veces hasta fijarse las seleccionadas en la plantilla de diseño, no se si habría una manera fácil de corregirlo.
    http://sobrarbeporeltejado.blogspot.com.es/

    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Edu, he entrado a tu blog, lo he cargado 4 veces y en ninguna ocasión me ha cargado otro tipo de letra para después cambiarse, desde el momento que abre me cargan las que están.

      Eliminar
  21. Hola me encanta!!!Dos dudas: En un gadget que puse abajo sale estupendo.
    Porqué no me sale en la página estática?Por el tamaño?Es que me gustaría ponerlo en una página.Cómo hay que hacerlo?
    Dos de los videos no son youtube son vimeo,modifique las URL (youtube por Vimeo) pero al meter el Id de vimeo que son solo números no me lo muestra.O es porque solo sirve para youtube.
    Muchas gracias

    ResponderEliminar
  22. Hola Potro. Tengo un problema...(
    Mira, tengo varios gadgets en la portada de mi blog, y los que son los ultimos en la parte de entradas se sobresalen al otro area que esta bajo suya, entonces queda fatal y no se porque.(((
    -----------------------------------------------------------------
    Mira como queda: http://prntscr.com/irjjj
    -----------------------------------------------------------------
    Este es mi diseño de elementós: http://prntscr.com/irin6
    -----------------------------------------------------------------
    Este es mi blog: http://steam-play-secondary.blogspot.com/
    -----------------------------------------------------------------
    Porfavor ayudame.((( Plis tio.. no se que pasa, ni que hacer.
    Gracias y saludos.

    ResponderEliminar
    Respuestas
    1. Hola Admin, no sé si lo habrás quitado, pero entré y no vi el gadget que muestras en la imagen.

      Eliminar
    2. Si, lo quite./ lo siente por hacer una alarma falsa.)
      Pero la solucion era tan facil como ponerle un "margin-bottom" al ultimo gadget.) Igualmente gracias.) Saludos.

      Eliminar
  23. Hola de nuevo Potro:Ya he conseguido que se vean tambien los videos de "vimeo"pero lo que no logro es ponerlo en la página estática.Cómo modifico el tamaño para ponerlo en la página y no en un gadge de abajo como lo tengo?Puede hacerse? Gracias

    ResponderEliminar
    Respuestas
    1. Yo lo veo en todas partes, tanto en la portada como en las páginas aparece hasta el final del blog.

      Eliminar
  24. ola potro, soy un fan de tus consejos, te quisiera hacer 2 preguntas
    1- hiciste el diseño de esta pagina con artistter?
    2- tu bandeja de gmail siempre esta superhiper llena de mensajes?
    grasias potro

    ResponderEliminar
  25. hola potro soy fan de tus consejos, quisiera hacerte 2 preguntas
    1- hiciste el diseño de este blog con artistter?
    2- tu bandeja de entrada de gamail esta supermegahiper llena siempre?
    gracias potro!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Esneider. No, la plantilla la hice desde la Edición HTML de forma "rústica" agregando códigos, etc.
      Mi bandeja de correo sí, siempre está llena, aunque curiosamente no uso Gmail, sigo con Hotmail desde hace años :P

      ¡Saludos!

      Eliminar
  26. Hola potro:
    Como puedo quitar este icono para que no aparezca en páginas... aquí te dejo la imagen...
    https://dl.dropbox.com/u/23889866/Problema/Problema.png
    lo que esta rodeado de rojo es lo que quiero quitar...
    blog: www.pequemundossims.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Antonio, ese es el autor de la entrada, localiza el código del autor y enciérralo en una condicional para que sólo sea visible en las entradas individuales:
      http://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html
      http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

      Eliminar
    2. Hola Potro:
      Quiero que la imagen del autor aparezca en las portadas y en las entradas individuales. Pero no se que elegir de condicionales. ¿Cual eligo? He elegido "Mostrar /ejecutar un elemento en todas las páginas MENOS en las páginas estáticas" pero la imagen del autor y del comentario no aparece en la portada ¿Que hago?

      Eliminar
    3. Esa es la condicional correcta, pero revisa que el código no tenga alguna otra condicional que quizá ya tenía por defecto.

      Eliminar
    4. Hola potro:
      Pues que va no me funciona lo he revisado y todo y creo que lo he puesto en su sitio aquí te dejo una imagen lo que esta entre parentesis es lo que he añadido de condicional... ¿Esta bien?

      https://dl.dropbox.com/u/23889866/Problema/imagen%20autor.png

      Eliminar
    5. Las condicinoales jamás van en los estilos, siempre se ponen antes de </head>, en la entrada sobre las condicionales se menciona eso, de hecho al final hay un ejemplo de cómo se aplican.
      Saludos.

      Eliminar
  27. Hola Como estas?
    Genial,prefiero esto para el Blog de Rock y el de Tokio.:-)

    Te aviso para ver que tal quedo..:-)

    tengo los 3 blogs abandonados por el Halloween.

    Potro,una entrada con gidgets navideños? estoy buscando y no consigo uno que me guste..uno en el que uno pueda ponerle una imagen a su gusto...
    besitos..

    ResponderEliminar
  28. Hola Como estas?
    Genial,prefiero esto para el Blog de Rock y el de Tokio.:-)

    Te aviso para ver que tal quedo..:-)

    tengo los 3 blogs abandonados por el Halloween.

    Potro,una entrada con gidgets navideños?

    Una cuenta regresiva.

    Estoy buscando y no consigo uno que me guste,uno en el que uno pueda ponerle una imagen a su gusto...o que tenga a San Nicolas,el arbolito o el niño Jesus.


    besitos.

    ResponderEliminar
    Respuestas
    1. Hola Wanda, en la categoría "Festividades" hay algunas cosas de Navidad, pero contadores no, esos los puedes ver en la categoría "Contadores", quizá puedas adaptar uno de ellos con la fecha de Navidad y cambiarle la imagen.

      Besos.

      Eliminar
  29. Hola potro:
    Con que servicios subes las imágenes para que te vaya más rapido? he visto que tu cabecera lo has subido a traves de "googleusercontent" ese me puede recomendar?

    ResponderEliminar
    Respuestas
    1. Las de la plantilla las subo directamente a Picasa, lo que pasa es que uno de sus servidores es googleusercontent, por eso ves ese nombre en la URL ;)

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

    ResponderEliminar
    Respuestas
    1. Hola Ruyman, lo que sucede es que cuando has puesto el código de los estilos eliminaste una llave de cierre } del código que está arriba, por eso no funciona:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Pd. He eliminado el comentario por el aviso que está al final.
      Saludos.

      Eliminar
  31. ¿Sabes donde encontrar el sitio donde pasaban estos letreros (como el del blog solcito-perritos.blogspot.com)? Pues le doy a myflashfetish y entra a mixpod, donde no están. También había un sitio donde te daba varios como efectos o brillos para añadir en la barra de tu blog, a partir de un HTML y pegarlo como gadget.
    Ah! Tengo un problemita, para el intro del blog quiero cambiar el color de fondo, pongo el código de color rosa (lo saque de aqui) pero se sigue viendo negro :/
    Siento las molestias y gracias por la ayuda

    ResponderEliminar
    Respuestas
    1. Parece que el sitio de los banners en flash ya no funciona, siempre redirecciona a Mixpod.
      Para el color de fondo debes cambiar esto:
      #000

      Por el código del color que quieras.
      Saludos.

      Eliminar
  32. Disculpa que no tenga que ver con el tema de post pero necesito ayuda urgente... Gracias por la atencion....
    Potro un favor me puedes decir como poner la opcion de zoom en las entradas de blogger para juegos flash, hace tiempo estoy buscando esa informacion pero hasta ahora no encuentro con nada, mira como estas paginas http://www.juegosjuegos.com/jugar-juego/playing-fire.html y esta http://www.juegos.com/juego/bubble-shooter.htm... este es mi blog http://juegosgratisgo.blogspot.com/ y no consigo ponerle esa opcion de ZOOM a los juegos flash que tengo... Por favor necesito ayuda....

    ResponderEliminar
    Respuestas
    1. No conozco el script que usan Jean Carlo, en cuanto tenga algo de tiempo lo pruebo.
      Saludos.

      Eliminar
    2. Ok Gracias por la respuesta, y esta genial tu blog es de mucha ayuda... estaré atento a tus publicaciones.

      Eliminar
  33. Hola ciudad blogger, con esto puedo preparar una entrada con varios video?

    ResponderEliminar
    Respuestas
    1. Hola Jose, no he intentado ponerlo en una entrada pero en teoría sí debe poderse hacer, sólo sería cuestión de pegar el último código en la entrada estando en la pestaña HTML y una vez que lo pegues NO cambiar a la pestaña Redactar.

      Eliminar
  34. Hola Potro. Genial APorte, otra vez!!

    Lo he añadido y no me ocasiona problemas. Lo que me gustaría es poner el slider con un ancho de 1000 px. Me puedes decir como hacerlo? He ido a width y lo he puesto pero no me lo modifica...

    ResponderEliminar
    Respuestas
    1. Hola Xavi, si quieres cambiar el tamaño del slider deberás modificar el width:765px que es el ancho de todo el contenedor; el height:350px que es el alto; el width:460px que es el ancho del área de los videos; el width:300px y width:290px que son el ancho del contenedor de las miniaturas y los títulos.
      Después de eso tendrás que cambiar todos los width="460" y height="345" del último código que son el ancho y alto de los videos.

      Eliminar
    2. Ostras, pues no se modifica...Los he cambiado todos y sigue igual. Alguna sugerencia?

      p.d Tengo otros sliders puestos en el blog...

      Eliminar
    3. Así es como se modifica Xavi, revisa que todos tus valores terminen en px y al final haya un punto y coma.

      Eliminar
    4. Nada Potro..no lo consigo. Modifico los tamaños y no hay manera. ¿como quedaría el código? Es mucho pedir que me digas como quedaría el código?

      Puedes echarle un vistazo en nurocks.com abajo...

      Eliminar
    5. Es que no va a funcionar si no modificas todo lo que te he mencionado, sólo modificaste el primer valor, el resto lo dejaste igual. Si sigues las indicaciones que te he dado no deberá darte problemas, pero hay que hacerlo completo.

      Eliminar
    6. Vamos a ver...las medidas que quiero para el recipiente total es 918x420

      Entonces, cambio el 765 por el 918, y el 350 por el 420, no?

      Y el resto, como los modifico??

      Eliminar
    7. El resto tendrás que aumentar los valores y distribuirlos proporcionalmente, un forma "rústica" de hacerlo es irle cambiando los valores y dar Vista Previa, así podrás ver si debes ponerle un valor más alto o más pequeño.

      Eliminar
  35. Hola potro... como hago para ponerle por ejemplo un color de atras redondeado a por ejemplo las entradas antiguas o lo que yo quiera?

    ResponderEliminar
    Respuestas
    1. Hola AgustinBlogger, depende del elemento que sea, un color de fondo es sólo así:
      background:#ccc;

      Si además quieres que tenga bordes redondeados deberás poner debajo esto:
      border-radius:20px;

      Algunas veces necesitará que tenga un alto y ancho especificado, por ejemplo:
      width;100px;
      height:100px;

      Eliminar
  36. ¿Cómo se personaliza el mensaje para agregar un comentario (como tú tienes con las flechitas)? He visto que en la configuración no acepta div's, span's, p's, etc. ¿Se tiene que agregar directo en la plantilla?

    Saludos.

    ResponderEliminar
  37. Hola, actualmente estoy creándome un blog de artesanía, y me gustaría poder hacer algo así: http://cssheaveni.blogspot.com.es/, es decir, que las entradas se puedan ver cómo una viñeta de cómic. Sé que con las nuevas plantillas de blogger puede hacerse, pero a parte de que no me gusta que el visitante pueda cambiar el diseño de esta por el menú ése que sale, tiene muy pocas posibilidades de diseño...
    ¡Espero que puedas ayudarme!

    ResponderEliminar
    Respuestas
    1. Hola airehada, puedes crear un estilo magazine a tu plantilla, sólo que implica un poquito más de trabajo, pero se puede:
      http://ciudadblogger.com/2010/08/entradas-resumidas-estilo-magazine-1.html

      Eliminar
  38. Que tal potro buenas tardes mi amigo necesito un consejo webmaster con un detalle,veras quiero colocar una barra o tipo menú en posición vertical y este ubicada a la derecha que ocupe todo el alto del blogg ya he buscado y solo encuentro en posición horizontal y existen menús en vertical pero dentro de un gaget lo cual no quiero, quiero que este afuera,me puedes dar una pequeña guía de que código utilizar o como hacerlo? gracias potro espero tu respuesta

    ResponderEliminar
    Respuestas
    1. Hola HANNIBAL, el código básico sería este, antes de ]]></b:skin> pegarías los estilos:
      #mibarra {
      width:30px;
      height:100%;
      position:fixed;
      top:0;
      right:0;
      background:#000;
      }

      Luego antes de </body> la estructura:
      <div id="mibarra"></div>

      Dentro de ese DIV pondrías lo que quieras, pero, un menú se complicará si tienes la barra del lado derecho.

      Eliminar
    2. alguien me dife como poner mi blogger trasparente que se vea la imagn de fondo

      Eliminar
    3. Gracias potro ya lo voy a probar ,bueno un Menu en si no es tengo otras ideas para colocar en la barra :)

      Eliminar
    4. Amigo ya lo probe y hay un problema me aparece en la parte inferior bien abajo, como le hago???

      Eliminar
    5. Revisa los estilos que estén bien colocados, que no hayas eliminado ningún punto y coma ; ni ninguna llave de cierre }

      Eliminar
  39. como poner mi blogger trasparentee que se vea la imagenes de fondo porfavor ayudenme

    ResponderEliminar
    Respuestas
    1. Hola RAFAEL, ¿a qué te refieres con ponerlo "transparente"? ¿en cuál blog?

      Eliminar
  40. Hola primera ves que comento pero quiero dales las gracias por que e aprendido mucho y sigo aprendiendo mas y muy buen post pero me gustaría saber algo como puedo haser para pasar de entrada usando las flechas de dirección del teclado les agradezco de antemano

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario Claudio, aunque lo que pides no es posible, al menos yo no conozco una manera de hacerlo.
      Saludos.

      Eliminar
  41. Hace poco quise crearme un blog de blogger, pero no me dejaba si no me hacía una cuenta de gmail. El caso es que al hacérmela, en el perfil de blogger sale mi cuenta de gmail con el nombre y apellido, en vez del blog, con el nombre de usuario que yo quiera.

    Podrías explicarme o hacer una entrada con este tema?

    gracias de antemano por este blog.

    ResponderEliminar
  42. Hace poco quise crearme un blog de blogger, pero no me dejaba si no me hacía una cuenta de gmail. El caso es que al hacérmela, en el perfil de blogger sale mi cuenta de gmail con el nombre y apellido, en vez del blog, con el nombre de usuario que yo quiera.

    Podrías explicarme o hacer una entrada con este tema?

    gracias de antemano por este blog.

    ResponderEliminar
    Respuestas
    1. Hola Raul, todas las cuentas nuevas incluyen un perfil de Google+ el cual se vincula como perfil de tu blog, en Google+ siempre se usa el nombre y apellido del usuario. Si no quieres tener una cuenta en Google+ puedes eliminarla:
      https://www.google.com/settings/plus
      (ver hasta el final)

      Haciéndolo ya deberás tener sólo el perfil de Blogger y en él sí deberías poder cambiar el nombre por algún otro.

      Eliminar
  43. Muchas Gracias potro ers un makina , muchas veces pruebo cosas de este blog y a veces no me funcionan , preguntare mas a menudo , porque soy un principiante y siempre fallo en los codigos , pero con tu ayuda se acavaron los problemas , jejejej Un saludo

    ResponderEliminar
  44. oye potro me intereso q al ver en el demo te mando directo a un html sin nada me de template me gustaria saber si podria usar algo asi para poner una imagen y redireccionar una descarga de un archivo... y que si esta no se efectua se le agrege algo como " si su descarga no inicia presione aqui" Gracias Por Tu Ayuda

    ResponderEliminar
    Respuestas
    1. Eso me suena a PHP y de ese lenguaje no sé nada Carlos, no sé qué tipo de códigos usen los sitios que tienen esas características en sus descargas.

      Eliminar
    2. Si En PHP lo e logrado con una redireccion.. pero creo q en blogger no podremos :D Gracias por tu ayuda hermano!

      Eliminar
  45. El comentario del día. Excelente!!! Funciona de maravilla. También deseaba como alguien comentó poner más videos pero ya veo que éso sería demasiado... así que puedo ir cambiando manualmente los videos a medida que hago uno nuevo.
    Gracias, Potro.

    ResponderEliminar
  46. Hola Potro,,, he encontrado algo que me ha solucionado todo el tema de vídeos y rapidez,,,Una lista de videos con todas la facilidades para blogger, http://embedr.com Puedes verla en funcionamiento en http://www.muraldecoracion.com/p/videos.html Saludos!!

    ResponderEliminar
    Respuestas
    1. Se ve bien Javier, el único problema es que es en flash, así que en algunos dispositivos móviles, tablets y navegadores no se verá.
      Saludos.

      Eliminar
    2. Ah!! Pues la verdad que no lo pensé ( es lo que tiene ser un aficionado ) De todos modos por la cuestión de tamaño y carga de vídeos tendré que dejarlo a falta de otra sugerencia que me lo permita ya que con éste fue una limitción para mi pero un gran Post!! Oye,,, ¿sabes si hay algún tipo o algo que permita la visión en tablets y/o navegadores?

      Eliminar
    3. perdona,,, es que se me olvidó decir una cosa,,, me refiero que de no haberlo...¿existe algún botón que se pueda colocar al lado o encima de la lista de vídeos que diga y sea algo así como " VER CON GOOGLE CHROME"?

      Eliminar
    4. Desde Blogger en la sección de Plantilla puedes elegir si quieres que haya una versión móvil de tu blog, si la tienes activada cuando se ingrese desde un móvil cargará esa versión con un enlace para ver la versión web también.

      Eliminar
    5. Ok potro,,, he mirado desde otros navegadores y se ve bien,,, y una tableta de un amigo tb se veía... Gracias como siempre por todo,,, lo dije también como aporte para ti. <buen fin de semana!!

      Eliminar
  47. Muchas gracias Potro!! la galería de videos esta super, me costo un poco de trabajo instalarla pues soy novato en esto de los blog, agradecería si me das tu opinión acerca de mi blog.

    http://impermeabilizador.blogspot.com/

    bye bye

    ResponderEliminar
    Respuestas
    1. Las opiniones siempre me las reservo Juan, pero te agradezco mucho tu comentario y visita, ¡saludos!

      Eliminar
  48. Hola Pues soy nuevo aca pero realmente siguiendo tus consejos wow pude crear mi blog, pero la duda que tengo es, si fuece posible quitar el area de titulo de video y descripcion, el tamaño que lo quiero poner es width:600px; pero al darle vista previa me doy cuenta que ya no aparecen las pequeñas imagenes de lado derecho, dime amigo si s epodría dejarlo en 600px sin que se vea mal?

    ResponderEliminar
    Respuestas
    1. Hola Uncion Stereo, la forma más sencilla es que cambies el width:300px; que está dentro de #slidervideo-tabs { por width:72px;
      Y luego que agregues esto:
      .listcontainer, .ui-widget-content {width:72px !important;}

      Claro que también deberás cambiar el ancho del contenedor principal a los 600px que deseas.
      Saludos.

      Eliminar
  49. hOla potro estoy comenzando una web de peliculas y quisiera saver como puedo ponerle tabs alos video osea asi como opcion 1-2-3-4 ect... en la misma entrada si as echo algun tutorial pasame el enlace si no podrias aser uno para ver como acerlo Desde Santo domingo RD

    ResponderEliminar
    Respuestas
    1. Hola toltolo, mira esta entrada, puedes usarlo también dentro de un post:
      http://ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html

      Eliminar
  50. Potro, te hago una consulta... (nada que ver con esta entrada) ¿puede ser que en blogger ya funcionen los gif animados sin hacer nada raro?

    Tenía uno en uno de mis blogs, lo dejé aunque estaba estático porque igual me servía...y hoy lo encuentro animado.

    ResponderEliminar
    Respuestas
    1. Siempre han funcionado Andrés, pero sólo subiéndolos desde Picasa, no sé si ya funcionen subiéndolos desde Blogger, habría que hacer la prueba :)

      Eliminar
  51. Hola Potro, muy buen post.

    Una preguntita:
    Estoy empezando con un blog y ... ¿por que me sale asi? XD

    Espero que me puedas ayudar. Gracias.

    Mira esta foto: http://i46.tinypic.com/300ry53.png

    ResponderEliminar
    Respuestas
    1. Porque lo has puesto en la sidebar y el ancho de la sidebar es menor que la galería, mejor ponla arriba de las entradas o debajo de la cabecera.

      Eliminar
    2. Oye Potro, hice lo que me dijiste y sigue igual :(

      Espero que puedas ayudarme. GRACIAS.

      Imagen
      http://i45.tinypic.com/2llbr6d.png

      Eliminar
    3. Según parece (digo parece porque sin ver el blog sólo puedo suponer) tienes un problema con la colocación de los estilos, podría ser que estás eliminando una llave de cierre }
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    4. gracias Potro, ya lo solucioné.

      El problema nose cual era, pero lo que hice es empezar una plantilla de nuevo y agregarlo todo y me funcionó.

      La proxima vez te dejare el link de mi blog en el comentario.

      GRACIAS DE NUEVO :) TU BLOG AYUDA A MUCHA GENTE Y ERES EL MEJOR XD

      Eliminar
  52. Potro hay manera de que los otros videos no salgan al lado si no debajo del video y que al pasar el mouse se muevan los videos para que muestre los otros videos. ???

    ResponderEliminar
  53. inserte la galeria pero no se ven los videos :(

    http://sportsolutionsargentina.blogspot.com.ar

    ResponderEliminar
    Respuestas
    1. Es por dos cosas, porque en el primer video pusiste esta URL: http://youtu.be/Fmi26FDAxbo
      Y porque usas Scriptaculous, en la entrada se habla sobre ello y dónde hay que aplicar los cambios.

      Eliminar
    2. Groso!!! Sos un capo!!! El mejor lejos... Gracias... y la próxima prestaré más atención!

      Eliminar
  54. Buenas potro estoy añadiendo la galeria de videos todo bien el 1º video que hay por default en la galeria se me reproduce pero pongo otro en la seccion 2 y no me funciona me lleva a la pagina de blogger ... no se que tengo que hacer podrias decirme que tengo que hacer para que funcione

    ResponderEliminar
  55. Ups.. ya lo vi que lo tienes puesto como hacerlo se me fue la cabeza y no lo vi i'm Sorry jajaj gracias de todas formas

    ResponderEliminar
  56. una prgunta yo ya he puesto un slider de imagenes en mi blog- puedo poner este de videos debajo sin perjudicar el de imagenes

    ResponderEliminar
  57. una pregunta! yo ya he puesto un slider de imagenes automatico de entradas arriba puedo ponerlo el de videos sin perjudicar el ya mencionado

    ResponderEliminar
    Respuestas
    1. Sí, pero si el slider usa jQuery no debes repetir el script, al final de la entrada hay unos enlaces que hablan sobre ese tema, de cualquier forma poniendo la galería podrás saber qué tan necesario es aplicar esos cambios o no.

      Eliminar
  58. HOLA POTRO. Perdona pero soy nuevo en esto. Puedo incluirse esta galeria en una página que no sea la principal? lo he intentado y creo que no me slae bien. gracias!!!

    ResponderEliminar
    Respuestas
    1. Mira esta entrada, ahí verás cómo ocultarlo donde desees:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Saludos.

      Eliminar
  59. hola de nuevo!! instale este slider y me salio bien.. pero quiero colocarlo en un espacio de otras dimensiones... podrias ayudarme con un ancho de 470..... lo he intentado esde la plantilla pero no me sale..por favor

    ResponderEliminar
  60. hola!! sera mucho pedir que que me proporciones las medidas proporcionales a un widget de 470 de ancho, por que lo he intentado y no me sale o publicalo el slider en un ancho menor, ya que el problema que tengo es que cambio todo pero la bbara donde estan las vistas previas de los videos se colocan abajo y no suben al lado del video principal...........por favor publica el codigo para un slider de 470....te lo agradeceria

    ResponderEliminar
    Respuestas
    1. No edw, sino tendría que modificar el código para todos y nunca acabaría. Hazlo como se indica en ese comentario, sólo revisa que estés cambiando todo lo que ahí se menciona, si te da algún problema dime en cuál blog has puesto las modificaciones y con gusto reviso el código.

      Eliminar
  61. potro como ponerla en el inicio de mi pagina, sobre las entradas nuevas que he publicado

    ResponderEliminar
    Respuestas
    1. Sólo arrastra el gadget justo arriba del gadget de entradas del blog.

      Eliminar
  62. excelente ayuda Potro!
    mira como quedo mi blog ... http://proyectosconstruccionesenperu.blogspot.com/

    gracias.. y te debo una!

    ResponderEliminar
  63. Hola Potro. UN problema con el que me voy encontrando últimamente es que, aun introduciendo los códigos bien, no me aparecen las miniaturas en la parte derecha. Alguna razón y/o solución?

    Mil gracias!

    El Blog es www.nurocks.com

    ResponderEliminar
    Respuestas
    1. Hola Xavi, la URL no está del todo bien en todos los casos, por ejemplo esta:
      //i2.ytimg.com/vi/BOr_fMznk6E#!/default.jpg

      Debe ser así, sin el signo de gato y de exclamación:
      http://i2.ytimg.com/vi/BOr_fMznk6E/default.jpg

      Eliminar
  64. Excelente trabajo!!
    Cuando puedas date una vuelta por mi blog: http://mispulga.blogspot.com.ar/

    ResponderEliminar
  65. gracias!!!!! me sirve para hacer una seccion de gameplays en mi blog! :33

    www.solosurvivalhorror.com.ar

    ResponderEliminar
  66. Hola Potro! Te felicito por tu blog.Una pregunta: si quiero poner 2 o más galeria de video en gadget distintos en manera de ocultar la que no me sirve cambiando entradas, como cambia el codigo para no estar las galerias en conflicto? Es decir , haciendo clic en una foto de la segunda galeria se arranque el video corespondiente y no lo de la primera galeria?
    Para mi seria de primaria importancia encontrar una solucion! Gracias y espero que tenga tiempo para contestar! Saludos de un admirador de tu blog!

    ResponderEliminar
    Respuestas
    1. Desconozco cómo pueda hacerse lo que deseas, me suena complejo :(

      Eliminar
  67. Como podria tener mas de 5 videos en la misma galeria y ponerle una barra ? Gracias.

    ResponderEliminar
  68. Como podria tener mas de 5 videos en la misma galeria y ponerle una barra ? Gracias.

    ResponderEliminar
    Respuestas
    1. Se le puede agregar más, pero eso implicaría cambiar las dimensiones de todo, de los dos contenedores y de los videos, además se tendrían que añadir otras secciones de código, lo que haría un poco lenta la carga del blog.

      Eliminar
  69. Hola Potro:

    La galería me quedó perfecta, sin embargo tengo una duda es posible que al ingresar a la página en el área de los vídeos ya esté uno de ellos listos para darle play, y así no se vea el recuadro negro inicial en esta área. Mi blog: la12cardenal.blogspot.com

    Gracias por tu ayuda!

    ResponderEliminar
    Respuestas
    1. De hecho se supone que debería mostrar el primer video siempre, no sé porqué a veces no lo haga :/

      Eliminar
    2. Es decir que no se puede hacer nada adicional? :S

      Eliminar
    3. No realmente, no sé si sea por algún otro script que quizá esté interfiriendo con este.

      Eliminar
  70. potro como hago para cambiarle de tamaño del ancho es que el que esta es muy grande necesito uno mas pequeño

    ResponderEliminar
  71. Uuuuuuf!!! muchos comentarios y dudas... Saludos potro nuevamente felicidades por tu gran conocimiento y muchas gracias por tu ayuda en general... con respecto a este post, estoy tratando de darle nueva vida a mi blog y me gusto la idea de poner enlaces de videos, en un blog de pruebas que tengo lo aplique pero no me salen completos los titulos y de las descripciones no sale nada... podrias comentarme cual pudo haber sido mi error? te dejo un enlace para que observes... http://borre2196.blogspot.mx/ Gracias por la atención!!!

    ResponderEliminar
  72. Hola que tal Potro.

    Una pregunta, habrá alguna forma de que la galería tenga reproducción automática?

    Gracias y felicidades por tu blog, me ha ayudado mucho.

    ResponderEliminar
  73. GRACIAS......ACABO DE HACER MI BLOG Y NECESITABA ESTA AYUDA..
    Y SI ME SERVIO..... me ha ayudado mucho.

    ResponderEliminar
  74. Hola! Tengo una duda. Ya intente varias veces poner la barra de vídeos, pero cuando ya esta todo listo, el Slider deja de funcionar y se queda en blanco. Y sobre lo de Jquery ya intente también, aunque mucho no lo entendí. Qué puedo hacer? D:

    ResponderEliminar
  75. Hola Potro, he visto esto y me parece interesante, sin embargo, me gustaría saber si lo puedo aplicar desde cualquier otra pagina.
    sin embargo saber si se puede que solo saliera la pantalla sin que salgan los vídeos a seguir. Ademas de contemplar la posibilidad de agregar al menos una lista de 15 vídeos, y que se pueda colocar desde una ► Plantilla | Edición de HTML ◄ .... ademas de esto si existe la posibilidad de que esta pantalla, pueda tener algún tipo de código de restricción de edad para acceder a ella?
    De antemano muchas gracias por todos tus aportes!

    ResponderEliminar
  76. Hola Potro, Primero que nada, felicitaciones por tu labor! Mi pregunta seria... necesito simplemente la reproducción de 10 ó más vídeos consecutivos, sin que me muestre vídeos relacionados. los vídeos son de otra pagina diferente a la de youtube, pero tienen su ID correspondiente.
    Yo no necesitaría color de fondo y esas demás cosas, solo que me generen la pantalla del tamaño que yo le coloque y me haga la correspondiente reproducción del listado seleccionada! Gracias ;)

    ResponderEliminar
    Respuestas
    1. Lo ignoro, grillo bot, no creo que este reproductor tenga la posibilidad de hacer todas esas modificaciones.

      Eliminar
  77. hola potro como hago para poner la galeria de videos en dreamweaver, x favor ayudame!!!

    ResponderEliminar
  78. hola potro como hago para colocar esta galeria de videos en dreamweaver ayuda x favor!!!

    ResponderEliminar
    Respuestas
    1. No sé decirte, todo lo que hay aquí es probado únicamente en Blogger.

      Eliminar
  79. como hago para que la galeria de video no me salga siempre en otra boton del menu es decir yo tengo en mi menu (Inicio, Quienes somos.. etc) que tengo que hacer para que no me salga lo de inicio en quienes somos

    ResponderEliminar
    Respuestas
    1. Usa condicionales:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

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

    ResponderEliminar
    Respuestas
    1. No veo alguna galería ahí, a menos que te refieras al tabview:
      http://ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html

      Pd. He eliminado tu comentario por el aviso que está al final.

      Eliminar
  81. no me reproduce los vídeos hermano, se ven y todo en la galeria, pero cuando hago click en el vídeo no es como si no hiciera click a nada

    ResponderEliminar
    Respuestas
    1. ¿Tienes algún script que impida copiar texto de la página? si es así entonces deberás quitarlo para que los videos funcionen.

      Eliminar
  82. Me gusta esa forma de poner videos, quisiera ponerlo a mi blog, el problema es donde: http://ciudadwisp.blogspot.com

    ResponderEliminar
  83. Hola del Potro, primero felicitarte por tu blog...
    He seguido los pasos y quedo todo muy bien, estuve viendo como le puedo colocar al lado de la galeria de videos publicidad de adsense, pero siempre me sale arriba o abajo.

    Si me pudieras colacobar te agradeceria mucho ----> showtvcolombia.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola, entré a tu blog pero no he visto puesta la galería.

      Eliminar
  84. Oloa Potro Como haria para que el Slider se pasara de un video a otro Muchas Gracias

    ResponderEliminar
  85. Buenas Tardes Potro Una pregunta ando buscando algo parecido a eso, pero mi idea es que quiero incrustar varios videos maximo 5 , de servidores como Played, Tumi, Nowvideo etc y no de youtube como le hago o que codigo puedo usar, desde ya muchas gracias. es para blogger

    ResponderEliminar
    Respuestas
    1. Es igual, tendrías que cambiar esta parte del código:
      <iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_1" frameborder="0" allowfullscreen></iframe>

      Por la del iframe de tu video según sea el caso.
      Y luego cambiar la URL de esta parte:
      <img src="//i2.ytimg.com/vi/ID_video_1/default.jpg" class="thumb-vid" />

      Por la de la miniatura de tu video.

      Eliminar
  86. Gracias por responder potro, le intente y no me sale, me sale como enlistado, quiero metes estos 5 videos

    http://played.to/ew9ozjmu91cs
    http://played.to/7ddx6zqj2n82
    http://played.to/wvdmmgd0gnuz
    http://powvideo.net/e5ypcjynyhxj
    http://played.to/7bafc8il1yt4

    Hice todos los paso y sin conseguir algo parecido al que das como ejemplo, no se de programación pero le hice el intento

    Gracias Potro que DTB

    ResponderEliminar
    Respuestas
    1. No hace falta saber de programación, sólo necesitas cambiar el IFRAME que muestra el video de YouTube por el IFRAME que muestra el video que quieras. Ahí mismo en cada enlace verás que dice Get Embed Code, en esa parte te dará el código del IFRAME que necesitas.

      Saludos.

      Eliminar
  87. Que tal, buen tutorial.
    No habría problema si sólo lo colo en páginas para poder poder la lista de videos de mi cursos que realizo.

    ResponderEliminar
    Respuestas
    1. Hola MikeOnline, claro que sí, puedes usar condicionales para elegir dónde no quieres que se muestre:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Eliminar
  88. lo volvi a arreglar y no sale ningún error en los estilos, lo unico es que aparece el recuadro de la galaria y esta todo negro y no se ven las miniaturas de los videos. Sera que tiene que ver con el background? yo no modifique los estilos, los copie tal cual. Saludos espero que me puedas ayudar

    ResponderEliminar
  89. El problema es que el ancho de mi pagina no es de 765px, y cuando intento bajarlo, no aparecen las miniaturas. Mi pregunta es, Como hago para bajarle las dimensiones?

    ResponderEliminar
  90. [img]https://atriluniversal.com.ve:2083/cpsess6430248194/viewer/home%2fatriluni%2fpublic_html%2fimg%2fpost/cap.bmp[/img]

    ResponderEliminar
    Respuestas
    1. Hola otra vez Leonardo, en este blog no tengo habilitadas las imágenes en los comentarios. Para poder ayudarte es necesario que vea el blog donde has puesto la galería y así poder revisar tu plantilla.
      Saludos.

      Eliminar

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

 
Ir Arriba Ir Abajo
I Ciudad Blogger