Como Crear Temporadas y Capítulos en Blogger para 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 jQuery.

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> y pegar el siguiente código CSS de estilo dentro de </style>

<style>
body {font-family: Arial;}

/* Style the tab */
.tab {overflow: hidden;border: 3px solid #e28537;background-color: #fffff;}

/* Style the buttons inside the tab */
.tab button {background-color: inherit;float: left;border: none;outline: none;cursor: pointer;padding: 14px 16px;transition: 0.3s;font-size: 18px;color: black;}

/* Change background color of buttons on hover */
.tab button:hover {background-color: #e28537;}

/* Create an active/current tablink class */
.tab button.active {background-color: #f9aa4d;}

/* Style the tab content */
.tabcontent {display: none;padding: 6px 12px;border: 3px solid #e28537;border-top: none;}

/* button div */
.buttons {padding-top: 10px;text-align: center;}

/* start da css for da buttons */
.btn {border-radius: 3px;padding: 3px 3px;font-size: 17px;text-decoration: none;margin: 5px;color: #fff;position: relative;display: inline-block;}
.btn:active {transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);box-shadow: 0px 1px 0px 0px;}
.blue {background-color: #cb4f20;box-shadow: 0px 5px 0px 0px #000000;}
.blue:hover {background-color: #c73802;}  
</style>

2º Entrar a Tema / Editar HTML buscar el código de cierre </body> y pegar el siguiente código script en la parte de arriba de </body>.

 <script>
 function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName(&quot;tabcontent&quot;);
  for (i = 0; i &lt; tabcontent.length; i++) {
    tabcontent[i].style.display = &quot;none&quot;;
  }
  tablinks = document.getElementsByClassName(&quot;tablinks&quot;);
  for (i = 0; i &lt; tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(&quot; active&quot;, &quot;&quot;);
  }
  document.getElementById(cityName).style.display = &quot;block&quot;;
  evt.currentTarget.className += &quot; active&quot;;
}
</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">
    <button class="tablinks" 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, '5')">temporada 8</button>
    <button class="tablinks" onclick="openCity(event, '6')">temporada 9</button>
     <button class="tablinks" onclick="openCity(event, '7')">temporada 10</button>  
  </div>
  
  <div class="tabcontent" id="1">
   
    <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>
    <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>
  
  <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>
  
  <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>

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

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

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

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

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

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

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

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