Como crear un Botón de Capítulos anteriory y siguiente en Blogger para Series y Películas

Hola a todos, espero que se encuentren bien. En éste nuevo post les quiero compartir un pequeño aporte un "Botón de Capítulos anterior y Siguiente con Botón de Descargar" que estoy seguro les será de mucha ayuda para agregar en su blog de series o películas.  

instalacion 

Antes de empezar con los pasos, quiero decir que si bien la instalación es para blogger, el código es perfectamente válido para usar en el CMS de tu preferencia. 

Agregar los estilos 

/* css variables */
.cv-player {
  --color: #5c6bc0;
  --light: #f1f3f7;
  --container: #fff;
  --text: #263238;
  --size-base: 14px;
  --size-btn: 12px;
  --radius: 4px;
  --play-icon-width: 92px;
  --transition-dur: .2s;
  --animation-name: cvPlayer; 
  --animation-name-dl: cvPlayer;
  --animation-dur: .4s;
}

.cv-player-body{position:relative}@media screen and (min-width:576px){.cv-player-flex{display:flex;justify-content:space-between}}.cv-player-body{padding:16px 0;position:relative}.cv-player-poster{position:absolute;left:0;top:16px;width:100%;height:calc(100% - 32px);z-index:100;border-radius:var(--radius);overflow:hidden;display:flex;transition:opacity .3s}.cv-player-poster:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:.25}.cv-player-poster img{width:100%;height:100%;object-fit:cover}.cv-player-poster .ico{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;user-select:none}.cv-player-poster .ico svg{width:var(--play-icon-width);height:var(--play-icon-width);fill:#fff;cursor:pointer}.cv-player-poster.is-fading{opacity:0}.cv-player-outside{background:rgba(0,0,0,.5);position:fixed;left:0;top:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;z-index:3001}.cv-player-select{padding:16px;min-width:260px;max-height:296px;background:var(--container);border-radius:var(--radius);display:none;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.1);z-index:3002}@media screen and (min-width:576px){.cv-player-select{max-height:296px}}.cv-player-select>div{width:100%;display:flex;flex-direction:column;overflow-y:auto}.cv-player-outside.is-visible{display:flex;animation-duration:var(--animation-dur);animation-name:cvPlayer;animation-fill-mode:forwards}.cv-player-outside.is-visible .cv-player-select{animation-duration:calc(var(--animation-dur) * 2);animation-name:var(--animation-name);animation-fill-mode:forwards;display:flex}.cv-player-download ul li a,.cv-player-select button,.cv-player-trigger{background:var(--light);color:var(--text);border:0;outline:0;padding:12px 16px;text-align:left;font-weight:700;font-size:var(--size-base);cursor:pointer;border-radius:var(--radius);text-transform:uppercase;transition:color var(--transition-dur),background var(--transition-dur);position:relative;user-select:none;text-decoration:none}.cv-player-select button[data-caption]:before{background:rgba(0,0,0,.1);color:var(--text);font-size:var(--size-btn);padding:4px;content:attr(data-caption);text-transform:initial;border-radius:var(--radius);position:absolute;right:8px;top:calc(100% / 2 - 12px)}.cv-player-select button[data-caption].is-selected:before{background:#fff;color:var(--color)}.cv-player-select button:hover,.cv-player-trigger:hover{color:var(--color)}.cv-player-download ul li:not(:last-child) a,.cv-player-select button:not(:last-child){margin-bottom:8px}.cv-player-select button span{display:block;text-transform:lowercase;font-size:var(--size-btn);opacity:.5;margin-top:2px}.cv-player-select button.is-selected{background:var(--color);color:#fff}.cv-player-select button.is-disable{opacity:.5;pointer-events:none}.cv-player-close{background:var(--color);color:#fff;width:36px;height:36px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:50%;position:absolute;right:0;top:0;margin:-20px;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,.1);z-index:3003}.cv-player-embed{position:relative;left:0;top:0;width:100%;padding-top:100%;display:block;border-radius:var(--radius);overflow:hidden;user-select:none}.cv-player-embed{padding-top:56.25%}.cv-player-embed iframe,.cv-player-embed video{outline:0;border:0;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.cv-player-action{display:flex;align-items:center}.cv-player-action .cv-player-trigger#server{margin-right:8px}@media screen and (max-width:576px){.cv-player-action{justify-content:space-between}}.cv-player-trigger{display:flex;align-items:center}.cv-player-trigger svg{width:24px;height:24px;fill:currentColor;opacity:.8;margin-right:8px}.cv-player-download .cv-player-trigger svg{margin-right:0}.cv-player-download{position:relative}.cv-player-download input[type=checkbox]{display:none}.cv-player-download ul{background:var(--container);position:absolute;left:calc(100% + 12px);bottom:0;margin:0;margin-right:16px;padding:8px;min-width:14em;border-radius:var(--radius);box-shadow:0 0 8px rgba(0,0,0,.1);display:none;z-index:201}@media screen and (max-width:576px){.cv-player-download ul{left:auto;right:calc(100% + 4px)}}.cv-player-download input[type=checkbox]:checked~ul{display:block;animation-duration:calc(var(--animation-dur) * 2);animation-name:var(--animation-name-dl);animation-fill-mode:forwards}.cv-player-download ul li{list-style:none;padding:0;margin:0;display:block;animation-name:var(--animation-name-dl)}.cv-player-download ul li a{text-decoration:none;display:flex;align-items:center;justify-content:space-between}.cv-player-download ul li a span{font-size:var(--size-btn)}.cv-player-download ul li a:hover{background:var(--color);color:#fff}.cv-player-nav{display:flex;align-items:center}@media screen and (max-width:576px){.cv-player-nav{margin-top:12px}.cv-player-nav .cv-player-trigger{flex-grow:1;justify-content:center}}.cv-player-nav .cv-player-trigger:not(:first-child){margin-left:8px}

/* cvPlayer: animation */
@keyframes cvPlayer {
  from {
    opacity: 0;
  } to {
    opacity: 1;
  }
}

Al principio del código encontraremos unas variables css que nos permitirán editar el color, duración y animaciones del player. En la siguiente tabla se detalla el uso de cada una de éstas variables.

Agregar el código de javascript

Con respecto al código de javascript, necesitamos ir a nuestro panel > Tema > Editar HTML y justo por arriba de </body> pegamos el siguiente código:

<b:if cond='data:view.isPost or data:view.isPage'>
<script>
//<![CDATA[
/*!
* cvPlayer -  v1.1.1
* Copyright 2021 © Karasu themes
* Developed by Marcelo (github.com/MarceloTLD)
* MIT License
*/
"use strict";var e,t,c;c=function(e,t){for(var c=0;c<e.length;c++)t.call(e[c],c,e[c])},e=document.querySelectorAll(".cv-player-select button"),t=document.querySelector(".cv-player-embed"),c(e,(function(n,r){var i=r;i.addEventListener("click",(function(){var n=null!=i.getAttribute("data-type")&&i.getAttribute("data-type"),r=i.getAttribute("data-src");if(i.classList.contains("is-selected"))return!1;c(e,(function(e,t){return t.classList.remove("is-selected")})),i.classList.add("is-selected"),t.innerHTML="",t.appendChild(function(e,t){var c=document.createElement("video"),n=document.createElement("iframe");return"video"==e?(c.src=t,c.controls=!0,c):(n.src=t,n.allowfullscreen=!0,n.setAttribute("allowFullScreen",""),n)}(n,r))}))})),function(){var e=document.querySelector(".cv-player-trigger#server"),t=document.querySelector(".cv-player-outside"),c=document.querySelector(".cv-player-close"),n=document.querySelector(".cv-player-body"),r=n.getAttribute("data-poster"),i=document.body,s=document.querySelector(".cv-player-download");if(e.addEventListener("click",(function(){t.classList.add("is-visible")})),c.addEventListener("click",(function(){t.classList.remove("is-visible")})),t.addEventListener("click",(function(e){e.target.classList.contains("cv-player-outside")&&t.classList.remove("is-visible")})),i.addEventListener("click",(function(){s.addEventListener("click",(function(e){return e.stopPropagation()})),s.querySelector("input").checked=!1})),r){var a=function(e){var t=document.createElement("div"),c=document.createElement("img"),n=document.createElement("div");return t.classList.add("cv-player-poster"),n.classList.add("ico"),c.src=e,n.innerHTML='<svg viewBox="0 0 24 24"><path d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>',t.appendChild(c),t.appendChild(n),t}(r),l=n.querySelector("iframe, video");a.querySelector("svg").addEventListener("click",(function(){a.classList.add("is-fading"),l.autoplay=1,a.addEventListener("transitionend",(function(){a.remove()}))})),n.appendChild(a)}}();
//]]>
</script>
</b:if>

Guardamos los cambios y listo.

Agregar el html

Ya para terminar debemos de agregar el html para que todo quede funcionando correctamente. Desde nuestro Panel > Entradas agregamos una nueva entrada o bien editamos una, luego pegamos el siguiente código html:

<div class="cv-player">
<div class="cv-player-body">
<div class="cv-player-flex">
<div class="cv-player-action">
<div>
</div>


<!-- Download links -->
<div class="cv-player-download">
    <label for="cvDL" class="cv-player-trigger is-dropdown">
    <svg viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /></svg></label>   <input type="checkbox" id="cvDL"/>
    <ul>
      <!-- Enlaces de descarga, tienen que borrar este texto completo y pegar el código de los enlaces -->
    </ul>
</div>
</div>
<div class="cv-player-nav">
	<a href="{url}" class="cv-player-trigger">
    <svg viewBox="0 0 24 24">
    <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
    </svg> anterior.</a>
<a href="{url}" class="cv-player-trigger">
    <svg sviewBox="0 0 24 24">
    <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
    </svg>
    siguiente.</a>
  <a href="{url}" class="cv-player-trigger">Lista de cap.</a>
</div>
</div>
</div>

Agregar enlaces de descarga

Para agregar los enlaces de descarga, debemos buscar <!-- Enlaces de descarga --> en el html y reemplazarlos por el siguiente código:

<li><a href="{link}">Nombre servidor <span>Tamaño</span></a></li>

Reemplaza {link} incluyendo los corchetes por la url correspondiente.