
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'/>Luego agrega los estilos antes de ]]></b:skin>
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWVwey04Ooy7fiPHvvMDM31a9dBB5qSN-WreufV38hUQ_a6I8NgcFIoT1kkaVJQDsiZ3r2GA4ma0j-ODS6jJfjtGmthlbwMYLk26MTBY4aJLC9TvNbhgdT_-7bg2oyoJNPF6nMDtCeHGg/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>
/* Galería de videosAhora en un elemento HTML/Javascript pega la estructura del slider, este gadget es el que pondrás debajo de la cabecera:
----------------------------------------------- */
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIQezRoMzWQpXD1q_4zw3fUWgwdQCRb_FYACXqjes1No8Xk008IznyBdFUKLk2XawRRuyZt2CzkAhuivxapunC8JUScfSKhhlNbM-edR0CvFZ5V-qePacHXi7e75RsGXqxRoilWepwtps/s0/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;}
<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.
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.
Potro... Esta excelente...!
ResponderEliminarMe interesa para ponerlo en el "HOME" de mi blog, pero aun no me decido para ponerlo!
Saludos!
Si te decides a ponerlo aquí podrás ver cómo mostrar la galería sólo en la portada.
EliminarSaludos.
o muy bien gracias por la información buen día :D
ResponderEliminarprimer comentario :)
ResponderEliminarmuy bueno he estado aplicando todo lo de tu sitio web en mi blog y se vee muy bien.
http://inmueblecolombia.blogspot.com
Que excelente publicación Potro, este post lo utilizaré, pues es muy bueno. gracias por compartirlo. Que tengas una buena noche... Saludos amigo. ^^
ResponderEliminarGenial!!
ResponderEliminarYa hacía falta esta publicación.
Gracias y saludos Potro!
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHola El Crack Loko, este es el que tengo de las más visitadas (con Analytics):
Eliminarhttp://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.
Espectacular!!!
ResponderEliminarPotro! Se le puede agregar mas videos, por que solo 5??
ResponderEliminarSe 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... al final, optaré por usar esta librería, veo que da bastante más juego que Scriptacoulous.
ResponderEliminarUn saludo y gracias de nuevo.
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.
EliminarSuerte :)
Ya era hora Tapestry ;)
EliminarGracias, buen aporte Potro!...
ResponderEliminarGracias!... Buen aporte Potro!... ;D
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola 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...
ResponderEliminarNo sé si tengo Scriptaculous o no,,, y si es así no sabría pegarlos. ¿sabes si es eso lo que me pasa?
ResponderEliminarNo 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.
EliminarSaludos!
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarUna 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
ResponderEliminarHola 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.
EliminarLo otro depende como qué tengas en mente, necesitaría saber más detalles de lo que quieres hacer.
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.
Eliminaro 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.
EliminarEsto se me ocurió por que yo cada que hay alguna festividad mundiál por ejemplo, diseño una portada a corde a la festividad.
Mira esta entrada para que veas cómo poner el botón "Me gusta" en las entradas del blog:
Eliminarhttp://ciudadblogger.com/2011/01/agregar-el-boton-me-gusta-de-facebook.html
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!!
ResponderEliminarSoy 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???
ResponderEliminarHola 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 ;)
EliminarEn 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.
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?
EliminarEl scroll a mí no me funcionó bien, pero si quieres inténtalo, el link está en la entrada del Coda Slider.
EliminarHola, 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?
ResponderEliminarHola, mira desde el comentario #11 de esta entrada:
Eliminarhttp://ciudadblogger.com/2012/03/seo-en-las-imagenes-del-blog.html
Muchas gracias.
EliminarVaya, 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.
EliminarSólo se ve así en Firefox, aun así cambia el bottom:0; por bottom: -1px;
EliminarOla potro una cosa:
ResponderEliminarMira 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
Mira esta entrada:
Eliminarhttp://ciudadblogger.com/2009/07/personalizar-los-links-entradas.html
Gracias potro me a ayudado muco.
EliminarMira 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
No que yo sepa Tutto. Cualquier otra duda sobre ese tema haz la pregunta allá para no desviarnos del tema de esta entrada.
EliminarSaludos.
Hola, como haces para ponerla exactamente como la tienes en el blog de prueba?
ResponderEliminarCuando lo hago en el mio me sale en vertical y, cuando le das a un video sale arriba del todo.
¿Que hago?
Tendría que verlo puesto en tu blog para saber qué anda fallando.
EliminarHola 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.
ResponderEliminarhttp://sobrarbeporeltejado.blogspot.com.es/
Saludos.
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.
EliminarHola me encanta!!!Dos dudas: En un gadget que puse abajo sale estupendo.
ResponderEliminarPorqué 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
Hola Potro. Tengo un problema...(
ResponderEliminarMira, 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.
Hola Admin, no sé si lo habrás quitado, pero entré y no vi el gadget que muestras en la imagen.
EliminarSi, lo quite./ lo siente por hacer una alarma falsa.)
EliminarPero la solucion era tan facil como ponerle un "margin-bottom" al ultimo gadget.) Igualmente gracias.) Saludos.
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
ResponderEliminarYo lo veo en todas partes, tanto en la portada como en las páginas aparece hasta el final del blog.
Eliminarola potro, soy un fan de tus consejos, te quisiera hacer 2 preguntas
ResponderEliminar1- hiciste el diseño de esta pagina con artistter?
2- tu bandeja de gmail siempre esta superhiper llena de mensajes?
grasias potro
hola potro soy fan de tus consejos, quisiera hacerte 2 preguntas
ResponderEliminar1- hiciste el diseño de este blog con artistter?
2- tu bandeja de entrada de gamail esta supermegahiper llena siempre?
gracias potro!
Muchas gracias Esneider. No, la plantilla la hice desde la Edición HTML de forma "rústica" agregando códigos, etc.
EliminarMi bandeja de correo sí, siempre está llena, aunque curiosamente no uso Gmail, sigo con Hotmail desde hace años :P
¡Saludos!
Hola potro:
ResponderEliminarComo 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
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:
Eliminarhttp://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html
http://ciudadblogger.com/2010/03/condicionales-de-blogger.html
Hola Potro:
EliminarQuiero 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?
Esa es la condicional correcta, pero revisa que el código no tenga alguna otra condicional que quizá ya tenía por defecto.
EliminarHola potro:
EliminarPues 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
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.
EliminarSaludos.
Hola Como estas?
ResponderEliminarGenial,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..
Hola Como estas?
ResponderEliminarGenial,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.
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.
EliminarBesos.
Hola potro:
ResponderEliminarCon 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?
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 ;)
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHola 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:
Eliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Pd. He eliminado el comentario por el aviso que está al final.
Saludos.
¿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.
ResponderEliminarAh! 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
Parece que el sitio de los banners en flash ya no funciona, siempre redirecciona a Mixpod.
EliminarPara el color de fondo debes cambiar esto:
#000
Por el código del color que quieras.
Saludos.
No conozco el script que usan Jean Carlo, en cuanto tenga algo de tiempo lo pruebo.
ResponderEliminarSaludos.
Hola ciudad blogger, con esto puedo preparar una entrada con varios video?
ResponderEliminarHola 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.
EliminarHola Potro. Genial APorte, otra vez!!
ResponderEliminarLo 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...
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.
EliminarDespué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.
Ostras, pues no se modifica...Los he cambiado todos y sigue igual. Alguna sugerencia?
Eliminarp.d Tengo otros sliders puestos en el blog...
Así es como se modifica Xavi, revisa que todos tus valores terminen en px y al final haya un punto y coma.
EliminarNada 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?
EliminarPuedes echarle un vistazo en nurocks.com abajo...
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.
EliminarVamos a ver...las medidas que quiero para el recipiente total es 918x420
EliminarEntonces, cambio el 765 por el 918, y el 350 por el 420, no?
Y el resto, como los modifico??
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.
EliminarHola potro... como hago para ponerle por ejemplo un color de atras redondeado a por ejemplo las entradas antiguas o lo que yo quiera?
ResponderEliminarHola AgustinBlogger, depende del elemento que sea, un color de fondo es sólo así:
Eliminarbackground:#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;
¿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?
ResponderEliminarSaludos.
¿Cuál mensaje con flechitas? o.O
EliminarQue 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
ResponderEliminarHola HANNIBAL, el código básico sería este, antes de ]]></b:skin> pegarías los estilos:
Eliminar#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.
alguien me dife como poner mi blogger trasparente que se vea la imagn de fondo
EliminarGracias potro ya lo voy a probar ,bueno un Menu en si no es tengo otras ideas para colocar en la barra :)
EliminarAmigo ya lo probe y hay un problema me aparece en la parte inferior bien abajo, como le hago???
EliminarRevisa los estilos que estén bien colocados, que no hayas eliminado ningún punto y coma ; ni ninguna llave de cierre }
EliminarHola airehada, puedes crear un estilo magazine a tu plantilla, sólo que implica un poquito más de trabajo, pero se puede:
ResponderEliminarhttp://ciudadblogger.com/2010/08/entradas-resumidas-estilo-magazine-1.html
como poner mi blogger trasparentee que se vea la imagenes de fondo porfavor ayudenme
ResponderEliminarHola RAFAEL, ¿a qué te refieres con ponerlo "transparente"? ¿en cuál blog?
EliminarHola 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
ResponderEliminarMuchas gracias por tu comentario Claudio, aunque lo que pides no es posible, al menos yo no conozco una manera de hacerlo.
EliminarSaludos.
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.
ResponderEliminarPodrías explicarme o hacer una entrada con este tema?
gracias de antemano por este blog.
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.
ResponderEliminarPodrías explicarme o hacer una entrada con este tema?
gracias de antemano por este blog.
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:
Eliminarhttps://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.
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
ResponderEliminarPuedes preguntar las veces que quieras :)
Eliminaroye 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
ResponderEliminarEso 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.
EliminarSi En PHP lo e logrado con una redireccion.. pero creo q en blogger no podremos :D Gracias por tu ayuda hermano!
EliminarEl 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.
ResponderEliminarGracias, Potro.
Gracias a ti por tu visita Laura, ¡saludos!
EliminarHola 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!!
ResponderEliminarSe ve bien Javier, el único problema es que es en flash, así que en algunos dispositivos móviles, tablets y navegadores no se verá.
EliminarSaludos.
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?
Eliminarperdona,,, 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"?
EliminarDesde 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.
EliminarOk 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!!
EliminarMuchas 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.
ResponderEliminarhttp://impermeabilizador.blogspot.com/
bye bye
Las opiniones siempre me las reservo Juan, pero te agradezco mucho tu comentario y visita, ¡saludos!
EliminarHola 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?
ResponderEliminarHola Uncion Stereo, la forma más sencilla es que cambies el width:300px; que está dentro de #slidervideo-tabs { por width:72px;
EliminarY 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.
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
ResponderEliminarHola toltolo, mira esta entrada, puedes usarlo también dentro de un post:
Eliminarhttp://ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html
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?
ResponderEliminarTenía uno en uno de mis blogs, lo dejé aunque estaba estático porque igual me servía...y hoy lo encuentro animado.
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 :)
EliminarHola Potro, muy buen post.
ResponderEliminarUna 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
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.
EliminarOye Potro, hice lo que me dijiste y sigue igual :(
EliminarEspero que puedas ayudarme. GRACIAS.
Imagen
http://i45.tinypic.com/2llbr6d.png
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 }
Eliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
gracias Potro, ya lo solucioné.
EliminarEl 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
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. ???
ResponderEliminarNo Jose :(
Eliminarinserte la galeria pero no se ven los videos :(
ResponderEliminarhttp://sportsolutionsargentina.blogspot.com.ar
Es por dos cosas, porque en el primer video pusiste esta URL: http://youtu.be/Fmi26FDAxbo
EliminarY porque usas Scriptaculous, en la entrada se habla sobre ello y dónde hay que aplicar los cambios.
Groso!!! Sos un capo!!! El mejor lejos... Gracias... y la próxima prestaré más atención!
EliminarBuenas 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
ResponderEliminarUps.. 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
ResponderEliminarSupongo que ya lo has resuelto entonces :)
Eliminaruna prgunta yo ya he puesto un slider de imagenes en mi blog- puedo poner este de videos debajo sin perjudicar el de imagenes
ResponderEliminaruna pregunta! yo ya he puesto un slider de imagenes automatico de entradas arriba puedo ponerlo el de videos sin perjudicar el ya mencionado
ResponderEliminarSí, 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.
EliminarHOLA 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!!!
ResponderEliminarMira esta entrada, ahí verás cómo ocultarlo donde desees:
Eliminarhttp://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html
Saludos.
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
ResponderEliminarHola edw, mira el comentario #38.1
Eliminarhola!! 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
ResponderEliminarNo 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.
Eliminarpotro como ponerla en el inicio de mi pagina, sobre las entradas nuevas que he publicado
ResponderEliminarSólo arrastra el gadget justo arriba del gadget de entradas del blog.
Eliminarexcelente ayuda Potro!
ResponderEliminarmira como quedo mi blog ... http://proyectosconstruccionesenperu.blogspot.com/
gracias.. y te debo una!
Qué bueno que te ha gustado :)
EliminarHola 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?
ResponderEliminarMil gracias!
El Blog es www.nurocks.com
Hola Xavi, la URL no está del todo bien en todos los casos, por ejemplo esta:
Eliminar//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
Excelente trabajo!!
ResponderEliminarCuando puedas date una vuelta por mi blog: http://mispulga.blogspot.com.ar/
gracias!!!!! me sirve para hacer una seccion de gameplays en mi blog! :33
ResponderEliminarwww.solosurvivalhorror.com.ar
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?
ResponderEliminarPara mi seria de primaria importancia encontrar una solucion! Gracias y espero que tenga tiempo para contestar! Saludos de un admirador de tu blog!
Desconozco cómo pueda hacerse lo que deseas, me suena complejo :(
EliminarComo podria tener mas de 5 videos en la misma galeria y ponerle una barra ? Gracias.
ResponderEliminarComo podria tener mas de 5 videos en la misma galeria y ponerle una barra ? Gracias.
ResponderEliminarSe 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.
EliminarHola Potro:
ResponderEliminarLa 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!
De hecho se supone que debería mostrar el primer video siempre, no sé porqué a veces no lo haga :/
EliminarEs decir que no se puede hacer nada adicional? :S
EliminarNo realmente, no sé si sea por algún otro script que quizá esté interfiriendo con este.
Eliminarpotro como hago para cambiarle de tamaño del ancho es que el que esta es muy grande necesito uno mas pequeño
ResponderEliminarHola, mira el comentario #38.1
EliminarUuuuuuf!!! 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!!!
ResponderEliminarNo veo puesto este slider en ese blog :(
EliminarHola que tal Potro.
ResponderEliminarUna pregunta, habrá alguna forma de que la galería tenga reproducción automática?
Gracias y felicidades por tu blog, me ha ayudado mucho.
No Me?, no tiene esa opción :(
EliminarHola! 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:
ResponderEliminarHabría que ver en cuál blog lo has puesto.
EliminarHola Potro, he visto esto y me parece interesante, sin embargo, me gustaría saber si lo puedo aplicar desde cualquier otra pagina.
ResponderEliminarsin 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!
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.
ResponderEliminarYo 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 ;)
Lo ignoro, grillo bot, no creo que este reproductor tenga la posibilidad de hacer todas esas modificaciones.
Eliminarhola potro como hago para poner la galeria de videos en dreamweaver, x favor ayudame!!!
ResponderEliminarhola potro como hago para colocar esta galeria de videos en dreamweaver ayuda x favor!!!
ResponderEliminarNo sé decirte, todo lo que hay aquí es probado únicamente en Blogger.
Eliminarcomo 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
ResponderEliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarNo veo alguna galería ahí, a menos que te refieras al tabview:
Eliminarhttp://ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html
Pd. He eliminado tu comentario por el aviso que está al final.
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¿Tienes algún script que impida copiar texto de la página? si es así entonces deberás quitarlo para que los videos funcionen.
EliminarMe gusta esa forma de poner videos, quisiera ponerlo a mi blog, el problema es donde: http://ciudadwisp.blogspot.com
ResponderEliminarNo he comprendido, ¿en dónde qué?
EliminarHola del Potro, primero felicitarte por tu blog...
ResponderEliminarHe 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
Hola, entré a tu blog pero no he visto puesta la galería.
EliminarOloa Potro Como haria para que el Slider se pasara de un video a otro Muchas Gracias
ResponderEliminarMe temo que no tiene esa opción :(
EliminarBuenas 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
ResponderEliminarEs igual, tendrías que cambiar esta parte del código:
Eliminar<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.
Gracias por responder potro, le intente y no me sale, me sale como enlistado, quiero metes estos 5 videos
ResponderEliminarhttp://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
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.
EliminarSaludos.
Que tal, buen tutorial.
ResponderEliminarNo habría problema si sólo lo colo en páginas para poder poder la lista de videos de mi cursos que realizo.
Hola MikeOnline, claro que sí, puedes usar condicionales para elegir dónde no quieres que se muestre:
Eliminarhttp://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html
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
ResponderEliminarHola Leonardo, ¿en cuál blog lo has puesto?
EliminarEl 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[img]https://atriluniversal.com.ve:2083/cpsess6430248194/viewer/home%2fatriluni%2fpublic_html%2fimg%2fpost/cap.bmp[/img]
ResponderEliminarHola 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.
EliminarSaludos.
Potro he conseguido un aporte de galerias multimedias que está muy bueno y solo es un script de pocas lineas. Lo he querido compartir con ustedes
ResponderEliminarAqui el link donde se puede crear lista de reproducciones y obtener el codigo:
http://vidsy.tv/
hola muchas gracias pero a mi no me ha funcionado esta todo negro y no se ven las miniaturas de los videos. este es el blog http://ufcfullvideofight.blogspot.com/
ResponderEliminarHola Potro mira hice todo como esta ahi dicho pero no se que pasa porque no me funciona no se ve nada. agradezco que me ayudes
ResponderEliminarHola, oye muy buenos tus apotaciones. Pregunta, estos también funcionn para joomla, me imagino que sí, seguí todos los pasos y aparece el diseño pero a la hora de sustituir o mas bien colocar el código para que se reproduzcan no sucede nada.
ResponderEliminarQué podría estra fallando?
Gracias