top of page

Tab's para reproductores de videos

Tab's para videos o breve mente abreviando "reproductores para video y/o imágenes"

Tab's para películas, menú de contenidos con pestañas.

Versión jQuery.



 

INSTRUCCIONES


1. Vamos a Blogger.com > Tema > Editar HTML > Presionamos CTRL + F y buscamos /head y Pegar arriba de /head.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<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>

Ahora agregaremos el estilo CSS en El mismo Editor de HTML.


2. presionaremos CTRL + F > buscamos ]]></b:skin> > Lo pegas arriba.


/* CSS Tabs jQuery */
/* by ChumsOF */
.tabs{
margin: 0;
padding: 0;
}
.contenedor_tab{
color: #999;
float: left;
clear: both;
display: block;
width: 100%;
background-color: #F8F8F8;
margin-top: -1px;
border: 1px solid #E8E8E8;
}
ul.tabs li{
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
overflow: hidden;
position: relative;
text-transform: uppercase;
background-color: #E0E0E0;
border: 1px solid #F8F8F8;
outline: 1px solid #E8E8E8;
}
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:#f8f8f8;
}
ul.tabs li.activa{
color: #999;
background-color: #F8F8F8;
outline: 0;
border-top: 1px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
}
.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}

Ahora solo queda ir a la entrada donde pondrás el HTML, y listo solo tienes que poner los IFRAME de los reproductores que desees.


<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 IFRAME
</div>
<div id="tab2" class="contenido_tab">
AQUI CODIGO IFRAME
</div>
<div id="tab3" class="contenido_tab">
AQUI CODIGO IFRAME
</div>
</div>
<div style="clear:both;">
</div>

Recuerda que si quieres agregar mas opciones, ejemplo aquí tenemos solo 3 opciones para agregar la opción 4 iremos a:


<ul class="tabs">

Copiamos


<li><a href="#tab3">Opción 3</a></li>

Y solo modificamos el "tab3" a "tab 4"y el nombre a opción 4 o el que desees. en la parte de abajo copiamos este código.


<div class="contenedor_tab"><div id="tab1" class="contenido_tab">AQUI CODIGO REPRODUCTOR</div>

Modificamos "tab1" a "tab4" y listo así pueden agregar los que ustedes quieran y este seria el resultado.


<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>
<li><a href="#tab4">Opción 4</a></li>
</ul>
<div class="contenedor_tab">
<div id="tab1" class="contenido_tab">
AQUI CODIGO IFRAME
</div>
<div id="tab2" class="contenido_tab">
AQUI CODIGO IFRAME
</div>
<div id="tab3" class="contenido_tab">
AQUI CODIGO IFRAME
</div>
<div id="tab4" class="contenido_tab">
AQUI CODIGO IFRAME
</div>
</div>
<div style="clear:both;">
</div>


ADVERTENCIA


Si sabes manejar HTML puedes modificar el código CSS, pero si no sabes te recomendaría dejarlo tal cual.


 

CUALQUIER DUDA QUEDO ATENTO A LOS COMENTARIOS.

2 visualizaciones0 comentarios

Entradas Recientes

Ver todo

Bình luận


bottom of page