♣『Recursos Creepy World』☯: [Tutorial] Poner un video con varias opciones #2

Holaa~ como estan? yo epero que bien, yo aqui acabando mi pequeña semana de vacaciones y bueno hoy les traigo un tutorial, esta es otra version tabs u opciones para poner ideos, si quieres saber como solo sigue leyendo..

VISTA PREVIA

Paso 1:

Primero pondremos un script antes que todo, para ello vayan a plantilla -----> edicion html -----> se paran en cualquier lugar del codigo html, presionan la letras ctrl + F, les aparecera un pequeño cuadrito de busqueda, pegan esto: </head> y le dan enter, arriba de ese codigo pegaran esto:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script src='http://code-panchisweb.googlecode.com/files/jquery.tipsy.js' type='text/javascript'/>
<link href='http://espacioforos.miarroba.st/1904764/tipsy/tipsy.css' media='all' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
$(document).ready(function() {
$(".contenido_tab").hide(); //Ocultar capas
$("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña
$(".contenido_tab:first").show(); //Mostrar contenido primera pestaña
// Sucesos al hacer click en una pestaña
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("activa"); //Borrar todas las clases "activa"
$(this).addClass("activa"); //Añadir clase "activa" a la pestaña seleccionada
$(".contenido_tab").hide(); //Ocultar todo el contenido de la pestaña
var activatab = $(this).find("a").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>
<script>
$(document).ready(function(){
$('#dwn').appendTo('.dwn');
$('.right').appendTo('#right');
$('.left').appendTo('#left');
$('#listacaps').appendTo('.listacaps');
});
</script>

Paso 2:
Ahora agregaremos el codigo css, haran casi lo mismo que en el paso anterior pero ahora bsucaran este codigo: </b:skin> encima de ese codigo pegaran lo siguiente y le daran guardar plantilla:

/* CSS Tabs jQuery Recursos Kawaii World */
.contenedor_tab{
color: white;
float: left;
clear: both;
display: block;
width: 100%;
background-color: black;
}
ul.tabs{
float: left;
margin: 0 0 5px 0;
padding: 0;
list-style: none;
width: 91%;
background: #444 url(https://lh5.googleusercontent.com/-VRZdLAU_urI/UMkmAu5xg_I/AAAAAAAAA1w/ux7Vs_yu528/h120/bg1.png);
}
ul.tabs li{
float: left;
margin: 0;
padding: 0;
line-height: 31px;
overflow: hidden;
position: relative;
}
ul.tabs li a{
font-family: Arial;
text-decoration: none;
color: white;
font-weight: bold;
display: block;
font-size: 13px;
padding: 0 20px;
outline: none;
text-shadow: 0 1px 0 black;
}
ul.tabs li a:hover{background: url(https://lh4.googleusercontent.com/-9E-6WYnRGuw/UMkl44D7GSI/AAAAAAAAA1o/8IRGWLqfHYM/h120/bg2.png) #333;}
ul.tabs li.activa{
color: white;
background: url(https://lh4.googleusercontent.com/-9E-6WYnRGuw/UMkl44D7GSI/AAAAAAAAA1o/8IRGWLqfHYM/h120/bg2.png) #333;
}
.contenido_tab{
padding: 10px;
font-size: 1.2em;
border-radius: 5px;
}
.contenido_tab img{margin:0 20px 20px 0;border:1px solid #ddd;padding:5px
}

Paso 3:
Por ultimo van a la entrada donde pondran los videos y la cambiaran de redactar a HTML y pondran el siguiente codigo:

<div class="contenedor_tab">
<ul class="tabs">
<li><a href="#tab1" title="Servidor1">Opción 1</a></li>
<li><a href="#tab2" title="Servidor2">Opción 2</a></li>
<li><a href="#tab3" title="Servidor3">Opción 3</a></li>
</ul>
<div class="contenido_tab" id="tab1">
<center>Aqui Code del Repro</center>
</div>
<div class="contenido_tab" id="tab2">
<center>Aqui Code del Repro</center>
</div>
<div class="contenido_tab" id="tab3">
<center>Aqui Code del Repro</center>
</div>
</div>