Tabs, menú de vídeo con pestañas versión CSS para blogger 2020

Hola en este articulo aprenderemos a como insertar el sistema de tabs de vídeos o contenido para nuestro Blog de cada entrada o articulo, de una manera sencilla y rápida utilizando código CSS y la libreria de JQuery.

Por otra parte muchos usamos JQuery una libreria que pertenece a JavaScript teniéndola incluida entre las que carga nuestra plantilla, como algunas vez me habia hecho falta un sistema de estos, también llamados Tabs (lengüeta, tabulación) y algunos lectores habían preguntado por ellos, pensé que tenía que haber alguna manera de aprovechar jQuery para hacer lo mismo y así ahorrarnos añadir otra librería adicional a la ya de por sí pesada plantilla Blogger.

Y claro que la hay. Sólo es cuestión de utilizar algunas instrucciones como hide o show, autoexplicativas en su lengua nativa, una manera de añadir o quitar clases a los elementos de lista activos y por último, agregar un efecto fade para redondear.

El primer paso es incluir el código JavaScript antes de </head>. La primera línea que es la que carga jQuery es prescindible si ya la tenemos en nuestra plantilla.

JS<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").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>

El segundo es simplemente crear unas capas con los distintos contenidos a los que se les debe incorporar una serie de ID distintos, precedidos de una lista de enlaces cuyo destino son esos mismos ID. Los contenidos irán a su vez dentro de una única capa contenedora y cada elemento irá con clases añadidas para poder controlar el elemento activo y también para poder darle estilo. Lo podremos poner en un gadget o en una entrada y esta sería su estructura:

HTML<ul class="tabs">
<li><a href="#tab1">SERVIDOR  1</a></li>
<li><a href="#tab2">SERVIDOR  2</a></li>
<li><a href="#tab3">SERVIDOR  3</a></li>
<li><a href="#tab4">TRAILER</a></li>
</ul>
<div class="contenedor_tab">
<div class="contenido_tab" id="tab1">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://streamtape.com/e/Qw7G22qZMQT0lQB/" width="100%"></iframe>
</div>
<div class="contenido_tab" id="tab2">
<iframe allowfullscreen="" frameborder="0" height="315" src="#" width="100%"></iframe>
</div>
<div class="contenido_tab" id="tab3">
<iframe allowfullscreen="" frameborder="0" height="315" src="#" width="100%"></iframe>
</div>
<div class="contenido_tab" id="tab4">
<iframe allowfullscreen="" frameborder="0" height="315" src="#" width="100%"></iframe>
</div>
</div>
<div style="clear: both;">
</div>

Y esto será lo que veremos antes de formatear todo, una lista de enlaces y a continuación una frase (el contenido de la primera capa), que irá cambiando según pinchemos en un enlace u otro.

1. Servidor 1
2. Servidor 2
3. Servidor 3
4. Trailer

Para tener una cosa algo más decente, ya sólo resta dar estilo a las clases que hemos usado. Este sería un ejemplo de CSS que en Blogger, como es habitual, habría que insertar entre las etiquetas SKIN: ( ]]></b:skin> )

CSS/* CSS Tabs jQuery */   
.tabs{
margin: 0;
padding: 0;

}
.contenedor_tab{
;
float: left;
clear: both;
display: block;
width: 100%;
margin-top: -15px;
background-color: #F8F8F8;

}
ul.tabs li{
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
overflow: hidden;
position: relative;
text-transform: uppercase;
background-color: #000000;
border-radius:10px 10px 0px 0px;

}
ul.tabs li a{
font-family: Arial;
text-decoration: none;
color: white;
display: block;
font-size: 13px;
padding: 0 20px;
}
ul.tabs li a:hover{background:#dd3333;
}
ul.tabs li.activa{
background-color: #000000;
}
.contenido_tab{
padding: 10px;
font-size: 1.2em;
border-radius: 10px;
}
.contenido_tab img{margin:0 20px 20px 0;border:1px solid #FFFB00;padding:5px}

Puedes ver el ejemplo de como quedaría en el siguiente enlace, y también puedes ver el video donde te enseño los pasos que tienes que seguir.