Organiza el contenido de tu post agregando pestañas (tabs)

Organiza el contenido de tu post agregando pestañas (tabs) ver demo

Agregar tabs o bien pestañas nos puede resultar útil si lo que buscamos es organizar una gran cantidad de información de una forma más limpia. En este artículo te mostraré cómo agregar tabs para blogger dentro de un artículo de una forma sencilla, ligera y utilizando solo javascript puro para su funcionamiento.

Agregar css

En nuestro panel de administración buscamos la pestaña temas y pinchamos en el botón de Personalizar. Dentro buscaremos entre la lista que se muestra a la izquierda Opciones avanzadas, en ella nos fijamos en la pestaña Agregar CSS. En el textarea agregamos al final de todo el CSS que pudiéramos tener, el siguiente código css:

configuración

El código css está diseñado con la metodología BEM por lo cual es fácilmente editable. Aun así he comentado una parte del código para que puedas guiarte a la hora de editar.

Agregar javascript

En este caso nos iremos al editor HTML de la pestaña tema de nuestro panel y pegaremos el siguiente código justo antes de la etiqueta </body>;

El código está optimizado para solo mostrarse en las páginas y entradas del blog.

Estructura html

agregar más pestañas y contenedores

En caso de querer agregar más pestañas, solo debemos agregar más etiquetas html <a> de la siguiente manera:

Está de más decir que si agregamos más pestañas debemos agregar lógicamente más contenedores. El método es el mismo qué con las pestañas por cierto:


Bueno, hasta aquí el post, espero les guste y les sirva en su proyecto o web personal. Si este artículo te pareció interesante te invito a que dejes tu opinión o compartas la entradas, de esa manera me estarás ayudando mucho. Hasta la próximo.

Otros artículos que quizá te gusten.

cargando...

Comentarios

Publicar un comentario