JMiur [E]

Entre los gadgets que se incluyen en Blogger hay uno llamado Barra de Videos. Es sencillo de usar, hacemos click y nos muestra una serie de opciones; podemos ponerle un título, seleccionar si queremos mostrar los videos más vistos de YouTube o los más valorados o los más recientes. También podemos elegir mostrar canales de usuarios o videos relacionados con ciertas palabras clave.


El resultado, será una barra vertical, nada configurable ya que el códiog que veremos en la plantilla poco dice.


Pero ese no es el único modo. El mismo gadget está disponible en Google AJAX Search API y allí, las alternativas son otras e incluso, con paciencia podríamos configurlarla modificando determinadas cosas.

La primera gran diferencia es que podemos elegir otro modelo y en lugar de ser vertical, ubicarla de manera horizontal. En el wizard, vamos seleccionando opciones y previsualizando el resultado. Por ejemplo, si sólo queremos mostrar nuestro canal, bastará escribir el nombre y desmarcar todo lo demás. Si quisiéramos mostrar varios canales de usuarios, deberíamos ponerlos separados por comas. Una vez que lo tenemos configurado, le pedimos que nos muestre el código a insertar.

<!-- ++Begin Video Bar Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the actual videobar.
// You can place this anywhere on your page.
-->
<div id="videoBar-bar">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>

<!-- Ajax Search Api and Stylesheet
// Note: If you are already using the AJAX Search API, then do not include it
// or its stylesheet again
-->
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
</style>

<!-- Video Bar Code and Stylesheet -->
<script type="text/javascript">
window._uds_vbw_donotrepair = true;
</script>
<script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
</style>

<style type="text/css">
.playerInnerBox_gsvb .player_gsvb {
width : 320px;
height : 260px;
}
</style>
<script type="text/javascript">
function LoadVideoBar() {

var videoBar;
var options = {
largeResultSet : !true,
horizontal : true,
autoExecuteList : {
cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
executeList : ["ytchannel:nombre"]
}
}

videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
GSvideoBar.PLAYER_ROOT_FLOATING,
options);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadVideoBar);
</script>
<!-- ++End Video Bar Wizard Generated Code++ -->

Así como está, la podríamos agregar en un elemento HTML y listo pero vamos a ver si podemos modificarle un poco; para eso, hay una página de ayuda del mismo Google donde se enumeran algunas alternativas.

Esta es la idea:
<!-- aquí colocaremos los estilos CSS personales -->
<style type='text/css'
/* ... ver detalles ... */
</style>

<!-- este es el contenedor donde se mostrará la barra -->
<div id="videoBar-bar"> <span>Cargando ...</span> </div>

<!-- aquí se carga el API de búsqueda de Google, si ya lo estamos usando no es necesario incluirlo otra vez -->
<!-- el CSS de ese API no es necesario en absoluto así que no lo incluyo -->
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw" type="text/javascript"></script>

<!-- aquí se cargan los scripts del API -->
<script type="text/javascript"> window._uds_vbw_donotrepair = true; </script>
<script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new" type="text/javascript"></script>
<!-- aquí se cargaría el estilo gsvideobar.css pero prefiero agregarlo por separado así que lo ignoro -->

<!-- la función que ejecuta el script -->
<script type="text/javascript">
function LoadVideoBar() {
var videoBar;
var options = {
largeResultSet : !true, horizontal : true, autoExecuteList : {
cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
executeList : ["ytchannel:NOMBRE"] }
}
videoBar = new GSvideoBar(document.getElementById("videoBar-bar"), GSvideoBar.PLAYER_ROOT_FLOATING, options);
}
// esta función se cargará al terminar la carga del blog
GSearch.setOnLoadCallback(LoadVideoBar);
</script>
videoBar-bar es un DIV donde se mostrará la barra una vez cargada y puede tener cualquier otro nombre.

Para indicar qué cosas queremos mostrar usamos la línea que dice executeList : [], allí, podemos colocar un canal:
executeList : ["ytchannel:NOMBRE"]
o varios canales:
executeList : ["ytchannel:unNOMBRE","ytchannel:otroNOMBRE"]
o usar palabras claves:
"ytfeed:most_viewed.this_week" es la opción Most Viewed Videos
"ytfeed:top_rated.this_week" es la opción Top Rated Videos
"ytfeed:google_news" es la opción Top News Videos
"ytfeed:recently_featured" es la opción Recently Featured Videos
y todos son combinables, así que podemos usar varios, sólo hay que separarlos con comas.

