Menu
Hola en este articulo aprenderemos a insertar o crear las temporadas y capítulos para nuestro Blog de películas o series, de tal manera el usuario al visitar nuestro blog tenga la facilidad de poder interactuar según las temporadas de acuerdo a cada serie en cada entrada de nuestro Blog, lo que vamos hacer ese insertar unas lineas de código donde queremos que aparezca nuestra Temporada y Capítulos.
¡Bienvenido! En este artículo, aprenderás a integrar fácilmente temporadas y capítulos en tu blog. Añade líneas de código para que tus usuarios naveguen sin esfuerzo entre las distintas series y encuentren su contenido favorito. ¡Vamos a sumergirnos en la creación de una experiencia de usuario envolvente!
Paso 1: Lineas de codigo para JavaScript
Agregamos una función de esta libreria (jQuery) la cual se encargara de hacer todo la magia, antes de la etiqueta </head>
<script> //<![CDATA[ (function($){ $(document).ready(function() { $("#seriesHG li>ul").hide(); $("#seriesHG .titulo").click(function() { $(this).next().slideToggle(); }) }); })(jQuery); //]]> </script>
Paso 2: Estilos CSS (estilos.css)
Ahora agregaremos un poco de estilo de CSS a nuestras pestañas para qu etenga un mejor aspecto de diseño, claro que esto tu lo puedes modificar segun el estilo que tu quieres.
Para agregar los estilos de CSS podemos hacerlo de dos formas: Desde el Editor de HTML o desde el Diseñador de temas de Blogger.
seriesHG ul,
#seriesHG li {clear: both;
list-style: none;
margin: 0;
padding: 0;
border-radius: 15px;
}
#seriesHG .repro {
text-align: center;
padding: 10px 0 30px 0;
}
#seriesHG .titulo {
cursor: pointer;
display: block;
margin: 0;
padding: 10px 12px; /** Separación interna titulo / font-size: 14px; / Tamaño de letra titulos / color: #FFF; / Color de letra titulos / } #seriesHG .temporada>.titulo { background: #006400; / Fondo de Temporada / border-bottom: solid 1px #ed9621; / Borde de temporada / color: #FFF; / Color de letra Temporada / } #seriesHG .capitulos li>.titulo:before { content: '\25ba'; display: inline-block; text-align: center; margin-right: 5px; } #seriesHG .capitulos>li:nth-child(2n+1) { background: #006400; / Fondo de Capitulos Impares / } #seriesHG .capitulos>li:nth-child(2n) { background: #006400; / Fondo de Capitulos Pares **/
}
Puedes ir modificando los estilos a tu manera siempre cuando tengas un poco de conocimiento de CSS, en caso contrario te recomiendo que solo modifiques las partes que están comentadas que son por ejemplo colores, tamaño de letra, fondos, entre otros.
Por ahora ya tenemos listo la parte del sistema y los estilos de las pestañas, por ultimo solo queda agregar la estructura que es lo que se vera en nuestro Blog de series.
Paso 3: Estructura Básica HTML
En la entrada de la serie agregaremos el siguiente código. Esta estructura muestra una temporada y dentro de ella un capitulo.
<section id="seriesHG">
<ul>
<li class="temporada">
<h3 class="titulo">Sesion 1</h3>
<ul class="capitulos">
<li><a href="URL DEL VIDEO" h4 class="titulo">Episodio 1</a>
</li>
<li><a href="URL DEL VIDEO" h4 class="titulo">Episodio 2</a>
</li>
<li><a href="URL DEL VIDEO" h4 class="titulo">Episodio 3</a>
</li>
<li><a href="URL DEL VIDEO" h4 class="titulo">Episodio 4</a>
</li>
<li><a href="URL DEL VIDEO" h4 class="titulo">Episodio 5</a>
</li>
<!-- Agregar más capítulos -->
</ul>
</li>
<!-- Agregar más temporadas -->
<li class="temporada">
<h3 class="titulo">Sesion 2</h3>
<ul class="capitulos">
<li><a href="URL DEL VIDEO" h4 class="titulo">Episodio 1</a>
</li>
<li><a href="URL DEL VIDEO" h4 class="titulo">Episodio 2</a>
</li>
<li><a href="URL DEL VIDEO" h4 class="titulo">Episodio 3</a>
</li>
<li><a href="URL DEL VIDEO" h4 class="titulo">Episodio 4</a>
</li>
<li><a href="URL DEL VIDEO" h4 class="titulo">Episodio 5</a>
</li>
<!-- Agregar más capítulos -->
</ul>
</li>
</ul>
</section>
En el código veremos que hay dos comentarios: Agregar mas capítulos y Agregar mas temporadas. En esos lugares es donde agregaremos un código nuevo dependiendo de lo que queremos aumentar ya sea una temporada o un capitulo.
AGREGAR CAPITULO
<li><h4 class="titulo">Capitulo 2</h4> <ul class="repro"> <li>AQUI VA EL VIDEO</li> </ul> </li>
AGREGAR TEMPORADA.
<li class="temporada"> <h3 class="titulo">Temporada 1</h3> <ul class="capitulos"> <!-- Agregar más capítulos --> </ul> </li>
De esta manera ya tendriamos nuestars pestañas ordenadas por temporadas y capitulos en nuestro Blog de series. Claro solo quedaria moficar un poco de estilos para que se ajuste a nuestro blog.
