Cómo Crear Temporadas y Capítulos en Blogger | Series y Películas

Como crear pestañas de temporadas y capítulos para blog de series o películas en linea, personalizar las publicaciones de su blog de series o películas con pestañas ordenadas basado en la librería.

Caja tipo contenedor de enlaces para mantener ordenado los diferentes capítulos o temporadas de sus videos en blogger. Totalmente reponsive y adaptable, puede agregar las temporadas y capitulo que desea o suprimir las que no va utilizar.

Para poder implementar este bloque de temporadas y capítulos en blogger es importante seguir los siguientes pasos.

1º Dentro de blogger entrar a Tema / Editar HTML aquí buscar el código de cierre </style> o ]]></b:skin> y pegar el siguiente código CSS de estilo antes de cierre </style> o ]]></b:skin>

body{font-family:'Segoe UI',Arial,sans-serif}.tab{overflow:hidden;border:2px solid #b5531b;background-color:#242424;border-radius:6px 6px 0 0}.tab button{background-color:inherit;float:left;border:none;outline:none;cursor:pointer;padding:12px 18px;transition:background-color .3s,color .3s;font-size:16px;font-weight:700;color:#ccc}.tab button:hover{background-color:#383838;color:#f9aa4d}.tab button.active{background-color:#b5531b;color:#fff}.tabcontent{display:none;padding:20px 15px;border:2px solid #b5531b;border-top:none;background-color:#1e1e1e;border-radius:0 0 6px 6px;animation:fadeEffect .4s}@keyframes fadeEffect{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.btn{border-radius:5px;padding:10px 16px;font-size:15px;font-weight:600;text-decoration:none;margin:6px;color:#fff!important;position:relative;display:inline-block;transition:background-color .2s ease,transform .1s}.btn:active{transform:translateY(4px);box-shadow:0 0 0 0 transparent!important}.blue{background-color:#cb4f20;box-shadow:0 4px 0 0 #7a350e}.blue:hover{background-color:#df5d2c}

2º Entrar a Tema / Editar HTML buscar el código de cierre </body> y pegar el siguiente código script antes del cierre de </body>.

<script>//<![CDATA[
function openCity(evt, cityName) {
  // 1. Ocultar todo el contenido de las pestañas
  document.querySelectorAll('.tabcontent').forEach(tab => {
    tab.style.display = 'none';
  });

  // 2. Quitar la clase 'active' de todos los botones
  document.querySelectorAll('.tablinks').forEach(link => {
    link.classList.remove('active');
  });

  // 3. Mostrar la pestaña actual y añadir 'active' al botón clickeado
  document.getElementById(cityName).style.display = 'block';
  evt.currentTarget.classList.add('active');
}
//]]></script>

3º Para colocar o agregar las pestañas de temporadas y capítulos en las entradas o paginas donde deseamos mostrar este bloque, debemos crear una publicación y editar en la opción (Vista HTML) utilizando el siguiente código html.

<div class="tab">
  <!-- Botones de las pestañas -->
  <button class="tablinks active" onclick="openCity(event, '1')">Temporada 1</button>
  <button class="tablinks" onclick="openCity(event, '2')">Temporada 2</button>
  <button class="tablinks" onclick="openCity(event, '3')">Temporada 3</button>
  <button class="tablinks" onclick="openCity(event, '4')">Temporada 4</button>
  <button class="tablinks" onclick="openCity(event, '5')">Temporada 5</button>
  <button class="tablinks" onclick="openCity(event, '6')">Temporada 6</button>
  <button class="tablinks" onclick="openCity(event, '7')">Temporada 7</button>
  <button class="tablinks" onclick="openCity(event, '8')">Temporada 8</button>
  <button class="tablinks" onclick="openCity(event, '9')">Temporada 9</button>
  <button class="tablinks" onclick="openCity(event, '10')">Temporada 10</button>
  <button class="tablinks" onclick="openCity(event, '11')">Temporada 11</button>
</div>

<!-- Contenido de la Temporada 1 (Abierta por defecto) -->
<div class="tabcontent" id="1" style="display: block;">
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 1</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 2</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 3</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 4</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 5</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 6</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 7</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 8</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 9</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 10</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 11</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 12</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 13</a>
</div>

<!-- Contenido de la Temporada 2 -->
<div class="tabcontent" id="2">
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 1</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 2</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 3</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 4</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 5</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 6</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 7</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 8</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 9</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 10</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 11</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 12</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 13</a>
</div>

<!-- Contenido de la Temporada 3 -->
<div class="tabcontent" id="3">
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 1</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 2</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 3</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 4</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 5</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 6</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 7</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 8</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 9</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 10</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 11</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 12</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 13</a>
</div>

<!-- Contenido de la Temporada 4 -->
<div class="tabcontent" id="4">
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 1</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 2</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 3</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 4</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 5</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 6</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 7</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 8</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 9</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 10</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 11</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 12</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 13</a>
</div>

<!-- Contenido de la Temporada 5 -->
<div class="tabcontent" id="5">
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 1</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 2</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 3</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 4</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 5</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 6</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 7</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 8</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 9</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 10</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 11</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 12</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 13</a>
</div>

<!-- Contenido de la Temporada 6 -->
<div class="tabcontent" id="6">
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 1</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 2</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 3</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 4</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 5</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 6</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 7</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 8</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 9</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 10</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 11</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 12</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 13</a>
</div>

<!-- Contenido de la Temporada 7 -->
<div class="tabcontent" id="7">
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 1</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 2</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 3</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 4</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 5</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 6</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 7</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 8</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 9</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 10</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 11</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 12</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 13</a>
</div>

<!-- Contenido de la Temporada 8 -->
<div class="tabcontent" id="8">
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 1</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 2</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 3</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 4</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 5</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 6</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 7</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 8</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 9</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 10</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 11</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 12</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 13</a>
</div>

<!-- Contenido de la Temporada 9 -->
<div class="tabcontent" id="9">
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 1</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 2</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 3</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 4</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 5</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 6</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 7</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 8</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 9</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 10</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 11</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 12</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 13</a>
</div>

<!-- Contenido de la Temporada 10 -->
<div class="tabcontent" id="10">
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 1</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 2</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 3</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 4</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 5</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 6</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 7</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 8</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 9</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 10</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 11</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 12</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 13</a>
</div>

<!-- Contenido de la Temporada 11 -->
<div class="tabcontent" id="11">
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 1</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 2</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 3</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 4</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 5</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 6</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 7</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 8</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 9</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 10</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 11</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 12</a>
  <a class="btn blue" href="#" rel="nofollow" target="_blank">Capitulo 13</a>
</div>

En este código implementado dentro de nuestras entradas podemos modificar los nombres y colocar cada uno de los enlaces url que enlacen a nuestros videos que tenemos publicados dentro del blog. también podemos aumentar o suprimir partes de este código html para que se adapten a la serie o película que deseamos mostrar.