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:
buscamos la etiqueta </head> y de bajo de ella ponemos el siguiente código:
HTML:
<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
Insertar CODE, HTML o PHP:
<div id="blJJVideoGal1">
<a href="javascript:blJJTEfun1vidjaime('[COLOR="#FF0000"]BLIDVIDEO1[/COLOR]');"><img src="http://img.youtube.com/vi/[COLOR="#FF0000"]BLIDVIDEO1[/COLOR]/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('[COLOR="#FF0000"]BLIDVIDEO2[/COLOR]');"><img src="http://img.youtube.com/vi/[COLOR="#FF0000"]BLIDVIDEO2[/COLOR]/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('[COLOR="#FF0000"]BLIDVIDEO3[/COLOR]');"><img src="http://img.youtube.com/vi/[COLOR="#FF0000"]BLIDVIDEO3[/COLOR]/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('[COLOR="#FF0000"]BLIDVIDEO4[/COLOR]');"><img src="http://img.youtube.com/vi/[COLOR="#FF0000"]BLIDVIDEO4[/COLOR]/1.jpg" /></a>
</div>
<div id="blJJVideoGal2">Cargando ...</div><script type="text/javascript">swfobject.embedSWF(
'http://www.youtube.com/v/[COLOR="#FFA500"]BLIDVIDEOGENERAL[/COLOR]&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('[COLOR="#FF0000"]BLIDVIDEO5[/COLOR]');"><img src="http://img.youtube.com/vi/[COLOR="#FF0000"]BLIDVIDEO5[/COLOR]/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('[COLOR="#FF0000"]BLIDVIDEO6[/COLOR]');"><img src="http://img.youtube.com/vi/[COLOR="#FF0000"]BLIDVIDEO6[/COLOR]/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('[COLOR="#FF0000"]BLIDVIDEO7[/COLOR]');"><img src="http://img.youtube.com/vi/[COLOR="#FF0000"]BLIDVIDEO7[/COLOR]/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('[COLOR="#FF0000"]BLIDVIDEO8[/COLOR]');"><img src="http://img.youtube.com/vi/[COLOR="#FF0000"]BLIDVIDEO8[/COLOR]/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.
DEMO
Pueden ver el demo de como queda aqui: DEMO: video Galeria YouTube | Demos Code-Bloggers
PUEDEN VER MAS TUTORIALES COMO ESTOS EN MI PAGINA (CLICK EN LA PRIMERA IMAGEN DE MI FIRMA)
Última edición:
