Cómo Agregar Pestañas de Videos en Blog de Blogger

 

Implementar jQuery Tabs en las entradas del blog se ha vuelto habitual sobre todo cuando nuestro contenido es un blog de vídeos o series, hoy les mostrare cómo crear pestañas en su blog de Blogger. Las pestañas ayudan a organizar diferentes secciones de contenido en un solo contenedor, lo que permite a los usuarios cambiar entre un video a otro video fácilmente sin usar el scroll.

El contenido con pestañas es una excelente manera de mostrar una gran cantidad de contenido en un espacio más reducido al separar el contenido en diferentes paneles. Hay muchas formas de diseñar pestañas, pero la idea principal es la misma, hacer clic en una pestaña y el contenido se muestra sin que se vuelva a cargar la página.

Para Implementar jQuery Tabs a Blogger, pestaña para videos con opción de 3 botones vamos a seguir los siguientes pasos.

1º Entrar a Blogger / Tema / Editar HTML, aquí buscaremos el código de cierre  </style> O ]]></b:skin>   y colocaremos el siguiente código CSS en la parte de encima.

ul.tabs{width:100%;max-width:800px;margin:0 auto;padding:0;list-style:none;height:35px;font-size:0;line-height:0;}
ul.tabs li{display:inline-block;width:33.33%;margin:0;padding:0;height:35px;line-height:35px;background:#050606;overflow:hidden;position:relative;border:0px solid #fff;border-bottom:0;box-sizing:border-box;border-radius:0px 0px 0 0;}
ul.tabs li a{display:block;text-decoration:none;color:#fff;font-size:14px;text-align:center;border:0px solid #fff;box-sizing:border-box;border-radius:0px 0px 0 0;}
ul.tabs li a:hover{background:#d54d52;}
ul.tabs li.activa,ul.tabs li.activa a,ul.tabs li.activa a:hover{color:#fff;font-weight:700;background:#d54d52;}
.contenedor_tab{width:100%;max-width:800px;margin:-1px auto 0;padding:0;background:#fff;border:0px solid #fff;border-top:0;box-sizing:border-box;border-radius:0 0 0px 0px;}
.contenido_tab{padding:10px;font-size:14px;box-sizing:border-box;}

2º En el mismo Editar HTML de la plantilla blogger buscar el código de cierre </head>  y colocar encima el siguiente código Skript.

<script src="//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>

Si ya tienen instalado en su plantilla blogger el código Jquery superior "<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>" pueden eliminar esta parte del código.

3º Ultimo paso para implementar el tabs o pestañas en nuestras entradas y paginas de blogger, debemos usar el siguiente código HTML en en la sección edición de entradas en blogger Vista HTML.

<ul class="tabs">
<li><a href="#tab1">OPCION  1</a></li>
<li><a href="#tab2">OPCION  2</a></li>
<li><a href="#tab3">OPCION  3</a></li>
</ul>
<div class="contenedor_tab">
  
<div class="contenido_tab" id="tab1">
CONTENIDO 1
</div>
  
<div class="contenido_tab" id="tab2">
CONTENIDO 2
</div>
  
<div class="contenido_tab" id="tab3">
CONTENIDO 3
</div>
  
</div>
<div style="clear: both;">
</div>

Debemos reemplazar de la siguiente manera:

OPCION 1,2,3: Aquí podemos cambiar el titulo del botón de cambiar videos.

CONTENIDO 1,2,3: En esta parte colocaremos el código iframe de los videos que deseamos mostrar en nuestra publicación.

• OPCION 1
• OPCION 2
• OPCION 3