Incorporación de múltiples videos en una sola sección

comohayque · 6 Sep 2013

quiero poner varios videos en una sola seccion y elegir el video segun cual video quieres ver por ejemplo opcion 1 opcion 2 por ejemplo esta esta pagina Godzilla (1998) » Pelicula Online ver Estreno HD Gratis porfa ayudenme a incorporarlo a mi pagina

Kakkonen · 6 Sep 2013

si es wordpress hay manera de hacerlo facil

comohayque · 6 Sep 2013

noo, es en blogger y tambien lo quiero aplicar pero no puedo

comohayque · 6 Sep 2013

ok deja checar gracias amigo

zcriptz · 6 Sep 2013

HTML:

<style>
.oculto{
    display:none;
}

.visible{
    display:inline;
}

.sinlista{
    list-style: none;
}
.opcionesli{
    float:left;
    margin: 0 5px;
}
</style>
<script type="text/javascript">
function crearlista(){
	listadiv = document.getElementById('listaopciones');
	listadiv.innerHTML = '<ul class="sinlista">';
	a=document.getElementsByTagName('div');
	var num = 1;
	for(i=0;i<a.length;i++){
		if(a[i].className == 'visible' || a[i].className == 'oculto'){
			listadiv.innerHTML += '<li class="opcionesli"><a href="#" onclick="opciones(\''+a[i].id+'\'); return false">Opcion '+num+'</a></li>';
			num++;
		}
	}
	listadiv.innerHTML += '</ul>';
}

function opciones(idop){
	ocultarotros('div', 'visible');
	document.getElementById(idop).className = 'visible';
}

function ocultarotros(tagType, clase){
	a=document.getElementsByTagName(tagType);
	for(i=0;i<a.length;i++){
		if(a[i].className == clase){
			a[i].className = 'oculto';
		}
	}
}

window.onload = crearlista;
</script>
<div id="listaopciones"></div><br>
<div id="opcion1" class="visible">
          EMBED 1
</div>
<div id="opcion2" class="oculto">
          EMBED 2
</div>
<div id="opcion3" class="oculto">
          EMBED 3
</div>

Coloca el javascript y el estilo en el header de tu web y solo bastaria con colocar...

HTML:

<div id="listaopciones"></div>

En donde quieres que salga la lista...

y

HTML:

<div id="opcion1" class="visible">
          EMBED 1
</div>

con la id opcion2 para el siguiente, opcion3 para el otro y así, y en class pones visible para el que quieres que se vea y class="oculto" para el que no...

Cambia los estilos a tu gusto, y puedes poner la cantidad de opciones que se te antoje, siempre y cuando coloques "opcion(numero)".

Código hecho por mi recién para ti

parrax · 9 Sep 2013

acá está la solución, sigue los pasos exactamente cómo te lo explico..

1. Vamos a edicion HTML y buscamos la etiqueta ]]></b:skin> y antes agregamos lo siguiente:

/* CSS Tabs jQuery */
.tabs{
margin: 0;
padding: 0;
}
.contenedor_tab{
color: Enlace eliminado ;
float: left;
clear: both;
display: block;
width: 100%;
background-color: Enlace eliminado ;
margin-top: -1px;
border: 1px solid Enlace eliminado ;
}
ul.tabs li{
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
overflow: hidden;
position: relative;
text-transform: uppercase;
background-color: Enlace eliminado ;
border: 1px solid Enlace eliminado ;
outline: 1px solid Enlace eliminado ;
}
ul.tabs li a{
font-family: Arial;
text-decoration: none;
color: black;
display: block;
font-size: 13px;
padding: 0 20px;
outline: none;
}
ul.tabs li a:hover{background:Enlace eliminado ;
}
ul.tabs li.activa{
color: Enlace eliminado ;
background-color: Enlace eliminado ;
outline: 0;
border-top: 1px solid Enlace eliminado ;
border-left: 1px solid Enlace eliminado ;
}
.contenido_tab{
padding: 10px;
font-size: 1.2em;
border-radius: 5px;
}
.contenido_tab img{margin:0 20px 20px 0;border:1px solid Enlace eliminado ;padding:5px}

2. Buscas la etiqueta </head> y antes agregas esto:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(".contenido_tab&quot.hide(); //Ocultar capas
$("ul.tabs li:first&quot.addClass("activa&quot.show(); //Activar primera pestaña
$(".contenido_tab:first&quot.show(); //Mostrar contenido primera pestaña
// Sucesos al hacer click en una pestaña
$("ul.tabs li&quot.click(function() {
$("ul.tabs li&quot.removeClass("activa" //Borrar todas las clases "activa"
$(this).addClass("activa" //Añadir clase "activa" a la pestaña seleccionada
$(".contenido_tab&quot.hide(); //Ocultar todo el contenido de la pestaña
var activatab = $(this).find("a&quot.attr("href" //Leer el valor de href para identificar la pestaña activa
$(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo
return false;
});
});
</script>

3. Lo siguiente lo colocaremos en las entradas donde queramos mostrar los videos:

<ul class="tabs">
<li><a href="#tab1">Opción 1</a></li>
<li><a href="#tab2">Opción 2</a></li>
<li><a href="#tab3">Opción 3</a></li>
</ul>
<div class="contenedor_tab">
<div id="tab1" class="contenido_tab">
AQUI CODIGO REPRODUCTOR
</div>
<div id="tab2" class="contenido_tab">
AQUI CODIGO REPRODUCTOR
</div>
<div id="tab3" class="contenido_tab">
AQUI CODIGO REPRODUCTOR
</div>
</div>
<div style="clear:both;">
</div>

y eso es todo mi amigo, espero les sirva, cualquier duda consulten...

acá le adjunto el codigo en un blog de notas Enlace eliminado

JHONNYSTYLE · 21 Oct 2013

me sirvio raza

luego paso el link de mi blog para que vean como quedo

Heis · 22 Oct 2013

Tu sitio tiene virus? Me lo detectó el anti

Chocomilk · 22 Oct 2013

parrax dijo:
acá está la solución, sigue los pasos exactamente cómo te lo explico..

1. Vamos a edicion HTML y buscamos la etiqueta ]=]=></b:skin> y antes agregamos lo siguiente:

2. Buscas la etiqueta </head> y antes agregas esto:

3. Lo siguiente lo colocaremos en las entradas donde queramos mostrar los videos:

y eso es todo mi amigo, espero les sirva, cualquier duda consulten...

acá le adjunto el codigo en un blog de notas Enlace eliminado

hasta yo tomare nota para tener esto por si un dia lo suelo ocupar, gracias por el aporte.