Slider de Videos YouTube - Video Galeria

Esta claro que mostrar vídeo en nuestro blog nos demanda espacio para insertarlos, para solucionar este problema les presentamos un galería de vídeos que reducirá enormemente el espacio que usaremos.
Esta galería esta basada en HTML y JS por lo que podrán modificarlo libremente adaptándola a sus plantillas.
Ademas este truco funciona tanto como para poner lo en nuestras entradas de blogger como también para ponerlo en WidGet para mostrarlo en la portada del blog.

INSTALACION:

Primero deberemos ir a nuestro editor de plantillas y entrar al modo Edicion HTML (ver imagen guia)

Ahora buscamos la etiqueta </head> y de bajo de ella ponemos el siguiente código:

<script src='https://dl.dropboxusercontent.com/u/84010639/JS%20Galeria%20YouTube/blJJbalconVidg.css' type='text/javascript'/><link href='https://dl.dropboxusercontent.com/u/84010639/JS%20Galeria%20YouTube/swfobject.js' media='screen' rel='stylesheet' type='text/css'/>

Ahora vamos a donde queremos agregar nuestra galerías de vídeo:

• Agregarlo en una entrada: Para agregarlo en una entrada solo debemos ir al modo HTML y pegar el código
• Agregarlo en un Widget HTML/JavaScript: solo deben pegar el  código.

Codigo:

<div id="blJJVideoGal1">
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO1');"><img src="http://img.youtube.com/vi/BLIDVIDEO1/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO2');"><img src="http://img.youtube.com/vi/BLIDVIDEO2/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO3');"><img src="http://img.youtube.com/vi/BLIDVIDEO3/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO4');"><img src="http://img.youtube.com/vi/BLIDVIDEO4/1.jpg" /></a>
</div>
<div id="blJJVideoGal2">Cargando ...</div><script type="text/javascript">swfobject.embedSWF(
'http://www.youtube.com/v/BLIDVIDEOGENERAL&enablejsapi=1&rel=0&fs=1',
'blJJVideoGal2',
'400','344', '8',null,null,
{allowScriptAccess: 'always',allowFullScreen: 'true'},
{id: 'balconJJrplay'});  function blJJTEfun1vidjaime(id) {
var o = document.getElementById( 'balconJJrplay' );
if( o ) {o.loadVideoById( id );} } </script>
<div id="blJJVideoGal1">
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO5');"><img src="http://img.youtube.com/vi/BLIDVIDEO5/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO6');"><img src="http://img.youtube.com/vi/BLIDVIDEO6/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO7');"><img src="http://img.youtube.com/vi/BLIDVIDEO7/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO8');"><img src="http://img.youtube.com/vi/BLIDVIDEO8/1.jpg" /></a>
</div>

EXPLICACION:
Todo lo que vemos de ROJO es donde debemos poner el ID del video.
Lo que esta de ANARANJADO debe ir el ID del video principal.

ID Video de YouTube:

VER DEMO

Imprimir artículo