Galería de videos en el blog

Aunque poner un video de youtube en el blog es relativamente sencillo (solo es cuestión de copiar y pegar el código donde queramos y listo) la cosa cambia cuando queremos mostrar en el blog más de un video, y hacer que estos se muestren tipo galería para ir mostrándolos de uno en uno es algo que a cualquiera le provoca un dolor de cabeza, a menos que se tenga un poco más de conocimientos básicos de HTML. Eso era lo que yo me temía pero no…

Hace un buen tiempo que me preguntaba cómo hacer para poner una galería de videos en el blog. Y aunque existen bastantes plantillas que ya vienen con esta galería incluida por defecto, personalizarla o mover el script resultaba más que agotador.  Y en realidad incluir esta galería de videos en el blog no resultó tan complicada que digamos (ya saben, aquí fue cierto aquello de que “no es tan fiero el león como lo pintan”) y resulta que hasta mi hija de 14 años lo pudo hacer (y eso me trajo sentimientos encontrados: no sabía si alegrarme o entristecerme) En fin, que pueden ver cómo funciona en este blog de pruebas.

Para ponerlo en el blog, primero entren en Plantilla, Edición Html y antes de </head> pegan el siguiente script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

Listo. Guardamos la plantilla siempre dando vista previa por si algo hicimos mal y ahora entramos en Diseño, Añadir Gadget, Html y pegas el siguiente código:

 <center><div id="contenedorYT">Cargando ...</div>

<script type="text/javascript">

swfobject.embedSWF(

'http://www.youtube.com/v/qahBeZB1g54&autoplay=1&enablejsapi=1&rel=0&fs=1',

'contenedorYT',

'640','390', '8',null,null,

{allowScriptAccess: 'always',allowFullScreen: 'true'},

{id: 'reproductorYT'});

function playVideo(id) {

var o = document.getElementById( 'reproductorYT' );

if( o ) {o.loadVideoById( id );}

}

</script></center>

<br/>

<div class="videominiaturas">

<a href="javascript:playVideo('J3OtzDWBwOo');"><img src="http://img.youtube.com/vi/J3OtzDWBwOo/1.jpg" /></a>

<a href="javascript:playVideo('FOJq2dYb4xI');"><img src="http://img.youtube.com/vi/FOJq2dYb4xI/1.jpg" /></a>

<a href="javascript:playVideo('fyWjmlMK8Qg');"><img src="http://img.youtube.com/vi/fyWjmlMK8Qg/1.jpg" /></a>

<a href="javascript:playVideo('Y1cTclxGE64');"><img

src="http://img.youtube.com/vi/Y1cTclxGE64/1.jpg" /></a>

<a href="javascript:playVideo('NY9BtBiUUG8');"><img src="http://img.youtube.com/vi/NY9BtBiUUG8/1.jpg" /></a>

<a href="javascript:playVideo('QUlYbhfpoKU');"><img src="http://img.youtube.com/vi/QUlYbhfpoKU/1.jpg" /></a>

<a href="javascript:playVideo('rU72Kc5yCHI');"><img src="http://img.youtube.com/vi/rU72Kc5yCHI/1.jpg" /></a>

</div>

Reemplazas la ID de los videos en los dos lados que pide y que están resaltados con rojo y listo. Puedes aumentar o disminuir los videos miniaturas con solo eliminar este código:

<a href="javascript:playVideo('rU72Kc5yCHI');"><img src="http://img.youtube.com/vi/rU72Kc5yCHI/1.jpg" /></a>

Si quieres que el video principal empice a “rodar” automáticamente al igual que lo hacen los videos en Youtube, pega el código tal cual, pero si no lo quieres así solo elimina lo que está resaltado en azul y listo.

Se puede modificar el ancho y alto del video principal (640 x 390) para que se ajuste al ancho y alto de cada blog, eso ya dependerá de cómo lo quiera cada quien y dónde lo ponga, yo he puesto 7 miniaturas pues he practicado en un gadget debajo de las entradas con todo el ancho del blog (de ahí que el video principal es del mismo tamaño que el de Youtube) pero si desean ponerlo en una sidebar las medidas del video lo tienen que acomodar de acuerdo al ancho de esa sidebar, al igual que las miniaturas. Por lo demás, la galería funciona muy bien.

Mostrar u ocultar gadgets en el blog

Hay ocasiones en las que nosotros no queremos que algunos de nuestros gadgets se vean en la portada de nuestro blog, pero si queremos que se muestren en el resto de las entadas, o al menos no queremos que dichos gadgets hagan que la carga del blog sea más lenta.

Pues hacer que algunos gadgets se oculten de la entrada si es posible, y para ello solo tenemos que valernos de un simple código que ordena que el script del gadget se oculte en la portada del blog, pero en el resto se muestra normalmente.

El código del que hablo es el siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

</b:if>

Este lo deberás poner dentro del gadget, y para ello entra en Diseño, Edición Html, y con los artilugios expandidos (recuerda que ahora los “artilugios expandidos” es abriendo las flechas que están junto a los números hacia el lado izquierdo de la plantilla) busca el nombre del gadget; por lo general los gadgets tienen nombre en tu blog (Etiquetas, Entradas Recientes, Archivo, Etc., o el nombre que tú le hayas puesto) y pega el código de arriba entre <b:includable id='main'> y el último cierre</b:includable> para que te quede más o menos así:

<b:widget id='HTML1' locked='false' title='Gadget' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Con ello lograremos que los gadgets que elegimos no se vean en la portada del blog. Lo que está en azul HTML1 es el nombre del gadget, para este ejemplo el gadget tenía ese nombre. Pero si lo que quieres es lo contrario, que tu gadget se muestre en la portada y no en las entradas, también lo podemos lograr con el mismo procedimiento solo cambiando los códigos que te di al comienzo. En este caso los que pondrás son éstos:

<b:if cond='data:blog.homepageUrl == data:blog.url'>

</b:if>

Recuerda que tienes que poner a todos los gadgets que quieras ocultar o mostrar.