Pestañas para temporadas y capítulos para blog de series

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.

Vamos a lograr un resultado muy llamativo dándole un diseño muy elegante para ello vamos a usar CSS. Vamos a lograr un resultado al igual que mi Blog de peliculas, para eso es importante que nuestro blog tenga la librería de jQuery, sino sabes si tu Blog tiene integrada esta librería puedes revistar este articulo donde te enseño.

🔲 AHORA COMENCEMOS CON LO PROMETIDO.

✅ Agregamos una función de esta libreria (jQuery) la cual se encargara de hacer todo la magia, antes de la etiqueta </head>

• CÓDIGO JQUERY

JS<script>
   //<![CDATA[
   (function($){
       $(document).ready(function() {
           $("#seriesHG li>ul").hide();
           $("#seriesHG .titulo").click(function() {
               $(this).next().slideToggle();
           })
       });
   })(jQuery);
   //]]>
</script>

✅ 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.

•  CÓDIGO CSS

CSS#seriesHG ul, #seriesHG li {
   clear: both;
   list-style: none;
   margin: 0;
   padding: 0;
}
 #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: #f1f1f1; /** Color de letra titulos **/
}
 #seriesHG .temporada>.titulo {
   background: #161616; /** Fondo de Temporada **/
   border-bottom: solid 1px #ed9621; /** Borde de temporada **/
   color: #f1f1f1; /** 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: #565656; /** Fondo de Capitulos Impares **/
}
 #seriesHG .capitulos>li:nth-child(2n) {
   background: #676767; /** 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.

✅ En la entrada de la serie agregaremos el siguiente código. Esta estructura muestra una temporada y dentro de ella un capitulo.

• CÓDIGO HTML

HTML<section id="seriesHG">
  <ul>
    <li class="temporada">
      <h3 class="titulo">Temporada 1</h3>
      <ul class="capitulos">
        <li><h4 class="titulo">Capitulo 1</h4>
          <ul class="repro">
            <li>AQUI VA EL VIDEO</li>
          </ul>
        </li>
        <!-- Agregar más capítulos -->
      </ul>
    </li>
    <!-- Agregar más temporadas -->
  </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

HTML<li><h4 class="titulo">Capitulo 2</h4>
  <ul class="repro">
    <li>AQUI VA EL VIDEO</li>
  </ul>
</li>

• AGREGAR TEMPORADA.

HTML<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.