- Mensajes
- 128
- Puntuación de reacción
- 0
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
Código:
<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