Lo mismo hacemos si queremos agregar expresiones de búsqueda, basta colocarlas entre comillas:
executeList : ["ytchannel:NOMBRE",,"beatles"]

Como dije, el CSS por defecto se carga si incluimos gsvideobar.css pero, prefiero no hacerlo y agregarlo a mano para personalizarlo:
/* el rectángulo donde mostraremos la barra de videos */
#videoBar-bar {margin: 0 auto; width: 425px;}
#videoBar-bar span {color: #BB0000; font-size: 11px;}

/* los colores de los enlaces y los textos */
.playerBox_gsvb div.alldone_gsvb, .playerBox_gsvb a.title_gsvb {color:#DEF;}
.playerBox_gsvb div.alldone_gsvb:hover, .playerBox_gsvb a.title_gsvb:hover {color:#FFF;}

/* cada una de las miniaturas */
.resultsBox_gsvb div.resultDiv_gsvb {border-color: #789; margin-left: 2px;}

/* la ventana modal donde se muestran los videos */
.floatingPlayerBox_gsvb, .floatingPlayerBox_gsvb * {background-color: #345;}
.floatingPlayerBox_gsvb {border: 1px solid #567; -moz-border-radius: 10px;}
.floatingPlayer_gsvb {background-color: #123; -moz-border-radius: 5px;}
.floatingPlayerBox_gsvb {opacity: 0.8; position: absolute; z-index: 9998;}
.floatingPlayer_gsvb {position: absolute; z-index: 9999;}
.floatingBranding_gsvb {position: absolute;}

/* contrl de esa ventana con el reproductor */
.playerBox_gsvb {display:block; margin: 5px 10px 5px 10px; text-align: center;}
.idle_gsvb {display: none;}
.playing_gsvb {display: block;}

/* es el reproductor en si mismo */
/* small: 180x135, medium: 260x195, large player: 320x260, extra large: 480x380 */
.playerInnerBox_gsvb .player_gsvb {height: 260px; width: 320px;}
.playerInnerBox_gsvb div.player_gsvb {margin: auto;}
.floatingPlayer_gsvb .playerInnerBox_gsvb div.player_gsvb {margin: 0;}
.playerBox_gsvb div.alldone_gsvb {cursor: pointer; display: inline; font-size: 11px;}
.playerBox_gsvb div.title_gsvb {font-size: 11px; margin-top: 2px; text-align: center;}

/* la tabla donde se muestran las cuatro miniaturas */
.full_gsvb {display: block;}
.empty_gsvb {display: none;}
table.resultTable_gsvb {border-collapse: collapse;}
table.resultTable_gsvb td {border: none;}
div.resultDiv_gsvb {background-color: #000; border: 1px solid; height: 79px; text-align: center; width: 104px;}
div.smallResultDiv_gsvb {height: 41px; text-align: center; width: 54px;}
div.resultDiv_gsvb img {cursor: pointer; display: inline;}

/* Auto Execute List Status Box (no sé qué es) */
div.statusBox_gsvb {padding: 4px;}
div.statusItem_gsvb {color: #DEF; cursor: pointer; display: inline; font-weight: bold; margin-right: 6px; white-space: nowrap;}
div.statusItemSelected_gsvb {color: #000; text-decoration: none;}

/* y le quitamos el logo :$ */
.gsc-branding{display: none;}
Y este sería el resultado del experimento:


Cargando ...

32 comentarios:

¤¥rคtђเ£ℓ¤  

hola! hace poco que encontre este blog y realmente tengo que felicitarte, sin ti no hubiera sido capaz de personalizar mis plantillas de blogger :D y aunque no se si es una pregunta que va aquí... me gustaria saber si hay alguna forma de que todo el contenido del blog quede fijo menos la zona de los post... no se si entiendes lo que quiero decir, pero animo con el blog y gracias por toda la ayuda que me has proporcionado ^^

Responder
Bonzu Pipinpadaloxicopolis III  

Me gusta mucho esa ventanita donde sale el video, cómo agegarlo¡?

Responder
Esachica28  

Hola, muchas gracias por la respuesta de ayer sobre poner un reproductor musical en una web o blog.
Hoy, q casualidad, sacas un tema sobre el que tenía una duda. Bueno, más o menos. Te cuento: cuando quiero poner un video de youtube en el sidebar, hago lo siguiente..(ah, soy de blogger)Copio el "Embed" dentro de un Widget tipo "HTML" y ya está. Mi pregunta es: ¿cómo poner 2 videos youtube, reduciendo su tamaño, para que quepan uno al lado del otro y no encima y abajo? Sé que no es lo mismo que las listas de las que hablas en este post, ya q en estas listas los videos no los seleccionamos nosotros. Por eso me interesa a mí resolver la otra cuestión. Muchas gracias por cualquier orientación!! Bs

Responder
JMiur  

No comprendo eso de que quede fijo.

Bomzu: Eso es parte de la barra de videos.

Esachica28: Cuando colocas el código, fíjate que hay dos atributos que indican el tamaño: width y height. Cambiando los valores de esos dos, modificas el tamaño del reproductor.

Responder
Deybi  

Exquisito.
Esto es super bueno JMIur. Por otro lado te quería preguntar si ese mísmo truco de quitar el logo fue el que utilizaste en el buscador de Google. ¿?.

¡Saludos!.

Responder
JMiur  

Deybi:
No me acordaba de eso así que fuí a mirar. Sí, es el mismo:

.gsc-branding {display:none;}

Mientras ellos no chillen, quedará así :D

Responder
Anna Jorba Ricart  

Gracias por todo Sr Miur, son tantos consejos que me dá con sus explicaciones, que tan solo quiero expresar mi admiración por su conocimiento,generosidad y atención.
Desde Barcelona un saludo.

Responder
JMiur  

Gracias por el comentario, Anna :$

Responder
Gara  

Hola, puse la barra de video, pero solo deja q salgan 4, como se puede hacer para q salgan más?,gracias

Responder
JMiur  

Gara: No parece ser algo que pueda ser modificado.

Responder
Bilosony2™  

Una pregunta y se podra aser lo mismo pero con picassa por que cinceramente yo uso el WIDGET de picassa pero nome gusta como se ve para nada :(


Saludos!!!

Responder
JMiur  

No sé, si el widget tiene opciones, tal vez. Lo desconozco.

Responder
Prof. de Música  

amigo quisiera saber como hacer eso de la barra, lo has explicado bien pero no se donde pegar esos codigo de html para luego modificarlos? sera en diceño/edicion de html? tengo esa duda a y quisiera saber como poner esos emotion para los comentarios ;) y tambien como moderar los comentarios este es el blog que recien estoy haciendo, www.funse.blogspot.com cualquier comentario te agradesco, y esta de mas decirte que cualquier cosa referente a la musica, partituras, teoria, solfe, instrumento entre otros estamos a la orden.

Responder
JMiur  

La barra puedes ponerla por ejemplo, agregando un elemento HTML en la plantilla y pegando los códigos allí. Está pensada, entiendo yo, para que sea agregada en la sidebar o en el footer.

Para los emoticones, fíjate en esta entrada.

Para moderar los comentarios, simplemente vas a Configuración | Comentarios y buscas:
Moderación de comentarios y allí, marcas una de las tres opciones (Siempre, Sólo en entradas publicadas hace más de XX días o Nunca)

Responder
Prof. de Música  

Me sirvio mucho tu informacion, muchas gracias. Y aun estoy trabajando en el blog, ya he creado un foro, y ahora quisiera hacer una seccion donde publicar el material requerido para los instrumentos y la teoria. Disculpa una pregunta, sabes que he creado paginas independientes y luego creo el enlace en la pestaña correspondiente en la barra de navegación, pero cuando accedo a estas paginas ellas conservan los gadget de la primera, quisiera saber si existe una manera de poder cambiar el diceño de las paginas independientes sin que muestren el mismo contenido (gadget) de la pagina principal, y cualquier concejo para mejorar la blog muchas gracias. Estamos a la orden camarada. :D

Responder
Prof. de Música  

JMiur, perdona tantas preguntas, pero seguramente todos al comenzar pasamos por esto. Se trata de la barra de video, aparece y funciona pero los videos se abren abajo al final de la pagina, si quieres echale un vistazo www.funse.blogspot.com como podria corregir esto? y poder hacer que al pinchar el video se pueda ver al lado de la barra o mas cerca? :S

Responder
JMiur  

Cambiar las páginas estáticas es posible, hasta qué punto, depende de lo que uno quiera pero, no hay nada sencillo; deben usarse los códigos condicionales de Blogger para darle cierto estilo diferenciado. No hay una respuesta general para eso pero el condicional es así:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
... lo que esté acá adentro sólo se ejecutará en las páginas estáticas
</b:if>

Lo de la barra parece un problema que se produce en Internet Explorer. Ahí ya no sabría indicarte posibles soluciones ya que el CSS que el que controla eso, es parte del mismo gadget y no veo como corregirlo. Voy a ver si en al web encuentro alguna respuesta.

Responder
Prof. de Música  

Bueno la verdad es que el gadgets ofrecido en el mismo blogger, cuando clickeamos en agregar gadgets / barra de video, este si muestra los videos al lado como una apliacion de los mismos, quizas si se escudriña ese codigo y se determina cuales son las lineas responsables a dicha funcion, quizas se resuelva, porque con esta barra ofrecida por el blogger si funciona, solo que esta no se puede modificar tanto como la otra. Gracias por las respuestas JMiur, y lo de las modificaciones de las paginas independiente es que no salgan los mismos gadgets de la pagina principal, si revisastes el blog notaras que al pinchar la pestaña eventos, muestra los mismos gadgets de la primera incluyendo la barra de video.

Responder
Prof. de Música  

:( estoy desanimandome un poco, no consigo la manera de mostrar esa opcion que tu tienes debajo de la barra de busqueda, donde sale el nombre de la pagina enumera los lectores y uno se puede subcribir. ¿que gadgets puede hacer eso?

Responder
JMiur  

El problema de los gadgets es que, si bien son simples de poner, son aplicaciones cerradas donde las opciones de personalizacón o cambios están limitadas a lo que ellos ofrecen y prácticamente nada más.

No estoy seguro si con lo otro te refieres a las suscripciones de los feeds. Si es eso, no es un gadget sino que debes crear la cuenta en Feedburner y luego, pegar los códios que ellos te dan. El resto, no es otra cosa que una serie de agregados personales.

Responder
José Antonio Santos  

Perdona, ¿Sabes cómo podría elegir una serie de videos que yo quiera de mi canal?
Gracias.

Responder
JMiur  

Supongo que poniendo tu canal en el cuadro indicado y tal vez, utilizando palabras o etiquetas si esos videos los tienen. Lo que no creo que se pueda es indicar exactamente qué videos mostrar.

Responder
Los Escunianos de La Mancha  

Hola.

Me gustaría saber, si después de hacer todos los pasos y poner el código en un html en horizontal se podría acortar un poco porque me "ensancha" el blog los cuatro vídeos hacia la derecha.

Muchas gracias.

Responder
JMiur  

HAbría que ver el ejemplo concreto pero, si el blog se ensancha es porue el ancho donde se quiere colocar de modo horizontal es escaso. Es probable que, simplente, no entre en ese lugar.

Responder
pablo  

Hola, felicidades por la explicacion, pero buescando por internet me he encontrado con que se suben videos y en mi web no cambian sigue el orden que se dio en un principio, la pregunta es si existe alguna forma de dejarlos para que se muestre en el orden de subida.

gracias

Responder
JMiur  

Lo desconozco.

Responder
José Antonio  

¿Sabéis cada cuanto tiempo se actualizan los videos de Google News?

http://www.foroactual.com

Responder
JMiur  

Lo desconozco.

Responder
KIRA X92  

hola realmente me sirvio este post ... pero no encuentro como hacer para que la ventana modal quede centrada en la pantalla.
un dato util que descubri mientras agregaba esto a mi blog es que se pueden poner playlist remplazando yt:nombre por playlist:numero de playlist
simplemente probe porciacaso funcionaba y :D funciono (cosa rara por que no esta en la api que da google)

Responder
JMiur  

Se centarrá en el DIV que lo contenga y no en la pantalla, dependiendo de dónde se coloque el gadget.

Responder
Eduglobal Integral Corpoempresarial  

Hola buenos dias ya personalice la barra de herramientas en mi blogger, utilice las palabras claves, emprendimiento, proyecto de vida. Bueno le di guardar, pero cuando estoy en el bloger le dooy clic y no se activa, es decir no reproduce.
gracias por la orientacion qure me brinde

JMiur  

No lo veo colocado en tu blog. De todos modos, tambièn puedes agregarlo directamente con el API.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR