Sabemos que muchos de ustedes tienen algún blog de series o películas online y por ese motivo en HoyGeek ya tenemos artículos sobre Sistema de calificación en las entradas y Pestañas para Capítulos de Series en una sola Entrada para poder personalizar las publicaciones de su blog de series o películas. Con el último algunos han tenido diversos problemas pero hoy traemos una versión mejorada.
Vamos a lograr el mismo resultado pero agregando algo más, temporadas y adentro los capítulos. Para esto es importante que nuestro blog tenga la librería jQuery, si no sabes si tu blog tiene integrado esta librería puedes revisar este artículo.
Luego de haber verificado si nuestro blog tiene jQuery, agregaremos una función de esta librería, que hará toda 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>Ahora agregaremos un poco de estilo a nuestras pestañas para que tenga un mejor aspecto, claro que esto lo puedes modificar según el estilo de tu blog de series.
Para agregar los estilos podemos hacerlo de dos formas: Desde el Editor de HTML o desde el Diseñador de temas de Blogger. En el blog tenemos un articulo sobre como añadir CSS en blogger.
/* Reset */
#seriesHG li::before, #seriesHG li::after { display: none; }
#seriesHG ul, #seriesHG li { clear: both; list-style: none; margin: 0; padding: 0; }
/* Personalización */
#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 modificar todos los estilos que te facilité solo si conoces 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 otras cosas.
Listo, por ahora ya tenemos la parte del sistema y los estilos de las pestañas. Ahora solo queda agregar la estructura que es lo que se verá 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
<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 más capítulos y Agregar más temporadas. En esos lugares es donde agregaremos un código nuevo dependiendo de lo que queremos aumentar.
Agregar un capítulo
<li><h4 class="titulo">Capitulo 2</h4>
<ul class="repro">
<li>AQUI VA EL VIDEO</li>
</ul>
</li>Agregar una temporada
<li class="temporada">
<h3 class="titulo">Temporada 1</h3>
<ul class="capitulos">
<!-- Agregar más capítulos -->
</ul>
</li>Y esto sería todo para tener nuestras pestañas ordenado por temporadas y capítulos en nuestro blog de series. Claro solo quedaría modificar un poco los estilos para que se ajuste al mismo de tu blog.
Necesitas hacer un video.
ResponderBorrarEste comentario ha sido eliminado por el autor.
ResponderBorrarHola, tengo una duda, ¿porque no me se me despliega la ventana de capítulo y temporada?
ResponderBorrarpara que entienda mejor mire: https://filmesify.blogspot.com/2020/01/screamqueens-es-una-serie-de-television.html?m=1
hola,una pregunta ¿porque no me se me despliega la ventana de capítulo y temporada? y
ResponderBorrartengo todo bien.porfavor cuando puedas contestame
esta es la pagina esta recien creada:
https://allfilmer.blogspot.com/
Hola FABRICIO ESCUDERO, si puedes enviarme un enlace con el código integrado para poder ver cual es el problema.
Borraramigo en CSS hay varios tipos de diseño para el HTML verdad ????
BorrarHola Brando. Así es, con CSS puedes dar diferentes diseños a tu web (HTML). Ya sea cambiar el color, darle efectos, tamaños, entre otras cosas.
BorrarAmigo muchas gracias por tu aporte, me ha servido mucho... tengo una pregunta, he puesto un video en la seccion de capitulos y resulta que no me permite la pantalla completo, dice que la funcion esta desactivada, me sucede solo con google drive, que puedo hacer? gracias
ResponderBorrarHola PelisParche, probablemente al obtener el código del video de Google Drive tenga la opción de desactivar la pantalla completa.
Borrarme a dado un error me sale esto ">" arriba del titulo y episodios
ResponderBorrarHola Fans del Anime, podrías enviarme el enlace de tu blog para poder ayudarte.
BorrarMaquina, fiera, bestia, crack jajaja excelente trabajo, no entiendo porque a la gente le salio tantos errores. En todo caso muchas gracias y gracias a esto me ahorro mucho tiempo. Gracias.
ResponderBorrarHola Duvalts, muchas gracias por tus comentatios me alegra bastante que te ayuden los tutoriales. Estuve modificando el código del tutorial en base a los comentarios de todos y así evitar los errores ya que todos no usan las mismas plantillas.
Borrarque plantilla usas
BorrarDuvalts
Sabes si hay alguna forma que con el dominio propio se deje incrustar vídeos de otros lados en mi blog ? me refiero a los embed.
ResponderBorrarHola Duvalts, puedes incrustar videos alojadas en otras páginas con un iframe. No estoy muy seguro si eso te ayuda.
Borrarhola bro a mi las pestañas me salen ya desplegadas y no me permite cerrarlas ni interactuar con ellas exeptuando los videos que pongo en ellas(ejm. si pongo 5 capitulos las 5 pestañas me salen desplegadas)
ResponderBorrarTengo el mismo problema
BorrarVLADRICK COMO LEHICISTE PARA PONER LAS OPCIONES DE VIDEOS JUNTAS EN TU BLOG DE PELICULAS?
BorrarAMIGO PASA TU ESTILO DE FUESNTE DE COMO LE HICISTE EN TUS PESTANAS DE VIDEOS
BorrarHola tengo el mismo problema que Netflixtube, me salen desplegadas, no entendí exactamante como introducir el script
ResponderBorrarPor q ya no hay mas video de ustedes en youtube
ResponderBorrarHola Jose, lamentamos de momento ya no poder seguir subiendo videos a YouTue pero estamos trabajando en ello por ahora estamos actualizando nuestro blog.
BorrarLas pestañas me salen desplegada y no se pueden esconder ni nada y todo esta normal
ResponderBorraresta es donde me sale
https://mrxpeliculas.blogspot.com/vampires-2020
hola amigo de HoyGeek,una pregunta ¿porque no me se me despliega la ventana de capítulo y temporada?https://janimefan.blogspot.com/2021/08/death-note.html?m=1
ResponderBorrarHola, me funciona bien pero me queda un < en el título. Cómo lo puedo solucionar?
ResponderBorrarHola Forensedigital, si agregas esta línea de CSS se elimina "<" #seriesHG .capitulos>li::before {display: none; }
Borraral agregar varias temporadas la pgina le cuesta mas en cargar por que sera?
ResponderBorrarHola Kelvinflix, esto sucede porque la pagina esta cargando todos los iframes en esa sección al mismo tiempo.
Borrarhola buenas funciona todo bien, solo queria saber como puedo ocultar los "iframes" ya que cargan todos al mismo tiempo y eso hace que cargue mas lenta la pagina.
ResponderBorrarpense en poner botones que sean los capitulos y al hacer click en el capitulo te envia a una pagina en donde esta el capitulo. solo que es algo te dioso hacer una pagina para cada capitulo, por eso queria ocultar los iframes o que solo carguen cuando el usuario haga click en el capitulo.
Grasias por este hermoso aporte
ResponderBorrar