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, haces clic en una pestaña y el contenido se muestra sin que se vuelva a cargar la página.
Implementar jQuery Tabs a Blogger:
1º Entrar a Blogger / Tema / Personalizar / Editar HTML, buscaremos </style> y colocaremos el siguiente código 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 HTML del blog buscar </head> y colocar encima el siguiente 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 el <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script> pueden eliminar esa parte.
3º Ultimo paso para implementar el tabs o pestañas en nuestras entradas y paginas, debemos usar el siguiente código HTML en en la sección 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>