¿Quieres mostrar tus animes, series o juegos favoritos de forma profesional en tu blog o página web? ¡Estás en el lugar correcto! Te traemos una plantilla HTML/CSS gratuita y completamente personalizable para crear una tarjeta de contenido multimedia con pestañas interactivas. Incluye secciones para sinopsis, información técnica, imágenes y descargas, además de iconos sociales para compartir. Perfecta para Blogger, Wix o cualquier sitio web. ¡Descarga el código ahora y personalízalo en minutos!
- Por qué esta introducción:
- Apela directamente al público objetivo (bloggers, creadores de contenido, fans de anime).
- Destaca los beneficios: gratuita, personalizable, fácil de usar, profesional.
- Incluye palabras clave como "HTML/CSS", "tarjeta de contenido", "pestañas interactivas" para SEO.
- Termina con una llamada a la acción ("Descarga el código ahora").
2. Descripción en el Cuerpo
El cuerpo de la entrada debe ser informativo, detallado y fácil de seguir. Explicaremos qué es la plantilla, cómo usarla, cómo personalizarla y cómo integrarla en un blog o página web. También incluiremos el código en un formato que los usuarios puedan copiar.
HTML:
<!DOCTYPE html><html>
<head>
<style>
/* Estilo general */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #ffffff; /* Fondo blanco para coincidir con Wix */
color: #333; /* Color de texto base más oscuro para contraste */
}
/* Contenedor principal */
.container {
max-width: 1000px;
margin: 0 auto;
display: flex;
gap: 15px; /* Espaciado más ajustado */
}
/* Sección de la imagen */
.image-section {
flex: 1;
}
.image-section img {
width: 240px;
height: 300px; /* Ajustar altura para que sea más alta y delgada */
/*11 object-fit: cover; /* produce que la imagen se distoricone sin salir del rango, solo elimina "/*11" al inicio dle codigo */
border-radius: 10px;
}
/* Sección de información */
.info-section {
flex: 2;
}
/* Título */
.title {
font-size: 22px; /* Tamaño más pequeño para coincidir con la imagen */
font-weight: bold;
margin-bottom: 8px;
color: #333; /* Color más oscuro para contraste con fondo blanco */
}
/* 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: 15px;
transition: background-color 0.3s;
}
.tab-buttons button:hover {
background-color: #ddd;
}
.tab-buttons button.active {
background-color: #ccc;
font-weight: bold;
}
/* Contenido de las pestañas */
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.tab-content.active {
display: block;
}
/* Iconos sociales */
.social-icons {
display: flex;
gap: 8px; /* Espaciado más ajustado */
margin-bottom: 10px;
}
.social-icons img {
width: 25px; /* Tamaño más pequeño */
height: 25px;
transition: transform 0.3s ease;
}
.social-icons img:hover {
transform: translateY(5px); /* Efecto de bajar al pasar el cursor */
}
/* Descripción breve */
.description {
font-size: 13px;
color: #667; /* Gris más oscuro para contraste con fondo blanco */
margin-bottom: 15px;
}
/* Información técnica */
.info-details {
display: flex;
gap: 25px;
margin-bottom: 15px;
}
.info-column {
flex: 1;
}
.info-column p {
margin: 3px 0; /* Espaciado más ajustado */
font-size: 13px;
}
.info-column p strong {
color: #00b7eb; /* Color azul brillante */
}
</style>
</head>
<body>
<div class="container">
<!-- Sección de la imagen -->
<div class="image-section">
<!-- Cambia la URL de la imagen aquí -->
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhToHdcYInaVKhqtP94ENCsbrWB5lpCovVmWiVGzlSgSpYd6rHIoqvDPHkmxTCYgSWDbVCtxruqhczqBXT7rLHzSWdcgJODb29WO3E7go1GGNx_qMGrXc9-gbOalNz_hcOdfbBl72Ey3r4/s400/Silent+Hill+Gold+Edition.jpg" alt="Portada">
</div>
<!-- Sección de información -->
<div class="info-section">
<!-- Cambia el título aquí -->
<div class="title">[HD] [TITULO] [Lat-Jap-Sub] [1080p] [EPISODIOS]</div>
<!-- Iconos sociales -->
<div class="social-icons">
<!-- Cambia los enlaces (href) y las URLs de los iconos (src) aquí -->
<a href="https://rebrand.ly/FacebookBrayanRocker" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg" alt="Facebook">
</a>
<a href="https://rebrand.ly/TwitterBrayanRocker" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/Logo_of_Twitter.svg" alt="Twitter">
</a>
<a href="https://rebrand.ly/WhatsappBrayanRocker" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp">
</a>
<a href="https://rebrand.ly/BrayanRockerYoutube" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0d/Youtube_logo.png" alt="Youtube">
</a>
</div>
<!-- Botones de pestañas -->
<div class="tab-buttons">
<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>
<!-- Contenido de las pestañas -->
<div id="sinopsis" class="tab-content active">
<!-- Cambia la descripción breve aquí -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="info" class="tab-content">
<!-- Cambia la información técnica aquí -->
<div class="info-details">
<div class="info-column">
<p><strong>Estado:</strong> Lorem ipsum</p>
<p><strong>Estudio:</strong> Lorem ipsum</p>
<p><strong>Released:</strong> Lorem ipsum</p>
<p><strong>Duración:</strong> Lorem ipsum</p>
<p><strong>Temporada:</strong> Lorem ipsum</p>
<p><strong>Tipo:</strong> Lorem ipsum</p>
</div>
<div class="info-column">
<p><strong>Episodios:</strong> Lorem ipsum</p>
<p><strong>Idiomas:</strong> Lorem ipsum</p>
<p><strong>Calidad de Video:</strong> Lorem ipsum</p>
<p><strong>Publicado por:</strong> Lorem ipsum</p>
<p><strong>Publicado el:</strong> Lorem ipsum</p>
<p><strong>Actualizado el:</strong> Lorem ipsum</p>
</div>
</div>
</div>
<div id="imagen" class="tab-content">
<!-- Cambia el contenido de la pestaña de imagen aquí -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="descarga" class="tab-content">
<!-- Cambia el contenido de la pestaña de descarga aquí -->
<p><strong>Peso:</strong> Lorem ipsum</p>
<a href="https://www.placeholder.com" target="_blank">
<button style="padding: 10px 20px; background-color: #0099ff; color: white; border: none; cursor: pointer;">
DESCARGA <span style="font-weight: bold;">LINK</span>
</button>
</a>
</div>
</div>
</div>
<script>
// 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>
</body>
</html>
DEMO:
[HD] [TITULO] [Lat-Jap-Sub] [1080p] [EPISODIOS]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Estado: Lorem ipsum
Estudio: Lorem ipsum
Released: Lorem ipsum
Duración: Lorem ipsum
Temporada: Lorem ipsum
Tipo: Lorem ipsum
Episodios: Lorem ipsum
Idiomas: Lorem ipsum
Calidad de Video: Lorem ipsum
Publicado por: Lorem ipsum
Publicado el: Lorem ipsum
Actualizado el: Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
