9/6/16

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

 Cosas a editar:
Verde: el nombre que tendra cada opcion, si gustan cambiarlo, pero pueden dejarlo asi
Rojo: codigo del reproductor 



 Bueno eso es todo espero les guste y sirva
el tutorial, ya saben dudas o sugerencias dejenlas
en los comentarios o en el chat, bye. bye~
 

2 comentarios:

  1. holaa!!

    aaaa que buenisimo!! a veces es necesario estos codigos!!

    ResponderEliminar
    Respuestas
    1. Hola! si es verdad por eso los compartí :)

      Eliminar