BRAYANROCKER: Html para crear Tab Widget o Tabbed Content en tu sitio

Este tipo de diseño se utiliza para organizar contenido en pestañas interactivas, permitiendo a los usuarios cambiar entre secciones (como Sinopsis, Información Técnica, Imagen, Descarga) con un clic. Es popular en blogs y sitios web para ahorrar espacio y mejorar la experiencia del usuario.

A continuación, te proporciono el código completo que puedes pegar directamente en la vista HTML de tu entrada en Blogger. Incluye el texto introductorio y el widget de pestañas con los datos que ya trabajamos, usando "lorem ipsum" para el contenido adicional.

En esta entrada, encontrarás toda la información que necesitas sobre el anime organizada en un práctico Tab Widget. Usa las pestañas para explorar la Sinopsis, la Información Técnica, una Imagen representativa, y los enlaces de Descarga. Además, al final encontrarás iconos sociales para compartir esta entrada con tus amigos. ¡No olvides dejar tus comentarios y seguirnos para más contenido!

DEMO:

Makoto Niwa cuenta meticulosamente la cantidad de experiencias juveniles positivas y negativas en las que se involucra como si calificara su propia vida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Título: Denpa Onna to Seishun Otoko

Género: Ciencia Ficción, Comedia, Recuentos de la vida

Episodios: 12/12 + Extras

Censura: NO!

Idioma: Jap

Subtítulos: Esp

Duración: 24 Minutos X Capítulo

Peso: 140 MB X Capítulo

Resolución: 1280x720

Formato: MP4

Servidor: MediaFire

Contenido de la pestaña de Imagen. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Peso: 140 MB Por Capítulo

HTML:

<p><strong>Denpa Onna to Seishun Otoko: Una Aventura Excéntrica con Makoto Niwa [12/12 + Extras]</strong></p>

<p>¡Bienvenidos a una nueva entrada en el blog! Hoy les traigo <em>Denpa Onna to Seishun Otoko</em>, un anime que mezcla ciencia ficción, comedia y momentos cotidianos con un toque de extravagancia. Acompaña a Makoto Niwa mientras descubre la vida en una nueva ciudad junto a su peculiar prima Erio Touwa, quien afirma ser un extraterrestre. ¿Podrá Makoto mantener su vida "normal" rodeado de personajes tan únicos?</p>

<p>En esta entrada, encontrarás toda la información que necesitas sobre el anime organizada en un práctico <strong>Tab Widget</strong>. Usa las pestañas para explorar la <strong>Sinopsis</strong>, la <strong>Información Técnica</strong>, una <strong>Imagen</strong> representativa, y los enlaces de <strong>Descarga</strong>. Además, al final encontrarás iconos sociales para compartir esta entrada con tus amigos. ¡No olvides dejar tus comentarios y seguirnos para más contenido!</p>

<button onclick="openTab('sinopsis')" class="active">SINOPSIS</button>

<button onclick="openTab('info')">INFORMACIÓN TÉCNICA</button>

<button onclick="openTab('imagen')">IMAGEN</button>

<button onclick="openTab('descarga')">DESCARGA</button>

</div>

<p><strong>Makoto Niwa cuenta meticulosamente la cantidad de experiencias juveniles positivas y negativas en las que se involucra como si calificara su propia vida.</strong></p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

<p><strong>Título:</strong> Denpa Onna to Seishun Otoko</p>

<p><strong>Género:</strong> Ciencia Ficción, Comedia, Recuentos de la vida</p>

<p><strong>Episodios:</strong> 12/12 + Extras</p>

<p><strong>Censura:</strong> NO!</p>

<p><strong>Idioma:</strong> Jap</p>

<p><strong>Subtítulos:</strong> Esp</p>

<p><strong>Duración:</strong> 24 Minutos X Capítulo</p>

<p><strong>Peso:</strong> 140 MB X Capítulo</p>

<p><strong>Resolución:</strong> 1280x720</p>

<p><strong>Formato:</strong> MP4</p>

<p><strong>Servidor:</strong> MediaFire</p>

</div>

<p>Contenido de la pestaña de Imagen. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<p><strong>Peso:</strong> 140 MB Por Capítulo</p>

DESCARGA <span style="font-weight: bold;">MediaFire</span>

</button>

</a>

</div>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</div>

<style>

/* Estilo para el contenedor de las pestañas */

.tab-container {

width: 100%;

max-width: 800px; /* Ajusta según el ancho que desees */

margin: 0 auto;

font-family: Arial, sans-serif;

}

/* Estilo para los botones de las pestañas */

.tab-buttons {

display: flex;

justify-content: center;

gap: 10px;

margin-bottom: 20px;

}

.tab-buttons button {

padding: 10px 20px;

border: none;

background-color: #f1f1f1;

cursor: pointer;

font-size: 16px;

transition: background-color 0.3s;

}

.tab-buttons button:hover {

background-color: #ddd;

}

.tab-buttons button.active {

background-color: #ccc;

font-weight: bold;

}

/* Estilo para el contenido de las pestañas */

.tab-content {

display: none;

padding: 20px;

border: 1px solid #ccc;

background-color: #f9f9f9;

}

.tab-content.active {

display: block;

}

/* Estilo para las imágenes */

.tab-content img {

max-width: 100%; /* Asegura que la imagen no exceda el contenedor */

height: auto;

display: block;

margin: 10px 0;

}

/* Estilo para los iconos sociales */

.social-icons {

display: flex;

justify-content: center;

gap: 10px;

margin-top: 20px;

}

.social-icons img {

width: 40px;

height: 40px;

transition: transform 0.3s ease;

}

.social-icons img:hover {

transform: translateY(10px); /* Efecto de bajar al pasar el cursor */

}

</style>

// Función para cambiar entre pestañas

function openTab(tabName) {

// Ocultar todo el contenido

var contents = document.getElementsByClassName("tab-content");

for (var i = 0; i < contents.length; i++) {

contents[i].classList.remove("active");

}

// Quitar la clase "active" de todos los botones

var buttons = document.getElementsByClassName("tab-buttons")[0].getElementsByTagName("button");

for (var i = 0; i < buttons.length; i++) {

buttons[i].classList.remove("active");

}

// Mostrar el contenido de la pestaña seleccionada

document.getElementById(tabName).classList.add("active");

// Marcar el botón como activo

event.currentTarget.classList.add("active");

}

</script>

Html para crear Tab Widget o Tabbed Content en tu sitio

Entradas populares

Entradas populares

Etiquetas

Twitter

Redes Sociales

Visita mi Web

Follow

Visitantes Pros

Chat en Vivo

Hola, Bienvenido a mi blog!

Categorías

¡Visitanos!